... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Синтаксис CSS. Каскадирование (стр.1)

 

 

Правила CSS ||  Типы селекторов ||  Единицы измерения ||  Наследование ||  Каскадирование ||  CSS и браузер


Любая таблица стилей может иметь три источника возникновения. Во-первых, ее может создать автор HTML-документа; во-вторых, любой браузер содержит собственную таблицу стилей, которая задает значения по умолчанию для оформления всех элементов. Наконец, в-третьих, пользователь может сам создать таблицу стилей для представления страницы и использовать ее в том случае, если браузер предоставляет ему эту возможность.

Общие принципы

Итак, мы имеем три субъекта, которые могут предоставлять таблицы стилей для оформления документов.

  1. Автор-разработчик Web-страницы. Он может написать таблицы стилей и использовать их согласно правилам, т.е. помещать внутрь документа или подключать из внешнего файла.
  2. Пользователь или посетитель Web-страницы. Он может самостоятельно создать таблицу стилей для конкретного документа, и если браузер поддерживает такую возможность, для просмотра документа пользователь может использовать собственную таблицу стилей.
  3. Браузер. В соответствии со спецификацией, браузеры должны сначала применить к 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. Если эту пометку убрать, то цвет текста абзацев станет синим.



Страница: - 1 - | - 2 -

 

Правила CSS ||  Типы селекторов ||  Единицы измерения ||  Наследование ||  Каскадирование ||  CSS и браузер

 

Наверх страницы

 

Уроки CSS © 2007 - 2018 г. Все права защищены