Pewarisan Sifat CSS
Katakan kita ada satu perenggan, dan di dalamnya terdapat
teks dalam tag i:
<p>
This is some <i>text</i> in paragraph.
</p>
Mari kita warnakan perenggan dengan warna merah:
p {
color: red;
}
Hasilnya, bukan sahaja teks perenggan yang akan berwarna merah,
tetapi teks dalam tag i juga:
Ini kerana sifat color
diwarisi. Ini bermakna jika
tag induk mempunyai warna tertentu,
warna yang sama akan digunakan untuk elemen turunan. Bukan semua
sifat CSS diwarisi, tetapi banyak yang diwarisi (daripada yang
anda sudah tahu - semuanya diwarisi).
Walau bagaimanapun, jika dikehendaki, sifat induk boleh ditindih dengan menentukan pemilih untuk elemen turunan. Sebagai contoh, mari kita tetapkan warna merah untuk perenggan, dan warna biru untuk teks condong:
<p>
This is some <i>text</i> in paragraph.
</p>
p {
color: red;
}
i {
color: blue;
}
:
Dalam kes ini, susunan pemilih dalam kod CSS
tidak penting. Jika pemilih i dan pemilih p ditukar tempat, ia akan berfungsi
dengan cara yang sama:
<p>
This is some <i>text</i> in paragraph.
</p>
i {
color: blue;
}
p {
color: red;
}
:
Dengan mengkaji kod, nyatakan warna apakah yang akan dimiliki
oleh teks dalam tag b:
<p>
This is some <b>text</b> in paragraph.
</p>
p {
color: blue;
}
Dengan mengkaji kod, nyatakan warna apakah yang akan dimiliki
oleh teks dalam tag b:
<p>
This is some <b>text</b> in paragraph.
</p>
p {
color: blue;
}
b {
color: red;
}
Dengan mengkaji kod, nyatakan warna apakah yang akan dimiliki
oleh teks dalam tag b:
<p>
This is some <b>text</b> in paragraph.
</p>
b {
color: red;
}
p {
color: blue;
}
Dengan mengkaji kod, nyatakan warna apakah yang akan dimiliki
oleh teks dalam tag li:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
ul {
color: blue;
}
Dengan mengkaji kod, nyatakan warna apakah yang akan dimiliki
oleh teks dalam tag li:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
ul {
color: blue;
}
li {
color: red;
}
Dengan mengkaji kod, nyatakan warna apakah yang akan dimiliki
oleh teks dalam tag i:
<ul>
<li>text <i>italic</i> text</li>
<li>text <i>italic</i> text</li>
<li>text <i>italic</i> text</li>
</ul>
ul {
color: blue;
}
li {
color: red;
}
i {
color: green;
}
Dengan mengkaji kod, nyatakan saiz apakah yang akan dimiliki
oleh teks dalam tag i:
<ul>
<li>text <i>italic</i> text</li>
<li>text <i>italic</i> text</li>
<li>text <i>italic</i> text</li>
</ul>
i {
font-size: 30px;
}
ul {
font-size: 20px;
}
li {
color: red;
font-weight: bold;
}
