Bagaimana untuk mewarisi css

CSS ialah singkatan dari Cascading Style Sheet Ia adalah bahasa yang digunakan untuk menerangkan cara dokumen HTML dipersembahkan, termasuk fon, warna, reka letak, latar belakang dan aspek lain. Dalam CSS, warisan ialah ciri yang sangat penting, yang membolehkan kami mereka bentuk gaya untuk halaman dengan lebih mudah dan cekap. Artikel ini akan menyelidiki mekanisme pewarisan CSS.

1. Apakah itu warisan CSS

Dalam CSS, sesuatu elemen boleh mewarisi atribut gaya daripada elemen induknya. Ini bermakna jika kita menetapkan sifat gaya tertentu pada elemen, unsur turunannya akan mewarisi sifat ini secara automatik. Mekanisme pewarisan CSS membolehkan kami menjadikan gaya keseluruhan halaman web konsisten tanpa perlu menetapkan gaya untuk setiap elemen secara individu.

Sebagai contoh, kita boleh menetapkan fon pada elemen badan dan kemudian mewarisi fon ini dalam semua elemen keturunan. Kodnya adalah seperti berikut:

body {
    font-family: Arial, sans-serif;
}

h1 {
    font-size: 2em;
}

Dalam contoh ini, elemen h1 secara automatik akan mewarisi set fon pada elemen badan, tetapi ia juga mengatasi saiz fon lalai, menetapkannya kepada 2em.

2. Sifat boleh diwarisi dan tidak boleh diwarisi

Dalam CSS, tidak semua sifat boleh diwarisi. Lazimnya, sifat boleh diwarisi ialah sifat yang mempengaruhi penampilan kandungan unsur. Sebagai contoh, fon, warna dan petunjuk adalah semua sifat yang boleh diwarisi kerana ia mempengaruhi penampilan keseluruhan halaman web.

Walau bagaimanapun, sesetengah sifat tidak boleh diwarisi kerana ia menggambarkan sifat unsur itu sendiri. Sebagai contoh, lebar, tinggi dan kedudukan elemen adalah sifat tidak boleh diwarisi kerana ia tidak mempunyai kesan ke atas kandungan elemen.

Berikut ialah beberapa sifat biasa yang boleh diwarisi dan tidak boleh diwarisi:

Sifat boleh diwarisi:

• font
• warna
• garisan -height
• text-align
• margin
• padding

Sifat tidak boleh diwarisi:

• lebar
• tinggi
• kedudukan
• atas
• kanan
• bawah
• kiri

Perlu diingatkan bahawa tidak semua sifat yang sama adalah sifat yang boleh diwarisi. Sebagai contoh, warna latar belakang elemen ialah sifat boleh diwarisi, tetapi imej latar belakang ialah sifat tidak boleh diwarisi.

3. Keutamaan yang diwarisi

Dalam CSS, gaya yang diwarisi boleh diganti atau ditindih oleh unsur keturunan. Ini kerana apabila terdapat berbilang peraturan gaya untuk elemen, CSS menggunakan pendekatan melata untuk menentukan gaya akhir elemen.

Terdapat peraturan tertentu untuk keutamaan pelata CSS. Berikut ialah peraturan untuk keutamaan melata CSS, disusun daripada keutamaan tinggi ke rendah:

1. Gaya yang ditetapkan terus melalui atribut gaya mempunyai keutamaan tertinggi dan akan mengatasi mana-mana gaya lain.
2. Semakin spesifik pemilih, semakin tinggi keutamaannya. Sebagai contoh, pemilih ID mempunyai keutamaan yang lebih tinggi daripada pemilih kelas, manakala pemilih teg mempunyai keutamaan yang paling rendah.
3. Gaya yang muncul berbilang kali dengan pemilih yang sama akan dilantunkan mengikut susunan ia muncul dalam helaian gaya dan gaya kemudian akan mengatasi gaya sebelumnya.
4. Gaya yang diwarisi mempunyai keutamaan paling rendah dan boleh ditindih oleh gaya langsung pada unsur keturunan.

Oleh itu, apabila kita menggunakan sifat warisan yang sama dalam peraturan gaya berbilang, kita perlu mempertimbangkan keutamaannya. Jika unsur keturunan menukar gaya yang diwarisi, ia akan mengatasi peraturan warisan yang ditentukan sebelum ini. Kita boleh menggunakan kata kunci !important untuk memaksa menimpa gaya lain, tetapi ia akan memecahkan kebolehselenggaraan CSS.

4. Amalan terbaik untuk menggunakan warisan

Menggunakan warisan boleh mengurangkan jumlah kod gaya secara berkesan, tetapi penggunaan warisan yang berlebihan boleh menjadikan kod lebih sukar untuk difahami dan dikekalkan. Berikut ialah amalan terbaik untuk menggunakan warisan:

1. Gunakan warisan hanya apabila perlu. Sebagai contoh, apabila menggunakan gaya biasa pada unsur jenis yang sama, lebih mudah untuk menggunakan warisan daripada menetapkan gaya secara langsung pada setiap elemen.
2. Gunakan sifat yang boleh diwarisi. Gunakan warisan hanya pada harta yang perlu digunakan untuk semua keturunan.
3. Fahami hubungan keutamaan harta pusaka. Fahami dengan betul hubungan keutamaan warisan untuk mengelakkan kekeliruan keutamaan.
4. Elakkan penggunaan berlebihan kata kunci !penting. Ia memecahkan kebolehselenggaraan CSS dan disyorkan untuk digunakan hanya apabila perlu.

Ringkasan

Warisan ialah salah satu ciri penting dalam CSS, yang membolehkan kami menggayakan halaman dengan lebih mudah dan cekap. Apabila menggunakan warisan, anda perlu memahami perbezaan antara harta pusaka dan tidak boleh diwarisi, serta hubungan keutamaan warisan. Pada masa yang sama, anda perlu mengikuti amalan terbaik dan mengelakkan penggunaan berlebihan warisan dan kata kunci !penting untuk menjadikan kod CSS lebih mudah difahami dan diselenggara.

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