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

Описание

Описание каждого CSS-свойства говорит наследуется ли оно по умолчанию ("Наследуется: да/нет"). Наследование контролирует, что происходит, если значение свойства элемента не определено.

Наследуемые свойства

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

Типичный пример наследуемого свойства color. Стили:

css
p {
  color: green;
}

и разметка:

html
<p>В этом параграфе <em>подчёркнутый текст</em>.</p>

слова "подчёркнутый текст" станут зелёными, т.к. тег em унаследовал значение свойства color от элемента p, а не получают начальное значение свойства (цвет, который используется для корневого элемента, когда страница не определяет цвет).

Ненаследуемые свойства

Когда значения свойства элемента, которое не наследуется, не указано(иногда называемое Mozilla - сброшенное свойство), элемент получает начальное значение этого свойства (как указано в описании свойства).

Пример ненаследуемого свойства border. Стили:

css
p {
  border: medium solid;
}

и разметка:

html
<p>В этом параграфе <em>подчёркнутый текст</em>.</p>

у слов "подчёркнутый текст" не будет рамки (т.к. начальное значение border-style: none).

Замечание

Ключевое слово inherit позволяет нам явно задать наследование. Это работает и на наследуемых, и на ненаследуемых свойствах.

Смотрите также