28. Наследование и каскадирование

В лекции рассматриваются две фундаментальные концепции CSS - Наследование и каскадирование.

Введение

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

Две концепции тесно связаны, но тем не менее различны. Наследование связано с тем, как элемент в разметке HTML наследует свойства своих элементов предков (в которых он содержится) и передает их своим потомкам, в то время как каскадирование имеет дело с объявлениями CSS, которые применяются к документу, и как конфликтующие правила переопределяют друг друга.

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

Лекция имеет следующее содержание:

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

  • Почему наследование полезно

  • Как работает наследование

  • Пример наследования

  • Принудительное наследование

• Каскадирование

  • Важность

  • Специфичность

  • Порядок исходного кода

• Заключение

• Контрольные вопросы

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

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

Не все свойства CSS наследуются, так как для некоторых из них это не имеет смысла. Например, поля не наследуются, так как маловероятно, что элементу потомку могут понадобиться такие же поля, как и его предку. В большинстве случаев здравый смысл подскажет, какие свойства наследуются, а какие нет, но для абсолютной уверенности необходимо проверить свойство в итоговой таблице свойств в спецификации CSS 2.1 (http://www.w3.org/TR/CSS21/propidx.html).

Почему наследование полезно

Зачем в CSS существует механизм наследования? Проще всего ответить на это, вероятно, рассматривая, что было бы, если бы такой вещи, как наследование, не было. Вам пришлось бы определять такие вещи как семейство шрифтов, размер шрифта и цвет текста индивидуально — для каждого отдельного типа элемента.

Используя наследование можно, например, определить свойства шрифта для элементов html или body, и они будут унаследованы всеми другими элементами. Можно определить цвета фона и переднего плана для определенного контейнерного элемента, и цвет переднего плана будет автоматически унаследован элементами потомками в этом контейнере. Фоновый цвет не наследуется, но начальное значение для background-color будет transparent, что означает, что фон предка будет просвечивать. Эффект будет аналогичен тому, который был бы получен при наследовании фонового цвета, но посмотрите, что произойдет, если бы наследовались фоновые изображения! Каждый потомок имел бы такое же фоновое изображение, как и его предок, и результат выглядел бы как некоторая головоломка, собранная человеком с больной головой, так как фон "начинался" бы для каждого элемента.