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

Наследование, это процесс при котором свойства родительского элемента передаются к дочерним элементам, даже если эти свойства не были чётко определены. Некоторые свойства наследуются автоматически, элемент получает свойства своего предка.

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

Наследование является механизмом отделённым от каскада: наследование относится к дереву DOM (Document Object Model), в то время как каскад относится к правилам CSS (Cascade Style Sheet). Однако CSS свойства, определённые для элемента через каскад могут быть унаследованы дочерними элементами.

Например, если элементу div задан font-size равный 20px, полагая, что никакие другие значения font-size не были определены, то все дочерние элементы так же унаследуют этот размер шрифта.

Почему это хорошо? Давайте рассмотрим следующий фрагмент кода:

div {
  font-size: 20px;
}

<div>
  <p>
    This <em>sentence</em> will have a 20px
    <a href="#">font-size</a>.
  </p>
</div>

Если бы наследование не работало, то в приведённом выше коде пришлось бы задавать значения font-size для всех элементов, что бы убедиться, что всё предложение будет отображено c размером шрифта 20px:

p {
  font-size: 20px;
}
em {
  font-size: 20px;
}
a {
  font-size: 20px;
}

С использованием наследования, мы просто должны установить свойство font-size у родительского элемента и все дочерние элементы наследуют его автоматически. Именно по этому вам нужно лишь установить font-size для элемента body что бы получить целую страницу с указанным размером шрифта, конечно если он не был переопределён в другом месте.

Ошибки наследования в режиме совместимости (Quirk Mode)

Заметьте, что современные браузеры, работающие в режиме совместимости ведут себя немного глючно, в том что они не наследуют некоторые свойства в таблицах. В режиме совместимости эмулируются баги более ранних версий браузеров. Как правило эти свойства определены для конкретной таблицы элементов, хотя лучшим вариантом было бы избегание этого вопроса в целом с помощью определения DOCTYPE, который указывает браузеру на использование стандартного режима отображения. Больше о DOCTYPE можно узнать из статьи Стандартный режим, режим совместимости и режимы DOCTYPE.

Наследование font-size

В приведённом выше примере мы использовали размер шрифта равный 20px установленный для родительского элемента div. Это значение было унаследовано дочерними элементами, но что будет если мы укажем свойство font-size в процентах:

div {
  font-size: 130%;
}

На первый взгляд кажется, что элемент p внутри внутри элемента div унаследует font-size:130% и будет на 130% больше чем его родительский элемент. Вам не нужно беспокоится об этом, элемент p унаследует фактический размер шрифта, а не 130% коэффициент размера шрифта родительского элемента, и по этому будет такого же размера как и родительский элемент. Это не то же самое как если бы мы указали:

div, p, a {
  font-size: 130%;
}

В приведённом выше коде, элемент p будет на 130% больше, чем его родительский элемент div, вложенный элемент a будет на 130% больше чем его родительский элемент p. Будьте осторожны когда указывает размер шрифта в процентах или em для вложенных элементов или вы столкнётесь с прецедентами такого рода.

Как мы уже упоминали прежде (прежде чем отвлечься), только не которые свойства наследуются от родительских элементов автоматически. Причина этого вполне очевидна, если подумать об этом. Например, если у элемента установлен border и все элементы потомки будут наследовать border, то результат будет ужасным.

Цвет наследуется по умолчанию, но фон никогда. И снова причина очевидна: в большинстве случае вы хотите что бы цвет передавался по наследству. Например когда элемент родительский элемент имеет фоновое изображение вы не хотите что бы его дочерние наследовали фоновое изображение. Так как их фоновые изображения, скорее всего, будут конфликтовать с фоновым изображением своих родительских элементов.

Многие думают, что свойство background-color наследуется, но фактически это не так. Значение background-color по умолчанию transparent. Обычно, это удовлетворяет большинство требований, потому что цвет родительского фона виден через прозрачный фон дочерних элементов.

С другой стороны, вы передавать свойства фона по наследству. Для этого вы можете использовать значение inherit для свойств фона.

Другие статьи по этой теме:

1. CSS: Значение свойства: inherit
   

Похожие по тематике посты: