Bagaimana untuk menyambungkan html ke css

HTML dan CSS ialah komponen penting teknologi bahagian hadapan Kerjasama antara kedua-duanya boleh membantu halaman mencapai penampilan yang lebih baik dan pengalaman interaktif. Artikel ini akan memperkenalkan cara HTML dikaitkan dengan CSS untuk mencapai kawalan gaya halaman.

1. Mengenai HTML dan CSS

HTML ialah struktur asas halaman web dan boleh difahami sebagai rangka rumah Ia mentakrifkan kandungan, reka letak, teg dan pautan dalam laman web. CSS ialah helaian gaya, yang boleh difahami sebagai hiasan rumah Ia mengawal penampilan, susun atur dan warna halaman web.

2. Menambah CSS pada HTML

Terdapat dua cara untuk menambah helaian gaya CSS pada dokumen HTML, iaitu gaya dalaman dan gaya luaran ia akan diperkenalkan di bawah:

1. Gaya dalaman

Gaya dalaman ialah menambahkan teg

<title>My Website</title>
<style>
body {
  background-color: #f2f2f2;
  font-family: Arial, sans-serif;
}
h1 {
  color: #333333;
}
</style>


<h1 id="Welcome-to-my-website">Welcome to my website</h1>
<p>This is the home page of my website</p>

Dalam kod di atas, teg

2. Gaya luaran

Gaya luaran ialah meletakkan kod CSS dalam fail CSS yang berasingan, dan kemudian mengimport fail CSS ke dalam dokumen HTML melalui teg dokumen. Contohnya:

<title>My Website</title>
<link>


<h1 id="Welcome-to-my-website">Welcome to my website</h1>
<p>This is the home page of my website</p>

Dalam kod di atas, teg menghala ke fail CSS bernama "style.css", yang akan digunakan oleh kod HTML untuk mengawal gaya halaman web.

3. Pemilih CSS

Untuk memahami cara mencipta gaya CSS, anda mesti memahami pemilih CSS terlebih dahulu. Pemilih ialah cara untuk menentukan elemen HTML untuk digayakan. Berikut ialah beberapa pemilih CSS biasa:

1. Pemilih elemen

Pemilih elemen ialah cara untuk menggunakan nama teg sebagai pemilih. Contohnya, kod CSS berikut menetapkan warna semua elemen perenggan kepada merah:

p {
  color: red;
}

2. Pemilih kelas

Pemilih kelas memberikan nama kelas kepada elemen HTML Nama kelas ini boleh Digunakan dalam lembaran gaya untuk menentukan gaya. Sebagai contoh, kod CSS berikut menetapkan semua elemen dengan atribut kelas "kelas saya" kepada warna latar belakang merah dan saiz fon 16pt:

.my-class {
  background-color: red;
  font-size: 16pt;
}

Dalam kod HTML, gaya ini boleh digunakan dengan menambah atribut kelas Pada elemen, kaedahnya adalah seperti berikut:

<div>
  <p>Hello, this is a paragraph</p>
</div>

3. Pemilih ID

Pemilih ID menentukan nama ID unik untuk elemen HTML, dengan menggunakan ini dalam helaian gaya Nama, yang boleh digayakan untuk elemen ID. Sebagai contoh, kod CSS berikut menetapkan elemen dengan nilai atribut ID "id-saya" kepada latar belakang biru dan saiz fon 18pt:

#my-id {
  background-color: blue;
  font-size: 18pt;
}

Dalam kod HTML, anda boleh menggunakan gaya ini pada Pada elemen , kaedahnya adalah seperti berikut:

<div>
  <p>Hello, this is a paragraph</p>
</div>

4. Ringkasan

Menambah helaian gaya CSS pada HTML boleh mengawal penampilan dan gaya halaman dengan mudah, yang boleh dilakukan dalam dua cara: dalaman dan capaian gaya luaran. Apabila menulis gaya CSS, anda mesti memahami pemilih CSS, yang merupakan cara untuk menentukan elemen HTML untuk gaya yang harus digunakan. Dengan menggabungkan teknik ini, anda boleh mendapatkan halaman yang cantik dan mudah diurus.

Atas ialah kandungan terperinci Bagaimana untuk menyambungkan html ke css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!