Inheritance adalah penurunan efek CSS dari sebuah tag HTML kepada tag HTML lainnya.Syarat untuk mendapatkan efek inheritance adalah dengan menulis tag tersebut di dalam tag lainnya.
Penulisn kode HTML memang pada umumnya meletakkan tag-tag di dalam tag lainnya.Contoh yang paling mudah adalah semua tag HTML pasti ada di antara tag <html dan </html>.Untuk lebih mengerti lihatlah contoh di bawah ini :
<div><p> Ayo Mengenali Konsep <em>Inheritance</em> pada CSS </p></div>
Dari contoh di atas ,penjelasannya adalah sebagai berikut :
- Tag <div> merupakan tag induk/parent dari semua tag yang ada di dalamnya (<p> dan <em> karena <p> dan <em> berada di dalam tag <div>
- Bedanya hanya,pada tag <p> ,ia disebut sebagai anak/child dari tag <div>
- Sedangkan tag <em> merupakan anak/child dari tag <p>.Dengan kata lain kita bisa menyebut tag <em> sebagai cucu/grandchild dari tag<div>
Nah,sekarang jika kita menuliskan kode CSS seperti di bawah ini :
div {color: red;}
Maka,akan membuat seluruh teks yang ada di dalam tag div menjadi berwarna merah.Inilah yang disebutkan dengan inheritance (diturunkan ke anak cucu ^ ^) dari tag div yang merupakan tag induk/parent dari semua tag.
Namun ini bukan berarti seluruh property CSS akan diturunkan dari tag induknya sebab ada beberapa pengecualian,seperti property border yang hanya berlaku untuk satu tag induk saja dan tidak akan diturunkan kepada tag anak ataupun cucu.
MENGENAL NILAI PROPERTY : INHERIT
Nila (value) property inherit digunakan untuk membuat agar penurunan CSS dilakukan.Dengan begitu ,jika sebuah kode CSS dilengkapi dengan nilai property inherit,maka property tersebut akan mengkopi nilai yang diatur dari tag induk (parent)
Berikut contohnya agar lebih mudah mengerti :
<!DOCTYPE HTML>
<html>
<head>
<title>INHERIT</title>
<style type="text/css">
div.border1 { border:10px ridge blue;
color:blue;
}
div.border2 { border: 20px ridge blue}
p.border {border:inherit;}
</style>
</head>
<body>
<div class="border1">
<p class="border1"> Paragraf tanpa menggunakan <strong class="border1">inherit</strong></p>
</div>
<br>
<div class="border2">
<p class="border">Paragraf menggunakan <strong class="border=2">inherit</strong></p>
</div>
</body>
</html>
Pada contoh HTML dan CSS di atas,terdapat dua nama class yang berbeda yaitu class border1 dan border2.
Pada class="border1" kita menulis kode CSS untuk membuat border dan color pada tag div.border1.Dengan mengingat prinsip inheritance dalam CSS,maka seluruh teks pada tag <div> yang memiliki class="border1" akan berwarna biru,namun tidak untuk efek border yang tidak diturunkan kepada tag <p>.
Akan tetapi pada class="border2" kita tambahkan nilai inherit untuk property border pada tag <p> (p.border {border: inherit;}.Hasil dari nilai inherit ini akan membuat tag <p> juga memiliki border yang sama ukuran dan warnanya dengan tag induknya / tag <div>
Sifat inheritance pada kode CSS akan memudahkan kita dalam membuat desain web karena jika kita ingin mempengaruhi tag-tag lain agar memiliki tampilan yang sama,cukup dengan membuat style untuk tag induk,maka seluruh tag yang berada di dalamnya akan menyesuaikan diri.
Comments
Post a Comment