Принципы наследования и каскадирования
Основными принципами применения CSS к html-документам являются наследование и каскадирование, именно поэтому таблицы стилей называются каскадными. Познакомимся с этими понятиями более подробно.
Наследование
Принцип наследования заключается в получении элементами-предками заданных свойств от элементов-потомков. Иерархию элементов можно проследить по дереву элементов html.
Рассмотрим некоторые определения.
- Элемент A вложен в элемент B. В этом случае элемент A называется потомком элемента В, а элемент В - предком элемента А.
- Элемент A вложен в элемент В и между ними нет промежуточных звеньев. В этом случае элемент А называется непосредственным потомком по отношению к В. Непосредственный потомок - частный случай элемента-потомка.
- Элементы A и B имеют один родительский элемент C и не вложены друг в друга (А в В и наоборот). В этом случае элементы А и В называются смежными по отношению друг к другу.
На рисунке выше, HTML является предком по отношению ко всем остальным элементам. Элементы HEAD и BODY являются непосредственными потомками по отношению к HTML, также они являются смежными между собой.
К чему я клоню? Некоторые свойства CSS элементы-предки могут наследовать от элементов-потомков (цвет), а некоторые нет.
Каскадирование
Принцип каскадирования заключается в следующем: При наличии нескольких правил для одного элемента, применяться будет правило с наибольшим приоритетом!
Таблицы стилей для html-документа могут задавать три субъекта:
- Непосредственно браузер;
- Интернет-пользователь;
- Разработчик.
Приоритет воздействия на отображение веб-страницы в браузере у каждого из этих субъектов разный. Рассмотрим правила, по которым будет выбран стиль оформления html-документа в конфликтной ситуации.
- Самым низким приоритетом обладает стиль оформления веб-документа, который задан браузером по умолчанию.
- Таблица стилей, заданная пользователем имеет более высокий приоритет, чем таблица стилей заданная браузером по умолчанию. Пользователь сам может задать таблицу стилей для отображения html-документа на странице в настройках браузера, если браузер позволяет это сделать.
- Таблица стилей, заданная разработчиком веб-страницы, обладает более высоким приоритетом по сравнению с таблицами, которые заданы пользователем и браузером.
- Если в одной таблице стилей заданы несколько правил для одного элемента, приоритетом будет обладать последнее заданное правило. Например, в подключенной к html-документу таблице стилей веб-разработчика написано:
p {
color:blue;
}
p {
color:green;
}
p {
color:red;
}В этом случае текст, на веб-странице будет красного цвета, так как это правило задано последним.
- Встроенная таблица стилей обладает более высоким приоритетом, чем внешняя.
- Внутренняя таблица стилей обладает более высоким приоритетом, чем встроенная и внешняя.
- Наиболее высоким приоритетом обладает правило с директивой !important. Подключается эта директива следующим образом:
p {
color:blue !important;
}Если пользователь и разработчик страницы одновременно задают правило с директивой !important, тогда наиболее высоким приоритетом будет обладать стиль, заданный пользователем!
Это общие правила для расставления приоритетов в CSS. Приоритеты одних селекторов над другими уже были рассмотрены ранее (смотри статью группировка и приоритеты селекторов).
2012 год.