CSS хусусиятларини мерос олиш

Фарз қилайлик, бизда абзац бор, унда эса i тегидаги маълум матн:

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

Келгил, абзацларни қизил рангга бояйлик:

cssp {
  color: red;
}

Натижада фақат абзац матнигина эмас, i тегидаги матн ҳам боялади:

Ҳаммаси color хусусияти мерос олинади. Демак, агар ота-она тегда маълум ранг берилган бўлса, у ҳол авлод тегларига ҳам ўтказилади. Ҳамма CSS хусусиятлари эмас, лекин кўплари (сиз билганларингиздан - ҳаммаси мерос олинади) мерос олинади.

Истаган ҳолда, аммо, авлод учун селектор бериб, ота-она хусусиятини қайта белгилаш мумкин. Масалан, келгил абзацга қизил ранг, курсивга эса кўк ранг берайлик:

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

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

Результат:

Бундай ҳолда CSS коддаги селекторлар тартиби аҳамиятга эга эмас. Агар i ва p селекторларини ўринларини алмаштирсак, ҳамма чизгина ишлайди:

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

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

Результат:

Задание 1

Кодни ўрганиб чиққандан сўнг, b тегидаги матн қандай рангга эга бўлишини айтинг:

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

cssp {
  color: blue;
}

Задание 2

Кодни ўрганиб чиққандан сўнг, b тегидаги матн қандай рангга эга бўлишини айтинг:

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

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

Задание 3

Кодни ўрганиб чиққандан сўнг, b тегидаги матн қандай рангга эга бўлишини айтинг:

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

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

Задание 4

Кодни ўрганиб чиққандан сўнг, li тегидаги матн қандай рангга эга бўлишини айтинг:

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

cssul {
  color: blue;
}

Задание 5

Кодни ўрганиб чиққандан сўнг, li тегидаги матн қандай рангга эга бўлишини айтинг:

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

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

Задание 6

Кодни ўрганиб чиққандан сўнг, 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

Кодни ўрганиб чиққандан сўнг, 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;
}