Bagaimana CSS Warisan Bekerja di Dokumen Web

Satu bahagian penting dalam melukiskan laman web dengan CSS adalah memahami konsep warisan.

Pewarisan CSS secara automatik ditentukan oleh gaya harta yang digunakan. Apabila anda melihat sifat latar belakang warna gaya, anda akan melihat bahagian bertajuk "Warisan". Jika anda seperti kebanyakan pereka web, anda telah mengabaikan bahagian itu, tetapi ia berfungsi sebagai tujuan.

Apakah CSS Inheritance?

Setiap elemen dalam dokumen HTML adalah sebahagian daripada pokok dan setiap elemen kecuali elemen awal mempunyai unsur induk yang melampirkannya. Apa-apa gaya yang digunakan untuk elemen induk itu boleh digunakan untuk unsur-unsur yang tertutup di dalamnya jika sifatnya adalah yang boleh diwarisi.

Sebagai contoh, kod HTML di bawah ini mempunyai tag H1 yang melampirkan teg EM:

Ini ialah Big Headline

Unsur EM adalah anak kepada elemen H1, dan gaya apa saja yang diwarisi H1 akan diteruskan ke teks EM juga. Sebagai contoh:

h1 {font-size: 2em; }

Oleh kerana harta saiz fon diwarisi, teks yang mengatakan "Big" (iaitu apa yang dilampirkan di dalam tag EM) akan menjadi saiz yang sama dengan seluruh H1. Ini kerana ia mewarisi nilai yang ditetapkan dalam sifat CSS.

Bagaimana Menggunakan Pewarisan CSS

Cara paling mudah untuk menggunakannya ialah untuk menjadi biasa dengan sifat - sifat CSS yang dan tidak diwarisi. Jika harta itu diwarisi, maka anda tahu bahawa nilai itu akan tetap sama bagi setiap elemen kanak-kanak dalam dokumen itu.

Cara terbaik untuk menggunakannya ialah untuk menetapkan gaya asas anda pada elemen peringkat yang sangat tinggi, seperti BODY. Jika anda menetapkan keluarga font anda pada harta benda, maka, terima kasih kepada warisan, seluruh dokumen akan menyimpan font yang sama keluarga. Ini sebenarnya akan membuat gaya yang lebih kecil yang lebih mudah untuk dikendalikan kerana terdapat gaya keseluruhan yang kurang. Sebagai contoh:

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

Gunakan Nilai Gaya Warisan

Setiap sifat CSS termasuk nilai "mewarisi" sebagai pilihan yang mungkin. Ini memberitahu pelayar Web, bahawa walaupun harta itu tidak biasanya diwarisi, ia sepatutnya mempunyai nilai yang sama dengan ibu bapa. Jika anda menetapkan gaya seperti margin yang tidak diwarisi, anda boleh menggunakan nilai mewarisi pada sifat berikutnya untuk memberikan margin yang sama dengan ibu bapa. Sebagai contoh:

badan {margin: 1em; } p {margin: inherit; }

Warisan Menggunakan Nilai yang Diubah

Ini penting untuk nilai yang diwariskan seperti saiz fon yang menggunakan panjang. Nilai dikira adalah nilai yang relatif kepada beberapa nilai lain pada halaman Web.

Jika anda menetapkan saiz font 1em pada elemen BODY anda, keseluruhan halaman anda tidak akan menjadi hanya 1em saiz. Ini kerana unsur-unsur seperti tajuk (H1-H6) dan unsur - unsur lain (sesetengah pelayar mengira ciri-ciri jadual berbeza) mempunyai saiz relatif dalam pelayar Web. Dalam ketiadaan maklumat saiz fon lain, penyemak imbas Web akan sentiasa membuat tajuk H1 teks terbesar pada halaman, diikuti oleh H2 dan sebagainya. Apabila anda menetapkan elemen BODY anda ke saiz fon tertentu, maka itu digunakan sebagai saiz fon "purata", dan elemen tajuk dihitung dari itu.

Nota Mengenai Pewarisan dan Hartanah Latar Belakang

Terdapat beberapa gaya yang disenaraikan tidak diwarisi dalam CSS 2 di W3C, tetapi pelayar Web masih mewarisi nilai-nilai. Sebagai contoh, jika anda menulis HTML dan CSS berikut: