Prinsip pelaksanaan CSS

CSS ialah bahasa helaian gaya yang dibina pada bahasa penanda seperti HTML, JavaScript dan XML Ia digunakan terutamanya untuk menerangkan gaya dan reka letak halaman web. Melalui CSS, anda boleh menukar fon, warna, latar belakang, reka letak dan gaya lain dengan mudah pada halaman web untuk membawa pengalaman pengguna yang lebih baik ke halaman web. Artikel ini terutamanya memperkenalkan prinsip pelaksanaan CSS.

1. Struktur asas CSS

Gaya CSS dan teg HTML diasingkan. Dalam HTML, kami mentakrifkan struktur dan kandungan halaman web melalui penanda, dan CSS digunakan untuk menentukan cara untuk memaparkan kandungan ini. Gaya CSS terdiri daripada pemilih dan blok perisytiharan Setiap pemilih mewakili elemen HTML, dan blok perisytiharan menentukan peraturan untuk digunakan pada elemen ini.

Berikut ialah contoh gaya CSS mudah:

<code>p {
    font-size: 20px;
    color: black;
}</code>

Dalam contoh ini, p ialah pemilih, merujuk kepada tanda perenggan <p></p> dalam dokumen HTML, bunga Di dalam kurungan ialah blok pengisytiharan atribut, yang mengandungi dua atribut: font-size dan color. Sifat ini menerangkan cara elemen ini perlu dipaparkan: saiz fon ialah 20 piksel dan teks berwarna hitam.

2. Cara menggunakan CSS

CSS mempunyai tiga kaedah aplikasi utama: gaya sebaris, helaian gaya dalaman dan helaian gaya luaran. Perbezaan utama antara aplikasi ini ialah tempat ia digunakan.

• Gaya sebaris

Gaya sebaris ialah gaya yang digunakan terus pada elemen HTML. Contohnya:

<code><p style="color:red;">Hello World!</p></code>

Dalam contoh ini, atribut style menentukan bahawa perenggan ini harus menggunakan warna fon merah.

• Helaian gaya dalaman

Helaian gaya dalaman ialah helaian gaya yang ditulis dalam teg , dengan format berikut:

<code>
    <style>
        p {
            color: red;
        }
    </style>
</code>

Dengan pemilihan Bekas dan blok pengisytiharan harta digunakan untuk menentukan gaya.

• Helaian gaya luaran

Helaian gaya luaran ditulis dalam fail CSS yang berasingan dan diperkenalkan ke dalam dokumen HTML melalui teg <link>. Contohnya:

<code>
    <link rel="stylesheet" type="text/css" href="style.css">
</code>

Dalam contoh ini, atribut href menentukan laluan fail helaian gaya luaran.

3. Proses penghuraian CSS

Apabila penyemak imbas memuatkan HTML dan CSS, ia akan dihuraikan secara berasingan. Penghurai HTML menghuraikan dokumen HTML, membina pepohon dokumen (pokok DOM) dan mentafsir setiap teg sebagai nod, manakala penghurai CSS menghuraikan dokumen CSS, membina Model Objek CSS (CSSOM) dan mentafsir setiap pemilih sebagai objek .

Seterusnya, penghurai menggabungkan pepohon dokumen dan CSSOM untuk mencipta pepohon pemaparan baharu. Dalam pepohon pemaparan ini, setiap nod mempunyai maklumat gayanya, menunjukkan tempat ia berada pada skrin dan cara ia dipaparkan. Akhir sekali, penyemak imbas menggunakan pepohon render untuk melukis halaman HTML.

4. Lata dan pewarisan CSS

Dua konsep penting CSS ialah lata dan pewarisan. Lata mewakili cara berbilang takrifan gaya digunakan pada elemen yang sama untuk menentukan gaya yang diutamakan. Pewarisan menunjukkan sama ada elemen harus mewarisi gaya elemen induknya.

• Cascading

Apabila berbilang peraturan digunakan pada elemen yang sama, CSS mengikut set peraturan untuk memutuskan peraturan yang mempunyai keutamaan yang lebih tinggi. Antaranya, peraturan berikut disusun daripada keutamaan tinggi kepada rendah:

<code>1. 在属性声明中使用的`!important`关键字。
2. 内联样式（例如`style`属性）。
3. 选择器中的ID选择器。
4. 选择器中的类选择器、属性选择器和伪类选择器。
5. 选择器中的元素选择器和伪元素选择器。
6. 通用选择器（*）。
</code>

• Warisan

Nilai beberapa sifat boleh diwarisi daripada unsur nenek moyang. Contohnya, semua elemen teks mewarisi tetapan fon elemen induknya. Dalam CSS, sifat dan elemen yang diwarisi dan tidak diwarisi telah ditakrifkan dengan jelas dalam dokumen spesifikasi.

5. Petua pengoptimuman untuk CSS

• Gunakan helaian gaya luaran

Jika gaya digunakan oleh berbilang halaman web, kemudian gunakan mereka Meletakkannya dalam fail CSS yang berasingan akan meningkatkan prestasi. Penyemak imbas hanya perlu memuatkan fail CSS ini sekali, dan bukannya memuatkan gaya yang sama beberapa kali.

• Kurangkan kerumitan pemilih

Semakin kompleks pemilih, semakin lama penghurai perlu memprosesnya. Mengekalkan pemilih semudah mungkin boleh membantu mengurangkan saiz fail CSS dan dengan itu meningkatkan prestasi.

• Elakkan menggunakan !important

Walaupun mungkin untuk memaksa gaya untuk digunakan melalui kata kunci !important, ia akan mengatasi gaya keutamaan rendah yang lain. Sebaik sahaja ia digunakan, sukar untuk membuat asal, jadi lebih baik untuk mengelakkannya.

• Mampat Fail CSS

Fail CSS boleh dimampatkan kepada saiz fail yang lebih kecil menggunakan alat pemampatan CSS. Ini bukan sahaja mengurangkan masa muat turun fail, tetapi juga mengurangkan saiz permintaan dan menjimatkan sumber lebar jalur.

6. Kesimpulan

CSS ialah salah satu asas pembangunan web, dan memahami cara ia berfungsi adalah sangat penting untuk mempelajari dan menggunakan CSS. Artikel ini terutamanya memperkenalkan struktur asas, kaedah aplikasi, proses penghuraian, cascading dan warisan, dan teknik pengoptimuman CSS CSS. Saya harap ia akan membantu pemula atau pembangun yang ingin mempelajari CSS secara mendalam.

Atas ialah kandungan terperinci Prinsip pelaksanaan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!