Pewarisan Sifat CSS

Katakan kita ada satu perenggan, dan di dalamnya terdapat teks dalam tag i:

html<p>
  This is some <i>text</i> in paragraph.
</p>

Mari kita warnakan perenggan dengan warna merah:

cssp {
  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:

html<p>
  This is some <i>text</i> in paragraph.
</p>

cssp {
  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:

html<p>
  This is some <i>text</i> in paragraph.
</p>

cssi {
  color: blue;
}
p {
  color: red;
}

Результат:

Задание 1

Dengan mengkaji kod, nyatakan warna apakah yang akan dimiliki oleh teks dalam tag b:

html<p>
  This is some <b>text</b> in paragraph.
</p>

cssp {
  color: blue;
}

Задание 2

Dengan mengkaji kod, nyatakan warna apakah yang akan dimiliki oleh teks dalam tag b:

html<p>
  This is some <b>text</b> in paragraph.
</p>

cssp {
  color: blue;
}
b {
  color: red;
}

Задание 3

Dengan mengkaji kod, nyatakan warna apakah yang akan dimiliki oleh teks dalam tag b:

html<p>
  This is some <b>text</b> in paragraph.
</p>

cssb {
  color: red;
}
p {
  color: blue;
}

Задание 4

Dengan mengkaji kod, nyatakan warna apakah yang akan dimiliki oleh teks dalam tag li:

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

cssul {
  color: blue;
}

Задание 5

Dengan mengkaji kod, nyatakan warna apakah yang akan dimiliki oleh teks dalam tag li:

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

cssul {
  color: blue;
}
li {
  color: red;
}

Задание 6

Dengan mengkaji kod, nyatakan warna apakah yang akan dimiliki oleh teks dalam tag i:

html<ul>
  <li>text <i>italic</i> text</li>
  <li>text <i>italic</i> text</li>
  <li>text <i>italic</i> text</li>
</ul>

cssul {
  color: blue;
}
li {
  color: red;
}
i {
  color: green;
}

Задание 7

Dengan mengkaji kod, nyatakan saiz apakah yang akan dimiliki oleh teks dalam tag i:

html<ul>
  <li>text <i>italic</i> text</li>
  <li>text <i>italic</i> text</li>
  <li>text <i>italic</i> text</li>
</ul>

cssi {
  font-size: 30px;
}
ul {
  font-size: 20px;
}
li {
  color: red;
  font-weight: bold;
}