Встраивание таблиц стилей в документ
Для использования таблиц стилей браузер должен знать о том, что они существуют и где находятся. Для этого их надо связывать с HTML-документом.
Существует целых четыре способа связывания документа и таблицы стилей:
1. Связывание — позволяет использовать одну таблицу стилей для форматирования многих страниц HTML.
2. Внедрение — позволяет задавать все правила таблицы стилей непосредственно в самом документе.
3. Импортирование — позволяет встраивать в документ таблицу стилей, расположенную на сервере.
4. Встраивание в теги документа — позволяет изменять форматирование конкретных элементов страницы.
Остановимся на каждом из этих способов более подробно.
Связывание позволяет хранить таблицу стилей в отдельном файле и присоединять её к документу при помощи тега <LINK>, задаваемого в разделе <HEAD>:
<LINK REL="stylesheet" TYPE="text/css" HREF="mystyles.css">
Связываемый файл содержит набор правил каскадных таблиц стилей, определяющих форматирование документа, и должен иметь расширение css.
Связывание позволяет разработчику применить одинаковый набор правил форматирования к группе HTML-документов, что приводит к единообразному отображению различных документов и придаёт некоторую системность сайту.
При внедрении таблицы стилей в документ правила, её составляющие, задаются в стилевом блоке, ограниченном тегами <STYLE TYPE="text/css"> и </STYLE>, который должен размещаться в разделе <HEAD> документа:
<HEAD>
<STYLE TYPE="text/css">
<!--
B { text-transform: uppercase; }
P { background-color: lightgrey;
text-align: center;}
-->
</STYLE>
</HEAD>
Не смущайтесь, видя в этом коде тег комментария <!--…-->, это сделано для того, чтобы избежать проблем с браузерами, не поддерживающими DHTML (правда осталось таких немного…)
В приведённом примере встроенная таблица стилей определяет отображение всех абзацев в документе (элемент P) на сером фоне с центрированными строками. Полужирный текст, определяемый любым элементом B (тег <B>) документа, будет отображаться прописными буквами, даже если в документе он задан строчными.
В теге <STYLE> можно импортировать внешнюю таблицу стилей с помощью свойства @import таблицы стилей:
@import: url(mystyles.css);
Его следует задавать в начале стилевого блока или связываемой таблицы стилей перед заданием остальных правил. Значение свойства @import является URL файла таблицы стилей.
Последний способ задания значений свойств таблицы стилей предназначен для оперативного форматирования определённого элемента документа и называется внедрение. Каждый тег HTML имеет параметр STYLE, в котором можно задать значения его свойств в соответствии с синтаксисом каскадных таблиц стилей. Например, в следующем примере задаётся форматирование заголовка первого уровня, определяющее его отображение шрифтом красного цвета.
<H1 STYLE="color:red">Заголовок красного цвета</H1>
Если связанные, внедрённые и импортируемые таблицы стилей влияют на форматирование всех элементов документа, для которых определены в таблицах правила, то встраивание определений стилей в конкретный тег влияет на отображение только элемента, определяемого данным тегом.
Все способы встраивания таблиц стилей свободно сочетаются в одном документе. Например, можно разработать главную таблицу стилей для всех документов и связывать её с каждым HTML файлом. Импортируемая или внедряемая таблица стилей будет уточнять форматирование элементов конкретного документа, а встраиваемые в тег определения будут уточнять их отображение.
Группирование и наследование
Правила каскадных таблиц состоят из селектора и определения. Для уменьшения размеров таблиц стилей можно группировать разные селекторы в виде списка элементов страницы HTML, разделённых запятыми, если для них задаётся одно правило. Например, следующие правила
H1 {font-family: Verdana}
H2 {font-family: Verdana}
H3 {font-family: Verdana}
можно сгруппировать и задать в виде одного правила со списком селекторов
H1, H2, H3 {font-family: Verdana}
Аналогично группируются определения, только в списке они разделяются точками с запятой. Следующие правила форматирования заголовка первого уровня
H1 {font-weight: bold}
H2 {font-size: 14pt}
H2 {font-family: Verdana}
можно сгруппировать в виде одного правила, сгруппировав определения:
H1 (font-weight: bold;
font-size: 14pt;
font-family: Verdana;
}
Некоторые свойства имеют собственный синтаксис группирования, связанный с заданием значений нескольких свойств в одном. Например, предыдущий пример при использовании свойства font запишется так:
H1 {font: bold 14pt Verdana}
При задании таблицы стилей можно свободно комбинировать все три правила группирования для уменьшения её размеров.
В HTML некоторые элементы могут содержать другие. Как будет отображаться элемент, расположенный внутри другого элемента страницы, если для последнего задано правило форматирования, а для вложенного элемента нет? Например, пусть цвет шрифта абзаца определён как синий(P {color: blue}). Как будет отображаться выделенный элемент текста, задаваемый тэгом <em>, если для него не определено правило форматирования? В подобных случаях вложенный элемент наследует правила форматирования элемента-родителя. В нашем примере выделенный элемент будет также отображаться синим цветом. Другие свойства ведут себя аналогично свойству 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, или на белом фоне, если файл недоступен.
Селекторы
Правила каскадных таблиц стилей, в которых в качестве селектора используются теги HTML, влияют на отображение всех элементов заданного типа в документе. Следующее правило отображает без подчёркивания все ссылки в документе.
< STYLE TYPE="text/css">
<!--
A {text-decoration:none; }
-->
</--STYLE>
А что делать, если необходимо некоторые ссылки отобразить по-другому? Можно задать для них правило форматирования непосредственно в теге, а можно применить параметр CLASS, значением которого является ссылка на класс, задаваемый в таблице стилей.
Класс позволяет задать разные правила форматирования для одного элемента определённого типа или всех элементов документа. Имя класса указывается в селекторе правила после имени тега и отделяется от него точкой. Можно определить несколько правил форматирования для одного элемента и с помощью параметра CLASS соответствующего тега применять разные правила форматирования. Например, можно определить два класса для отображения заголовка первого уровня:
<STYLE TYPE="text/css">
<!--
H1.red {color: red; }
H1.blueBgrd (color:red; background-color: blue}
-->
</STYLE>
В тексте документа ссылка на соответствующий класс задаётся в параметре CLASS:
<H1 CLASS="red">Красный шрифт</H1>
<H1 CLASS="blueBgrd">Красный шрифт на синем фоне</H1>
В приведённом примере классы задавались для разного отображения элементов одного типа. Если класс должен применяться ко всем элементам документа, то в селекторе задаётся имя класса с лидирующей точкой без указания конкретного элемента:
<STYLE TYPE="text/css">
<!--
.red {color: red; }
.blueBgrd (color:red; background-color: blue}
-->
</STYLE>
Теперь два класса red и blueBgrd можно применять к любым элементам документа:
<P CLASS="red">Красный шрифт</P>
<P CLASS="blueBgrd">Красный шрифт на синем фоне</P>
Первый абзац отразится красным шрифтом, а второй — красным шрифтом на синем фоне.
Параметр ID, как и параметр CLASS, не влияет на отображение браузером элемента HTML, но задаёт уникальное имя элемента, которое используется для ссылок на него в сценариях и таблицах стилей. Параметр ID можно применять к любому элементу документа.
Правила таблиц стилей регламентируют использование уникального идентификационного имени элемента в качестве селектора, предваряя его символом #:
<STYLE TYPE="text/css">
<!--
#par24 {letter-spacing: 1em; }
H1#form3 (color:red; background-color: blue}
-->
</STYLE>
<BODY>
<P ID=par24> Разрежённые слова в абзаце</P>
<H1 ID=form2>Чёрный заголовок</P>
В этом примере абзац идентифицирован именем par24 в параметре ID, поэтому к нему применимо правило с селектором #par24. Второе правило в таблице стилей должно применяться к заголовку первого уровня с идентификатором form3. Такого элемента в нашем фрагменте нет, и поэтому заголовок form2 отображается с применением правила по умолчанию.
