Apa itu inheritance dalam CSS ?
Arti inheritance dalam CSS adalah pewarisan tampilan CSS dari sebuah tag HTML pada tag HTML lain. Syaratnya adalah tag yang ingin mendapatkan warisan harus berada dalam tag induk. Biasanya dalam HTML beberapa tag memang berada dalam tag yang lain. Misalnya tag <p> akan berada di dalam tag <body>Untuk memperudah pemahaman bisa dilihat kode di bawah ini.
<div><p>Jokowi adalah singkatan dari <em>Joko Widodo</em> dan dia adalah presiden Indonesia</p></div>
Dari contoh di atas bisa dilihat tag <p> berada dalam tag <div>. Kemudian ada tag <em> yang berada dalam tag <p>. Jika di analogi-kan, maka <div> sebagai nenek, <p> sebagai ibu dan <em> sebagai anak. Apabila dibuat sebuah kode CSS
div {
color:blue;
}
Maka semua yang berada di dalam <div> akan berwarna biru. Meskipun dalam <div> terdapat <p> dan <em>. Nilai <div> akan diturunkan pada <p> dan <em>. Inilah yang dimaksud dengan pawarisan kode CSS atau dikenal dengan nama inheritance.
Tetapi tak semua property akan diwariskan oleh induknya. Misalkan untuk border, ini hanya berlaku untuk tag induk saja. Tidak bisa diwariskan pada anaknya.
Nilai Property: inherit pada CSS
Untuk mewariskan nilai yang tak bisa diwariskan seperti border, maka bisa dipaksa untuk mewariskan. Untuk melakukan hal tersebut digunakan property inherit. Contohnya akan diwariskan value border.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Inheritance dalam CSS</title>
<style type="text/css">
div.satu {
border: 1px solid blue;
color: red;
}
div.dua {
border: 1px solid green;
}
p.dua {
border: inherit;
}
</style>
</head>
<body>
<div class="satu">
<p class="satu">
Bagian ini tanpa <em class="satu">nilai property inherit</em> CSS
</p>
</div>
<br />
<div class="dua">
<p class="dua">
Bagian ini menggunakan <em class="dua">nilai property inherit</em> CSS
</p>
</div>
</body>
</html>
Untuk melihat perbedaan lebih jelas. Coba anda hapus kode :
p.dua {
border: inherit;
}
Dari kode awal. Kemudian jalankan lagi. Anda akan melihat paragraf ke dua hanya memiliki satu border saja. Karena p 'dua' tak mendapatkan warisan border dari induknya.
Jadi apabila ingin mewariskan tampilan cukup ditulis pada induknya. Apabila tampilan tidak berubah bisa ditambahkan property dengan value inherit pada selector tersebut. Ini digunakn untuk lebih mmpersingkat penulisan kode CSS.
Share Yuk
Related Posts
Loading...
No comments:
Post a Comment