CSS xususiyatlarining meros olinishi

Faraz qilaylik, bizda abzas bor, uning ichida i tegi ichida qandaydir matn:

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

Keling, abzarlarni qizil rangga bo'yaylik:

cssp {
  color: red;
}

Natijada nafaqat abzas matni, balki i tegidagi matn ham bo'yaladi:

Barchasi color xususiyati meros olinadi. Bu shuni anglatadiki, agar ota-ona tegida ma'lum bir rang belgilangan bo'lsa, shu rang avlodlarda ham bo'ladi. Barcha CSS xususiyatlari emas, balki ko'plari (siz biladiganlardan - hammasi meros olinadi) meros olinadi.

Istasangiz, biroq, avlod uchun selektor belgilab, ota-ona xususiyatini qayta belgilashingiz mumkin. Masalan, abzasga qizil rangni, kursivga esa moviy rangni belgilaymiz:

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

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

Результат:

Bunday holda CSS kodidagi selektorlar tartibi muhim emas. Agar i selektori va p selektorini o'rnini almashtirsak, hammasi shunday ishlaydi xuddi shunday:

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

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

Результат:

Задание 1

Kodni o'rganib, b tegidagi matn qanday rangga ega bo'lishini ayting:

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

cssp {
  color: blue;
}

Задание 2

Kodni o'rganib, b tegidagi matn qanday rangga ega bo'lishini ayting:

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

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

Задание 3

Kodni o'rganib, b tegidagi matn qanday rangga ega bo'lishini ayting:

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

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

Задание 4

Kodni o'rganib, li tegidagi matn qanday rangga ega bo'lishini ayting:

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

cssul {
  color: blue;
}

Задание 5

Kodni o'rganib, li tegidagi matn qanday rangga ega bo'lishini ayting:

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

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

Задание 6

Kodni o'rganib, i tegidagi matn qanday rangga ega bo'lishini ayting:

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

Kodni o'rganib, i tegidagi matn qanday o'lchamga ega bo'lishini ayting:

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;
}