Pewarisan Properti CSS
Misalkan kita memiliki paragraf, dan di dalamnya ada beberapa
teks dalam tag i:
<p>
Ini adalah beberapa <i>teks</i> dalam paragraf.
</p>
Mari kita beri warna merah pada paragraf:
p {
color: red;
}
Hasilnya, tidak hanya teks paragraf yang akan berwarna merah,
tetapi juga teks dalam tag i:
Semua ini karena properti color
diwariskan. Artinya, jika
tag induk memiliki warna tertentu,
maka warna tersebut akan berlaku juga untuk tag turunannya. Tidak semua
properti CSS diwariskan, tetapi banyak yang diwariskan (dari yang
pernah Anda pelajari - semuanya diwariskan).
Namun, jika diinginkan, kita dapat mengubah properti dari induk dengan memberikan selector untuk turunannya. Contohnya, mari kita beri warna merah untuk paragraf dan warna biru untuk teks miring:
<p>
Ini adalah beberapa <i>teks</i> dalam paragraf.
</p>
p {
color: red;
}
i {
color: blue;
}
:
Urutan selector dalam kode CSS dalam kasus seperti ini
tidak menjadi masalah. Jika kita menukar posisi
selector i dan selector p, semuanya akan bekerja
dengan cara yang sama:
<p>
Ini adalah beberapa <i>teks</i> dalam paragraf.
</p>
i {
color: blue;
}
p {
color: red;
}
:
Dengan mempelajari kode berikut, tebaklah warna apa yang akan dimiliki
teks dalam tag b:
<p>
Ini adalah beberapa <b>teks</b> dalam paragraf.
</p>
p {
color: blue;
}
Dengan mempelajari kode berikut, tebaklah warna apa yang akan dimiliki
teks dalam tag b:
<p>
Ini adalah beberapa <b>teks</b> dalam paragraf.
</p>
p {
color: blue;
}
b {
color: red;
}
Dengan mempelajari kode berikut, tebaklah warna apa yang akan dimiliki
teks dalam tag b:
<p>
Ini adalah beberapa <b>teks</b> dalam paragraf.
</p>
b {
color: red;
}
p {
color: blue;
}
Dengan mempelajari kode berikut, tebaklah warna apa yang akan dimiliki
teks dalam tag li:
<ul>
<li>teks</li>
<li>teks</li>
<li>teks</li>
</ul>
ul {
color: blue;
}
Dengan mempelajari kode berikut, tebaklah warna apa yang akan dimiliki
teks dalam tag li:
<ul>
<li>teks</li>
<li>teks</li>
<li>teks</li>
</ul>
ul {
color: blue;
}
li {
color: red;
}
Dengan mempelajari kode berikut, tebaklah warna apa yang akan dimiliki
teks dalam tag i:
<ul>
<li>teks <i>miring</i> teks</li>
<li>teks <i>miring</i> teks</li>
<li>teks <i>miring</i> teks</li>
</ul>
ul {
color: blue;
}
li {
color: red;
}
i {
color: green;
}
Dengan mempelajari kode berikut, tebaklah ukuran apa yang akan dimiliki
teks dalam tag i:
<ul>
<li>teks <i>miring</i> teks</li>
<li>teks <i>miring</i> teks</li>
<li>teks <i>miring</i> teks</li>
</ul>
i {
font-size: 30px;
}
ul {
font-size: 20px;
}
li {
color: red;
font-weight: bold;
}
