Наследование стилей css: определения «предок», «потомок». Иерархия элементов html-документа. Синтаксис значения свойства inherit. Пример.
Термин "наследование" перекочевал в CSS, очевидно, из объектно-ориентированных языков. В общем-то, это довольно понятный и на обывательском уровне термин. Каждый из нас унаследовал от своих предков некие качества. Кто-то красивые глаза от мамы и сильный характер от папы, кто-то фигуру от бабушки, а цвет волос от дедушки. Кроме этого, каждый из нас передаст какие-то качества свои детям, внукам и правнукам, в общем, своим потомкам.
Аналогично некоторые свойства CSS могут наследоваться от элементов-предков. Предком в данном случае называется элемент, стоящий в дереве документа уровнем выше, чем исходный элемент. Непосредственным предком называется элемент, стоящий ровно на один уровень выше в дереве. Аналогично определяется и непосредственный потомок - это элемент, стоящий на уровень ниже в дереве элементов.
Например, в дереве, показанном на рисунке ниже, элемент LI является потомком элементов OL и BODY, но непосредственным потомком только элемента OL. Элемент OL в этом случае называется непосредственным предком элемента LI. У элемента Р два непосредственных потомка: ЕМ и STRONG.
Для каждого свойства CSS указывается, является оно наследуемым или нет. Например, к наследуемым свойствам относится цвет, задаваемый ключевым словом color. Рассмотрим пример, когда внутри элемента P располагается выделение ЕМ.
<Р>Создаем <ЕМ>выделение</ЕМ> внутри абзаца</Р>
Пусть для элемента Р задан стиль:
P { color: blue } |
Тогда элемент унаследует цвет от своего предка, и текст внутри элемента ЕМ также будет синим, как и во всем абзаце. Воспользовавшись свойством наследования, можно задать общие для всего документа параметры оформления, указав их в самом старшем элементе документа, которыми могут быть или HTML или BODY.
BODY { color: brown; font-size: 12pt } |
Тем самым мы задали коричневый цвет для всего текста на странице и размер шрифта, равный 12 пунктам. Эти значения могут быть переопределены по более специфичными правилам, например на основе классов или идентификаторов.
Надо заметить, что это правило с селектором BODY будет работать, даже если в коде страницы элемент BODY явно не указан, что вполне допустимо. В этом случае синтаксический анализатор сам его сгенерирует и все равно включит этот элемент в дерево документа.
Кроме этого, для каждого свойства может быть задано значение inherit, которое означает, что это свойство должно наследоваться.
Р { color: inherit;} |
В результате цвет текста абзаца будет наследоваться от предка. Это общие принципы наследования, поэтому при написании CSS-правил следует учитывать, какие свойства являются наследуемыми, а какие нет. Свойство color, например, является наследуемым и так, поэтому предыдущее правило не имеет особого смысла.
Каскадирование стилей: разработчик таблицы стилей, пользователь таблицы стилей, таблица стилей браузера. Наивысший, средний и низкий приоритеты правил таблицы. Директива ! important. Пример.
Итак, мы имеем три субъекта, которые могут предоставлять таблицы стилей для оформления документов.
Автор-разработчик Web-страницы. Он может написать таблицы стилей и использовать их согласно правилам, т.е. помещать внутрь документа или подключать из внешнего файла.
Пользователь или посетитель Web-страницы. Он может самостоятельно создать таблицу стилей для конкретного документа, и если браузер поддерживает такую возможность, для просмотра документа пользователь может использовать собственную таблицу стилей.
Браузер. В соответствии со спецификацией, браузеры должны сначала применить к HTML-документу собственную таблицу стилей, используемую по умолчанию, и только потом применять остальные таблицы стилей.
Области действия таблиц, созданных любым из трех субъектов, могут пересекаться, например в каждой таблице может существовать правило, определяющее внешний вид текста для абзаца. В этом случае выбор приоритетного CSS-правила осуществляется в соответствии с принципами каскадирования. При наличии нескольких правил для одного и того же элемента преимущество имеет правило с наибольшим приоритетом.
По умолчанию правила в таблицах стилей, созданных разработчиками страницы, имеют больший приоритет, чем правила, созданные пользователем. И все правила разработчика и пользователя имеют больший приоритет, чем правила в таблице стилей браузера, используемой по умолчанию. Таким образом, наименее приоритетна - таблица стилей браузера, затем идет таблица стилей пользователя, и самой приоритетной является таблица стилей, созданная разработчиком.
Этот порядок можно просто изменить или же, не меняя его, указать директиву ! important для какого-то отдельного правила - тогда правило с такой директивой становится более приоритетным. Если, например, в таблице пользователя написано:
Р { color: blue !important } а в таблице разработчика написано P { color: red } |
то более приоритетным будет первое правило, т.е. цвет текста абзацев будет синим. Если же правило с директивой ! important будет существовать и в таблице пользователя, и в таблице разработчика, то приоритетнее будет таблица разработчика.
Таблицы стилей, подключаемые из внешних источников, также каскадируются, и их приоритетность определяется порядком подключения таблиц. Сначала применяется таблица стилей по умолчанию, затем ее правила переопределяются первой подключенной таблицей, потом подключается следующая, которая переопределяет правила предыдущей, и т.д. Поэтому подключайте таблицы стилей в порядке возрастания их важности, поскольку этот порядок здесь имеет значение.
Рассмотрим пример использования в документе трех внешних таблиц стилей, содержимое которых представлено в таблице
Три внешние таблицы стилей |
||
Style1.css |
Style2.css |
Style3.css |
P { color: red } |
P { color: green !important } |
P { color: blue } |
Если сначала подключить таблицу style1, а затем style3:
<LINK href ="style1.css" rel="stylesheet" type="text/css"> <LINK href ="style3.css" rel="stylesheet" type="text/css"> |
то цвет текста в абзацах будет синим, так как последней подключена третья таблица. Если же поменять их местами, то цвет будет красным.
В случае подключения всех трех таблиц по порядку:
<LINK href="stylel.css" rel="stylesheet" type="text/css"> <LINK href="style2.css" rel="stylesheet" type="text/css"> <LINK href="style3.css" rel="stylesheet" type="text/css"> |
цвет текста в абзацах будет зеленым, поскольку это свойство помечено директивой important и, следовательно, имеет больший приоритет.
То же относится и к правилам, записанным внутри одной таблицы стилей. Каждое следующее правило переопределяет предыдущее, естественно, если эти правила написаны дя одного селектора:
<STYLE> Р{ color: red } Р{ color: green ! important } P{ color: blue } </STYLE> |
В этом случае текст абзацев также будет зеленым. Третье правило для P не будет применено, так как во втором присутствует пометка ! important. Если эту пометку убрать, то цвет текста абзацев станет синим.