Поиск

Наследование

Некоторые значения наследуются дочерними элементами в дереве документа. Каждое свойство определяет, является оно наследуемым или нет.

Предположим, что имеется элемент H1, в котором расположен элемент выделения EM:

<H1>Данный заголовок <EM>очень</EM> важен!</H1>

Если для элемента EM не задан цвет, то слово "очень" унаследует цвет родительского элемента. Таким образом, если для H1 определен синий цвет, то и элемент EM будет представлен синим цветом.

Определение свойств стиля, используемого в документе по умолчанию, разработчики могут осуществить в корневом элементе дерева данного документа. Например, в языке HTML эту возможность можно реализовать с помощью элементов HTML или BODY. Обратите внимание, что данная схема будет работать, даже если разработчик пропустил тег BODY в исходном HTML-документе, т.к. синтаксический анализатор HTML сам сгенерирует пропущенный тег.

Например, свойство 'color' является наследуемым, поэтому все потомки элемента BODY унаследуют цвет 'black':

BODY { color: black; }

Значения, заданные в процентах, не наследуются, а вычисляемые значения наследуются.

Пусть задана следующая таблица стиля:

BODY { font-size: 10pt }
H1 { font-size: 120% }

и фрагмент документа:

<BODY>
<H1>Некоторый <EM>крупный</EM> заголовок</H1>
</BODY>

Свойство 'font-size' элемента H1 будет иметь вычисленное значение '12pt' (120% от 10pt, являющегося значением свойства родительского элемента). Так как вычисляемое значение свойства 'font-size' является наследуемым, то элемент EM также будет иметь вычисленное значение '12pt'. Если агент пользователя не может отобразить шрифт размером в 12pt, то фактическим значением свойства 'font-size' для обоих элементов H1 и EM может быть, например, '11pt'.

Значение 'inherit'

Для каждого свойства может быть задано значение 'inherit', которое означает, что для данного элемента это свойство принимает такое же вычисляемое значение, как и свойство родительского элемента. Наследуемое значение, которое обычно используется для предупреждения ошибок, может быть усилено, если задать явно значение 'inherit'.

В приведенных ниже примерах свойства 'color' и 'background' заданы внутри элемента BODY. Все другие элементы наследуют значение 'color', а фон будет прозрачным. Если эти правила являются частью пользовательской таблицы стилей, то во всем документе текст будет отображаться черным цветом на белом фоне.

BODY {
color: black !important;
background: white !important;
}
* {
color: inherit !important;
background: transparent;
}