Каскадные таблицы стилей
Стиль – это правило, которое определяет внешний вид того или иного элемента в документе. Используя технологию CSS, вы можете задавать стиль для тегов, т.е. в стилевых таблицах вы определяете, как будет выглядеть web-страница на экране браузера.
Преимущества стилевых таблиц:
Таблицы стилей позволяют отделить логическую структуру страниц от визуального представления (оформления).
Созданная таблица стилей может применяться ко всем страницам сайта, благодаря чему соблюдается единство его оформления.
Если сайт оформлен с помощью единственной стилевой таблицы, случае внесения изменений в оформление тегов в стилевой таблице эти изменения вступят в силу на всех страницах сайта. Тем самым CSS позволяют гибко управлять внешним представлением страниц на экране.
Синтаксис таблиц стилей
Все объявления стилей называются правилами, каждое из которых состоит из двух частей (рис.2): селектора (Н1), определяющего тег в НТML-документе (заголовок, параграф и т.д.) и определения (color:red), устанавливающего стиль, применяемый к данному селектору (тегу).
свойство значение
H1 {color:red}
селектор определение стиля
Рис.2.Синтаксис CSS.
Определение, в свою очередь, состоит из двух частей: свойства (color) и значения (red). Они записываются в фигурных скобках и отделяются друг от друга двоеточием. Для уменьшения размеров таблиц стилей селекторы группируются через запятую, а определения – через точку с запятой. Например:
H1, H2 {color:red; font-family:Arial}
В данном примере задается одинаковое оформление для заголовков первого и второго уровня: красный цвет и шрифт Arial.
Кроме того, стилевые таблицы поддерживают свойство наследования, благодаря которому вы не должны определять стили для всех тегов, которые используете при создании HTML-страниц, достаточно определить стиль по умолчанию для всего документа в теге BODY. Однако важно помнить, что на практике наследование не всегда корректно поддерживается браузерами.
Для большей гибкости при оформлении страниц можно создать свои собственные классы и задать для них стили6.
Включение стилевых таблиц в html-документ
Существует три способа добавления CSS в HTML-документ, описанных в таблице 7.
Очевидно, что использование внешней таблицы стилей – наиболее предпочтительный вариант, поскольку вы можете подключить эту таблицу ко всем документам сайта и таким образом получите достаточно гибкий механизм управления его внешним видом. При внесении изменений в один файл (в нашем примере site.css) они вступят в силу сразу на всех страницах, использующих внешнюю стилевую таблицу, описанную в этом файле (site.css). Создать внешнюю стилевую таблицу можно с помощью простейшего текстового редактора, допустим Notepad, сохранив файл с расширением .css.
Таблица 7. Включение CSS в HTML–документ. Приоритетность стилей при перекрывании установок
Способ |
Тег и распо-ложение |
Пример |
П |
Использование нескольких стилей в одном документе |
Подключение внешней стилевой таблицы |
<LINK> помещается в заголовочную часть HTML-документа <HEAD> |
<LINK HREF=”css/site.css” REL=”stylesheet” TYPE=”text/css”>
|
<HTML> <HEAD> <TITLE>Каскадные таблицы стилей</TITLE> <LINK HREF=”css/site.css” REL=”stylesheet” TYPE=”text/css”> |
|
Использова-ние внутренней стилевой таблицы |
<STYLE> помещается в заголовочную часть HTML-документа <HEAD> |
<style type=”text/css”> H1 {color : blue} </style> |
<STYLE TYPE=”text/css”> H1 {color : blue} </STYLE > </HEAD> |
|
Указание стиля непосред-ственно внутри тега
|
|
<H1 style=”color:red; font-family:Arial ”> …</H1>
|
<BODY> <H1 style=”color:red;”>А текст будет красным</H1> </BODY> </HTML> |
риоритетность
стилейСтилевая таблица в <STYLE>…</STYLE >(второй способ) действует только внутри одного документа.
Третий способ теряет все достоинства таблиц стилей, так как записывается внутри тега и соответственно применяется только к нему.
Как показано в таблице, в случае, если к одному документу применяются сразу несколько стилевых таблиц (все три способа), то более позднее правило побеждает. Т.е. самым высоким приоритетом обладает стиль, указанный внутри тега, за ним следует тег <STYLE> и самый низкий приоритет – у <LINK>.