Bagaimana Warisan CSS Bekerja di Dokumen Web

Bagian penting dari styling situs web dengan CSS adalah memahami konsep pewarisan.

Warisan CSS secara otomatis ditentukan oleh gaya properti yang digunakan. Saat Anda melihat latar belakang warna properti gaya, Anda akan melihat bagian berjudul "Warisan". Jika Anda seperti sebagian besar perancang web, Anda telah mengabaikan bagian itu, tetapi itu tidak memenuhi suatu tujuan.

Apa itu Warisan CSS?

Setiap elemen dalam dokumen HTML adalah bagian dari pohon dan setiap elemen kecuali elemen awal memiliki elemen induk yang membungkusnya. Gaya apa pun yang diterapkan pada elemen induk itu dapat diterapkan ke elemen-elemen yang ada di dalamnya jika properti adalah properti yang dapat diwariskan.

Misalnya, kode HTML di bawah ini memiliki tag H1 yang melampirkan tag EM:

Ini adalah Besar Judul

Elemen EM adalah anak dari elemen H1, dan setiap gaya pada H1 yang diwarisi akan diteruskan ke teks EM juga. Sebagai contoh:

h1 {font-size: 2em; }

Karena properti font-size diwariskan, teks yang mengatakan "Big" (yang adalah apa yang terlampir di dalam tag EM) akan menjadi ukuran yang sama dengan sisa H1. Ini karena mewarisi nilai yang ditetapkan dalam properti CSS.

Cara Menggunakan Warisan CSS

Cara termudah untuk menggunakannya adalah menjadi terbiasa dengan properti CSS yang dan tidak diwarisi. Jika properti diwarisi, maka Anda tahu bahwa nilainya akan tetap sama untuk setiap elemen turunan dalam dokumen.

Cara terbaik untuk menggunakan ini adalah dengan mengatur gaya dasar Anda pada elemen tingkat sangat tinggi, seperti BODY. Jika Anda mengatur font-family pada properti body, maka, berkat warisan, seluruh dokumen akan menyimpan font-family yang sama. Ini benar-benar akan membuat stylesheet yang lebih kecil yang lebih mudah dikelola karena ada lebih sedikit gaya keseluruhan. Sebagai contoh:

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

Gunakan Nilai Gaya Warisan

Setiap properti CSS menyertakan nilai "mewarisi" sebagai opsi yang memungkinkan. Ini memberitahu browser Web, bahwa bahkan jika properti biasanya tidak akan diwariskan, itu harus memiliki nilai yang sama dengan induknya. Jika Anda mengatur gaya seperti margin yang tidak diwarisi, Anda dapat menggunakan nilai warisan pada properti berikutnya untuk memberi mereka margin yang sama dengan induknya. Sebagai contoh:

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

Warisan Menggunakan Nilai-Nilai yang Dihitung

Ini penting untuk nilai yang diwariskan seperti ukuran font yang menggunakan panjang. Nilai yang dihitung adalah nilai yang relatif terhadap beberapa nilai lain di halaman Web.

Jika Anda menetapkan ukuran font 1em pada elemen BODY Anda, seluruh halaman Anda tidak akan semuanya hanya berukuran 1 em. Ini karena elemen seperti heading (H1-H6) dan elemen lainnya (beberapa browser menghitung properti tabel secara berbeda) memiliki ukuran relatif di browser Web. Dengan tidak adanya informasi ukuran font lainnya, browser Web akan selalu membuat judul H1 teks terbesar pada halaman, diikuti oleh H2 dan seterusnya. Ketika Anda mengatur elemen BODY Anda ke ukuran font tertentu, maka itu digunakan sebagai ukuran huruf "rata-rata", dan elemen utama dihitung dari itu.

Catatan tentang Warisan dan Sifat Latar Belakang

Ada sejumlah gaya yang terdaftar tidak diwariskan dalam CSS 2 di W3C, tetapi browser Web masih mewarisi nilai-nilai. Misalnya, jika Anda menulis HTML dan CSS berikut: