Наследование. CSS. Учебник от Маржевича

Наследованием называется перенос правил форматирования для элементов, находящихся внутри других. Такие элементы являются дочерними, и они наследуют некоторые стилевые свойства своих родителей, внутри которых располагаются.

Разберём наследование на примере таблицы. Особенностью таблиц можно считать строгую иерархическую структуру тегов. Вначале следует контейнер table внутри которого добавляются теги tr, а затем идёт тег td. Если в стилях для селектора table задать цвет текста, то он автоматически устанавливается для содержимого ячеек, как показано в примере 18.1.

Пример 18.1. Наследование параметров цвета

HTML5 CSS2.1 IE Cr Op Sa Fx

<title>Наследование</title>
<style>
table{color:red;background:#333;border:2px solid red}
</style>
<table>
<tr><td>Ячейка 1<td>Ячейка 2
<tr><td>Ячейка 3<td>Ячейка 4
</table>

В данном примере для всей таблицы установлен красный цвет текста, поэтому в ячейках он также применяется, поскольку тег td наследует свойства тега table. При этом следует понимать, что не все стилевые свойства наследуются. Так, border задаёт рамку вокруг таблицы в целом, но никак не вокруг ячеек. Аналогично не наследуется значение свойства background. Тогда почему цвет фона у ячеек в данном примере тёмный, раз он не наследуется? Дело в том, что у свойства background в качестве значения по умолчанию выступает transparent, т.е. прозрачность. Таким образом цвет фона родительского элемента "проглядывает" сквозь дочерний элемент.

Чтобы определить, наследуется значение стилевого свойства или нет, требуется заглянуть в справочник по свойствам CSS и посмотреть там. Подключать свою интуицию в подобном случае бесполезно, может и подвести.

Наследование позволяет задавать значения некоторых свойств единожды, определяя их для родителей верхнего уровня. Допустим, требуется установить цвет и шрифт для основного текста. Достаточно воспользоваться селектором body, добавить для него желаемые свойства, и цвет текста внутри абзацев и других текстовых элементов поменяется автоматически (пример 18.2).

Пример 18.2. Параметры текста для всей веб-страницы

HTML5 CSS2.1 IE Cr Op Sa Fx

<title>Наследование</title>
<style>
body{font-family:arial;color:navy}
</style>
<p>Цвет текста этого абзаца синий.

В данном примере рубленый шрифт и цвет текста абзацев устанавливается с помощью селектора body. Благодаря наследованию уже нет нужды задавать цвет для каждого элемента документа в отдельности. Однако бывают варианты, когда требуется всё-таки изменить цвет для отдельного контейнера. В этом случае придётся переопределять нужные параметры явно, как показано в примере 18.3.

Пример 18.3. Изменение свойств наследуемого элемента

HTML5 CSS2.1 IE Cr Op Sa Fx

<title>Наследование</title>
<style>
body{font-family:arial;color:navy}
P.red{color:maroon}
</style>
<p>Цвет текста этого абзаца синий.
<p class=red>А у этого абзаца цвет текста уже другой.

В данном примере цвет 1-го абзаца наследуется от селектора body, а для 2-го установлен явно через класс с именем red.