Belajar CSS : Mengenal Sifat Penurunan Dalam CSS (Inheritance) (7) - Suka Code
Inheritance dalam CSS adalah sifat penurunan efek CSS dari sebuah tag HTML kepada tag HTML lainnya. Syarat untuk Inheritance adalah : tag tersebut harus berada didalam tag lainnya. Didalam HTML, setiap tag umumnya akan berada didalam tag lain. Untuk seluruh tag HTML, akan berada didalam tag <html>, dan untuk seluruh tag yang tampil diweb browser akan berada didalam tag <body>. Sebagai contoh, perhatikan potongan HTML berikut ini :
<div><p>Saya sedang belajar <em>inheritance</em>CSS</p></div>Dari contoh diatas, tag <p> berada didalam tag <div> sehingga dapat di katakan tag <div> adalah induk (parent) dari tag <p>. Sedangkan tag <em> yang berada didalam tag <p> merupakan anak (child) dari tag <p> dan grandchild dari tag <div>.
Jika kita membuat kode CSS sebagai berikut
Contoh Pembuatan :
div {
color: green;
}
Maka efek dari kode CSS tersebut akan membuat seluruh text didalam tag <div> akan berwarna hijau, walaupun didalam tag <div> juga terdapat tag-tag lainnya. Dapat dikatakan bahwa efek CSS tersebut diturunkan (inherit) dari tag induk <div> kepada tag anak <p> dan <em>. Namun perlu diketahui bahwa tidak semua property CSS akan diturunkan dari induknya. Misalnya property border, hanya berlaku untuk satu tag induk saja dan tidak diturunkan kepada tag anak.
Mengenal Nilai Property : Inherit
Untuk "memaksa" proses penurunan, CSS memiliki nilai property: inherit. Jika sebuah kode CSS memiliki nilai property inherit, maka property tersebut akan mencopy nilai dari tag induk (parent)
Sebagai contoh, karena property border secara default tidak diturunkan, maka kita akan mencoba nilai inherit pada property border.
Contoh HTML yang akan kita gunakan adalah inherit.html
<!DOCTYPE html>
<html>
<head>
<title>Belajar bersama Suka Code</title>
<style type="text/css">
div.satu {
border: 1px solid black;
color: blue;
}
div.dua {
border: 1px solid black;
}
p.dua {
border: inherit;
}
</style>
</head>
<body>
<div class="satu">
<p class="satu">
Kalimat ini tidak menggunakan <em class="satu">nilai property inherit</em>CSS
</p>
</div>
<div class="dua">
<p class="dua">
Kalimat ini menggunakan <em class="dua">nilai property inherit</em>CSS
</p>
</div>
</body>
</html>
Maka hasilnya dari kode di atas akan menjadi seperti ini :
Pada class="satu", saya membuat property border dan color pada tag div.satu. Karena prinsip Inheritance dalam CSS, seluruh kalimat tag <div> yang memiliki class="satu" akan berwarna biru (sesuai dengan sifat inheritancenya), namun efek border tidak diturunkan kepada tag <p>.
Pada class="dua", saya menambahkan nilai inherit untuk property border pada tag <p>. Hasil dari nilai inherit ini akan membuat tag <p> juga memiliki border yang sama dengan yang didefinisikan pada tag induknya.
Sifat Inheritance CSS ini akan memudahkan dalam desain web, karena jika kita ingin membuat seluruh tulisan menjadi warna dan ukuran tertentu, cukup denga membuat style untuk tag induk, maka seluruh tag yang berada didalamnya akan ikut berubah.
Suka Code Blog adalah website dengan kumpulan konten seputar Game Development, Web Programming, Android Programming, Windows Programming, dan lain-lain.
Belum ada Komentar untuk "Belajar CSS : Mengenal Sifat Penurunan Dalam CSS (Inheritance) (7) - Suka Code"
Posting Komentar