Dědičnost CSS vlastností

Předpokládejme, že máme odstavec a v něm nějaký text v tagu i:

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

Nastavme odstavcům červenou barvu:

cssp {
  color: red;
}

V důsledku toho se zbarví nejen text odstavce, ale i text tagu i:

Celá věc je v tom, že vlastnost color se dědí. To znamená, že pokud je u rodičovského tagu nastavena nějaká barva, tato barva bude i u potomků. Nedědí se všechny CSS vlastnosti, ale mnohé ano (z těch, které již znáte - všechny se dědí).

V případě potřeby však lze vlastnost rodiče přepsat nastavením selektoru potomka. Například nastavme odstavci červenou barvu a kurzívě modrou:

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

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

Результат:

Pořadí selektorů v CSS kódu v tomto případě není důležité. Pokud prohodíme místa selektoru i a selektoru p, vše bude fungovat stejně:

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

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

Результат:

Задание 1

Po prostudování kodu řekněte, jakou barvu bude mít text v tagu b:

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

cssp {
  color: blue;
}

Задание 2

Po prostudování kodu řekněte, jakou barvu bude mít text v tagu b:

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

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

Задание 3

Po prostudování kodu řekněte, jakou barvu bude mít text v tagu b:

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

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

Задание 4

Po prostudování kodu řekněte, jakou barvu bude mít text v tagu li:

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

cssul {
  color: blue;
}

Задание 5

Po prostudování kodu řekněte, jakou barvu bude mít text v tagu li:

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

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

Задание 6

Po prostudování kodu řekněte, jakou barvu bude mít text v tagu 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

Po prostudování kodu řekněte, jakou velikost bude mít text v tagu 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;
}