Каскадные таблицы стилей: язык css
"Le style c'est l'homme meme." "Стиль — это сам человек."
Ж. Бюффон, "Рассуждение о стиле"
Глава 2.1. Введение в таблицы стилей
2.1.1. Что такое css?
В декабре 1996 г. W3C стандартизовал первый уровень каскадных таблиц стилей (CSS1), который определил правила описания стилей визуального отображения элементов HTML-документов. В мае 1998 г. им была принят стандарт второго уровня таблиц стилей (CSS2), который существенно расширил возможности таблиц стилей. Основными особенностями CSS2 являются следующие:
-
CSS2 — это язык, который позволяет присоединять стили к любым структурированным документам. На сегодня таковыми являются HTML-документы и XML-приложения.
-
CSS2 распространил понятие стиля отображения на печатающие устройства, синтезаторы речи и другие устройства отображения документов.
В основу данной части нашего справочника положен именно стандарт CSS2.
Цель создания каскадных таблиц стилей состояла в том, чтобы отделить структуру документа (описанную на языке HTML или подмножестве XML) от правил его отображения на различных устройствах (задаваемых таблицами CSS). Чтобы пояснить это утверждение, рассмотрим следующий пример HTML-документа:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Моя домашняя страница</TITLE>
<STYLE type="text/css">
<!-- скрыть стили CSS от старых обозревателей
BODY { color: blue }
H1 { color: red }
-->
</STYLE>
</HEAD>
<BODY>
<H1>Моя домашняя страница</H1>
<P>Добро пожаловать!</P>
</BODY>
</HTML>
Этот документ содержит элемент STYLE, содержащий два правила CSS: первое из них определяет, что цвет отображения элемента BODY должен быть красным, а второе — что цвет отображения элемента H1 должен быть синим. Поскольку стиль отображения элемента P не задан, он унаследует стиль своего родительского элемента, в данном случае элемента BODY. В результате данный HTML-документ будет отображаться так:
Моя домашняя страница
Добро пожаловать!
Теперь для изменения стиля отображения этого документа нам достаточно менять только содержимое элемента STYLE, не внося никаких модификаций в остальной HTML-документ. Для большей гибкости мы можем создать текстовый файл STYLE.CSS и перенести в него описание стилей:
BODY { color: blue }
H1 { color: red }
HTML-документ после этого следует изменить следующим образом:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Моя домашняя страница</TITLE>
<LINK rel="stylesheet" href="style.css" type="text/css">
</HEAD>
<BODY>
<H1>Моя домашняя страница</H1>
<P>Добро пожаловать!</P>
</BODY>
</HTML>
В дальнейшем для изменения стилей мы будем изменять только файл STYLE.CSS, не касаясь головного HTML-документа.
Теперь представим этот документ в виде дерева и введем соответствующую терминологию, которая будет нам необходима в дальнейшем изложении:
Корнем этого дерева является элемент HTML, который имеет двух сыновей — HEAD и BODY. Элемент HEAD является отцом элемента TITLE, а элемент BODY — отцом элементов H1 и P (два последних элемента называются братьями, причем H1 является старшим братом, а P — младшим). Все элементы дерева являются потомками корня, а тот является их предком. Таким образом можно представить в виде дерева любой документ, к которому применимы правила языка CSS.