|
Читайте также: |
При хранении стилей в отдельном файле, он кэшируется и при повторном обращении к нему извлекается из кэша браузера. За счёт кэширования и того, что стили хранятся в отдельном файле, уменьшается код веб-страниц и снижается время загрузки документов.
Правило CSS - это структурная единица таблицы стилей, которая содержит описание стилей для определенного элемента. Правило состоит из селектора, который всегда располагается слева, и блока объявления стилей, который заключается в фигурные скобки и следует непосредственно за селектором (рисунок). Каждое объявление в свою очередь состоит из свойства и его значения. Именно свойство и определяет вид стиля, который будет применяться к элементу.
Правило может содержать несколько объявлений, отделенных точкой с запятой. После последнего объявления точку с запятой можно не ставить.
Для удобства чтения и редактирования таблиц стилей ее правила обычно записывают таким образом, чтобы каждое объявление располагалось на отдельной строке. Например:
| H2 { color: purple; font: bold 16pt Verdana, sans-serif; } |
Итак, мы имеем три субъекта, которые могут предоставлять таблицы стилей для оформления документов.
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. Если эту пометку убрать, то цвет текста абзацев станет синим.
18. Способы подключения CSS стилей к HTML-документу: внедренные стили (Inline), внутренние стили (в теге <style>), внешние (посредством тега <link>). Комментарии: цель, синтаксис, примеры.
Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. Далее рассмотрим их подробнее.
Дата добавления: 2015-10-26; просмотров: 89 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| Для студентов 41 и 42 группы АСОИ | | | Пример 3.5. Сочетание разных методов |