Чтобы таблица стилей могла воздействовать на внешнее представление документа, браузер должен знать о ее существовании. Для этого ее необходимо связать с HTML-документом.
Существует четыре способа связывания документа и таблицы стилей:
1. Связывание — позволяет использовать одну таблицу стилей для форматирования многих страниц HTML.
2. Внедрение — позволяет задавать все правила таблицы стилей непосредственно в самом документе.
3. Импортирование — позволяет встраивать в документ таблицу стилей, расположенную на сервере.
4. Встраивание в тэги документа — позволяет изменять форматирование конкретных элементов страницы.
Связывание позволяет хранить таблицу стилей в отдельном файле и присоединять ее к документам с помощью тэга <LINK>, задаваемого в разделе
Связываемый файл содержит набор правил каскадных таблицей стилей, определяющих форматирование документа, и должен иметь расширение CSS.
Связывание позволяет разработчику применить одинаковый набор правил форматирования к группе HTML-документов, что приводит к единообразному отображению различных документов и придает некоторую системность серверу разработчика.
При внедрении таблицы стилей в документ правила, ее составляющие, задаются в стилевом блоке, ограниченном тэгами <STYLE TYPE="text/css"> и </STYLE>, который должен размешаться в разделе <HEAD> документа:
<HEAD>
<STYLE TYPE="text/css">
<! —
В { text-transform: uppercase; }
P { background-color: lightgrey;
text-align:center; }
—>
</STYLE>
</HEAD>
Обычно браузеры, не поддерживающие какие-либо тэги, игнорируют их, интерпретируя, однако, их содержимое в том виде, в каком оно задано, что может приводить к ошибкам. Поэтому, как обычно, следует задавать содержимое тэгов, которые потенциально не обрабатываются старыми версиями браузеров, заключенным в тэг комментария <! — . . . — >.
В приведенном выше примере встроенная таблица стилей определяет отображение всех абзацев в документе (элемент Р) на сером фоне с центрированными строками. Полужирный текст, определяемый любым элементом в (тэг <в>) документа, будет отображаться прописными буквами, даже если в документе он задан строчными.
В тэге <STYLE> можно импортировать внешнюю таблицу стилей с помощью свойства @import таблицы стилей:
@import: url(mystyles.ess);
Его следует задавать в начале стилевого блока или связываемой таблицы стилей перед заданием остальных правил. Значением свойства @import является URL-адрес файла таблицы стилей.
Последний способ задания значений свойств таблицы стилей предназначен для оперативного форматирования определенного элемента документа и называется внедрение. Каждый тэг HTML имеет параметр STYLE, в котором можно задать значения его свойств в соответствии с синтаксисом каскадных таблиц стилей. Например, в следующем примере задается форматирование заголовка первого уровня, определяющее его отображение шрифтом красного цвета:
<Н1 STYLE="color: red">Заголовок отображается шрифтом красного цвета</Н1>
Если связанные, внедренные и импортируемые таблицы стилей влияют на форматирование всех элементов документа, для которых определены в таблицах правила, то встраивание определений стилей в конкретный тэг влияет на отображение только элемента, определяемого данным тэгом.
Рекомендуется избегать встраивания в тэги документа определений форматирования, так как подобная техника лишает разработчика преимуществ задания таблиц стилей в отдельном файле или в головной части документа, где их можно легко и быстро откорректировать, в случае необходимости. При форматировании отдельных тэгов придется просмотреть весь документ целиком, что требует достаточно большой и кропотливой работы.
Все способы встраивания таблиц стилей свободно сочетаются в одном документе. Например, можно разработать главную таблицу стилей для всех документов и связывать ее с каждым HTML-документом. Импортируемая или внедряемая таблица стилей будет уточнять форматирование элементов конкретного документа, а встраиваемые в тэг определения форматирования будут уточнять их отображение.
Правила каскадных таблиц стилей состоят из селектора и определения. Для уменьшения размеров таблиц стилей можно группировать разные селекторы в виде списка элементов страницы HTML, разделенных запятыми, если для них задается одно правило. Например, следующие правила
HI (font-family: Arial)
Н2 {font-family: Arial}
НЗ {font-family: Arial}
можно сгруппировать и задать в виде одного правила со списком селекторов
HI, H2, НЗ {font-family: Arial}
Аналогично группируются определения, только в списке они разделяются точками с запятой (;). Следующие правила форматирования заголовка первого уровня
HI {font-weight: bold}
HI {font-size: 14pt}
HI (font-family: Arial}
можно задать в виде одного правила, сгруппировав определения:
HI {font-weight: bold;
font-size: 14pt;
font-family: Arial;
Некоторые свойства имеют собственный синтаксис группирования, связанный с заданием значений нескольких свойств в одном. Например, предыдущий пример при использовании свойства font запишется так:
Hi (font: bold 14pt Arial}
При задании таблицы стилей можно свободно комбинировать все три правила группирования для уменьшения ее размеров.
В HTML некоторые элементы могут содержать другие. Как будет отображаться элемент, расположенный внутри другого элемента страницы, если для последнего задано правило форматирования, а для вложенного элемента нет? Например, пусть цвет шрифта абзаца определен как синий (Р (color:blue}). Как будет отображаться выделенный элемент текста, задаваемый тэгом <ЕМ>, если для него не определено правило форматирования? В подобных случаях вложенный элемент наследует правила форматирования элемента-родителя. В нашем примере выделенный элемент будет также отображаться синим цветом. Другие свойства ведут себя аналогично свойству color, напримерfont-family, font-size.
Некоторые свойства не наследуются вложенными элементами от своих родителей, например свойство background, но по умолчанию вложенные элементы будут отображаться с фоном родительского элемента.
Наследование полезно при задании значений свойств, применяемых к документу по умолчанию. Для этого достаточно задать все свойства для элемента, порождающего все остальные элементы страницы HTML. Таким элементом является тело документа, определяемое тэгом <BODY> :
BODY {
color: black;
font-family: "Times New Roman";
background: url(texture.gif) white;
}
Приведенные правила задают форматирование документа по умолчанию:
черным шрифтом гарнитуры Times New Roman с фоном, задаваемым графическим файлом texture.gif, или на белом фоне, если файл не доступен.
Приведенное задание правил форматирования по умолчанию будет работать всегда, даже если разработчик пропустит в документе тэг <BODY>, что допускается стандартом языка HTML, так как синтаксический анализатор HTML всегда вставляет пропущенный тэг <BODY>.
