Setelah kita kemarin kita membahas tentang pengertian dan contoh yang ada pada inheritance CSS, di sini ada satu lagi yang harus di pahami dalam kita Membahas Efek Sebenarnya yang Berada di Inheritance, Efek inheritance sebenarnya juga dipengaruhi oleh property yang digunakan. Kebanyakan property CSS diturunkan kepada child element, tapi tidak semua. Property color, dan font-size adalah contoh property yang diturunkan (inherit), tapi property border tidak diturunkan. Oke bagaimana bisa simak terus ya teman-teman.
Membahas Efek Sebenarnya yang Berada di Inheritance, kita akan menggunakan contoh kode HTML sebelumnya, efek dari style:
body{
color: green;
font-size: 25px;
}
Akan sama hasilnya dengan style :
body{
color: green;
font-size: 25px;
}
div{
color: green;
font-size: 25px;
} p
{
color: green;
font-size: 25px;
}
Ini terjadi karena property color dan font-size diturunkan dari tag <body> ke seluruh element lain, jadi kita tidak perlu menulis style untuk seluruh element yang ada di dalam tag <body>. Tapi, jika menggunakan property border (untuk membuat garis tepi/bingkai), efek ini tidak akan diturunkan, sehingga style:
body{
border: 1px red solid;
}
Tidak akan sama hasilnya dengan:
body{
border: 1px red solid;
}
div{
border: 1px red solid;
} p
{
border: 1px red solid;
}
Ini disebabkan oleh property border yang hanya ‘melekat’ ke selector yang ditulis (tidak diturunkan). Anda bisa melihat hasilnya dari kode HTML berikut ini:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style><br>body{<br>border: 1px red solid;<br>}<br>div{<br>border: 1px red solid;<br>}<br>p {<br>border: 1px red solid;<br>}<br></style>
</head>
<body>
<h2>Belajar CSS</h2>
<p>CSS adalah dunianya web design.
Jika anda ingin mempelajari cara mendesain web,
CSS mutlak harus dikuasai.</p>
<div>
<p>CSS merupakan singkatan dari <strong>Cascading Style Sheet</strong>.
CSS digunakan untuk mengubah tampilan (style) dari halaman web.</p>
</div>
</body>
</body>
/html
Konsep tentang inheritance memang sedikit membingungkan jika anda baru pertama kali mengenal CSS. Silahkan kembali kesini setelah mempelajari CSS dengan lebih dalam.
Nilai property: inherit
Walaupun kita belum masuk ke pembahasan mengenai property, tapi saya ingin memperkenalkan anda dengan nilai: inherit. Nilai ini bisa digunakan pada hampir seluruh property CSS. Contoh penggunaannya sebagai berikut:
p {
color: inherit;
}
Kode diatas berarti: ubah warna teks untuk tag <p> menjadi sama dengan nilai parent elementnya . Dalam kebanyakan kasus, kita tidak perlu menulis ini, karena secara default sebagian besar property CSS akan diturunkan secara otomatis. Bagaimana teman-teman cukup lengkap ya kita membahas tentang inheritance, oke saya rasa cukup sampai disini ya teman-teman, Membahas Efek Sebenarnya yang Berada di Inheritance, semoga bermanfaat, terimakasih.
The post Membahas Efek Sebenarnya yang Berada di Inheritance appeared first on Kursus Website Terbaik.