# Наследование CSS свойств

Пусть у нас есть абзац, а в нем какой-то текст в теге `i`:

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

Давайте покрасим абзацы в красный цвет:

`p { color: red; }`

В результате покрасится не только текст абзаца, но и текст тега `i`:

Все дело в том, что свойство `color` наследуется. Это значит, что если у родительского тега задан какой-то цвет, то такой цвет будет и потомков. Наследуются не все CSS свойства, но многие (из тех, что вы уже знаете - все наследуются).

При желании, однако, можно переопределить свойство родителя, задав селектор потомка. Например, давайте абзацу зададим красный цвет, а курсиву - голубой:

`<p> This is some <i>text</i> in paragraph. </p>` `p { color: red; } i { color: blue; }`

:

Порядок селекторов в CSS коде в таком случае не имеет значения. Если переставить местами селектор i и селектор p, все будет работать так же:

`<p> This is some <i>text</i> in paragraph. </p>` `i { color: blue; } p { color: red; }`

:

Изучив код, скажите какой цвет будет иметь текст в теге `b`:

`<p> This is some <i>text</i> in paragraph. </p>` `p { color: blue; }`

Изучив код, скажите какой цвет будет иметь текст в теге `b`:

`<p> This is some <i>text</i> in paragraph. </p>` `p { color: blue; } b { color: red; }`

Изучив код, скажите какой цвет будет иметь текст в теге `b`:

`<p> This is some <i>text</i> in paragraph. </p>` `b { color: red; } p { color: blue; }`

Изучив код, скажите какой цвет будет иметь текст в теге `li`:

`<ul> <li>text</li> <li>text</li> <li>text</li> </ul>` `ul { color: blue; }`

Изучив код, скажите какой цвет будет иметь текст в теге `li`:

`<ul> <li>text</li> <li>text</li> <li>text</li> </ul>` `ul { color: blue; } li { color: red; }`

Изучив код, скажите какой цвет будет иметь текст в теге `i`:

`<ul> <li>text <i>italic</i> text</li> <li>text <i>italic</i> text</li> <li>text <i>italic</i> text</li> </ul>` `ul { color: blue; } li { color: red; } i { color: green; }`

Изучив код, скажите какой размер будет иметь текст в теге `i`:

`<ul> <li>text <i>italic</i> text</li> <li>text <i>italic</i> text</li> <li>text <i>italic</i> text</li> </ul>` `i { font-size: 30px; } ul { font-size: 20px; } li { color: red; font-weight: bold; }`
← →
↑