Наследаванне 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;
}