Pewarisan Properti CSS

Misalkan kita memiliki paragraf, dan di dalamnya ada beberapa teks dalam tag i:

html<p>
  Ini adalah beberapa <i>teks</i> dalam paragraf.
</p>

Mari kita beri warna merah pada paragraf:

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

html<p>
  Ini adalah beberapa <i>teks</i> dalam paragraf.
</p>

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

html<p>
  Ini adalah beberapa <i>teks</i> dalam paragraf.
</p>

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

Результат:

Задание 1

Dengan mempelajari kode berikut, tebaklah warna apa yang akan dimiliki teks dalam tag b:

html<p>
  Ini adalah beberapa <b>teks</b> dalam paragraf.
</p>

cssp {
  color: blue;
}

Задание 2

Dengan mempelajari kode berikut, tebaklah warna apa yang akan dimiliki teks dalam tag b:

html<p>
  Ini adalah beberapa <b>teks</b> dalam paragraf.
</p>

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

Задание 3

Dengan mempelajari kode berikut, tebaklah warna apa yang akan dimiliki teks dalam tag b:

html<p>
  Ini adalah beberapa <b>teks</b> dalam paragraf.
</p>

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

Задание 4

Dengan mempelajari kode berikut, tebaklah warna apa yang akan dimiliki teks dalam tag li:

html<ul>
  <li>teks</li>
  <li>teks</li>
  <li>teks</li>
</ul>

cssul {
  color: blue;
}

Задание 5

Dengan mempelajari kode berikut, tebaklah warna apa yang akan dimiliki teks dalam tag li:

html<ul>
  <li>teks</li>
  <li>teks</li>
  <li>teks</li>
</ul>

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

Задание 6

Dengan mempelajari kode berikut, tebaklah warna apa yang akan dimiliki teks dalam tag i:

html<ul>
  <li>teks <i>miring</i> teks</li>
  <li>teks <i>miring</i> teks</li>
  <li>teks <i>miring</i> teks</li>
</ul>

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

Задание 7

Dengan mempelajari kode berikut, tebaklah ukuran apa yang akan dimiliki teks dalam tag i:

html<ul>
  <li>teks <i>miring</i> teks</li>
  <li>teks <i>miring</i> teks</li>
  <li>teks <i>miring</i> teks</li>
</ul>

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