Moștenirea proprietăților CSS

Să presupunem că avem un paragraf, iar în el un text în tag-ul i:

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

Haideți să colorăm paragrafele în roșu:

cssp {
  color: red;
}

Ca rezultat, se va colora nu doar textul paragrafului, ci și textul tag-ului i:

Totul se datorează faptului că proprietatea color se moștenește. Aceasta înseamnă că dacă tag-ului părinte i se atribuie o anumită culoare, atunci această culoare va fi și la descendenți. Nu toate proprietățile CSS se moștenesc, dar multe dintre ele (dintre cele pe care le știți deja - toate se moștenesc).

Dacă se dorește, totuși, se poate suprascrie proprietatea părintelui, setând un selector pentru descendent. De exemplu, haideți să setăm paragrafului culoarea roșie, iar italicului - albastru deschis:

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

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

Результат:

Ordinea selectorilor în codul CSS în acest caz nu are importanță. Dacă schimbăm locurile selectorului i și selectorului p, totul va funcționa la fel:

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

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

Результат:

Задание 1

Studiind codul, spuneți ce culoare va avea textul în tag-ul b:

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

cssp {
  color: blue;
}

Задание 2

Studiind codul, spuneți ce culoare va avea textul în tag-ul b:

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

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

Задание 3

Studiind codul, spuneți ce culoare va avea textul în tag-ul b:

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

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

Задание 4

Studiind codul, spuneți ce culoare va avea textul în tag-ul li:

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

cssul {
  color: blue;
}

Задание 5

Studiind codul, spuneți ce culoare va avea textul în tag-ul li:

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

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

Задание 6

Studiind codul, spuneți ce culoare va avea textul în tag-ul 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

Studiind codul, spuneți ce dimensiune va avea textul în tag-ul 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;
}