Таблица стилей теперь содержит два правила: первое предопределяет отображение элементов основного текста красным цветом 'red', в то время как второе - отображение элементов стиля H1 синим цветом 'blue'. Так как для элемента P значение цвета не было установлено, то он унаследует цвет от родительского элемента, а именно от основного текста. Элемент стиля H1 также является дочерним элементом основного текста, но второе правило переопределяет унаследованное им значение. Подобные конфликты часто возникают в CSS между различными предписаниями значений. Представленное описание определяет пути их разрешения.
В CSS2 существует более 100 различных свойств, одним из которых является
свойство 'color'. Далее предлагается рассмотреть
некоторые другие свойства:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE> Домашняя страница об И.С. Бахе </TITLE>
<STYLE type="text/css">
BODY {
font-family: "Gill Sans", sans-serif;
font-size: 12pt;
margin: 3em;
}
</STYLE>
</HEAD>
<BODY>
<H1> Домашняя страница об И.С. Бахе </H1>
<P> Иоган Себастьян Бах написал много музыкальных произведений.
</BODY>
</HTML>
Первой бросается в глаза группа строк, разделенных точкой с запятой и заключённых в фигурные скобки "{}". После последней строки в этой группе также может ставиться точка с запятой.
Первая строка в элементе BODY устанавливает семейство шрифтов "Gill Sans". Если этот тип шрифтов недоступен, то пользовательский агент (часто именуемый программой просмотра или браузером) будет использовать шрифт 'sans-serif', который является одним из пяти шрифтов, распознаваемых всеми пользовательскими агентами. Дочерние элементы BODY наследуют значение 'font-family' .
Вторая строка устанавливает размер шрифта элемента BODY равным 12 пунктам. Единица измерения "пункт" обычно используется при печати на принтере для отображения размера шрифтов и других размеров длины. Это пример абсолютной единицы измерения, которая не меняется в зависимости от окружения.
Третья строка использует относительную единицу измерения, масштаб которой изменяется в зависимости от окружения. Единица измерения "em" относится к размеру шрифта элемента. В данном случае, размер полей вокруг элемента BODY в три раза больше размера шрифта.
2.2 Краткое руководство по CSS2 для XML-документов
Язык CSS может использоваться с любым структурированным форматом документов, например, с приложениями, написанными на языке XML (eXtensible Markup Language) [XML10]. Фактически, XML-приложения зависят от таблиц стилей больше, чем HTML-приложения, т.к. в первом случае разработчики могут создавать свои собственные элементы, которые не могут быть отображены программами просмотра.
Приведем простой фрагмент из XML-документа:
<ARTICLE>
<HEADLINE> Фридрих Великий знакомится с Бахом </HEADLINE>
<AUTHOR> Иоган Николас Форкель </AUTHOR>
<PARA>
Однажды вечером, как раз когда он готовил
<INSTRUMENT>флейта</INSTRUMENT>, а его музыканты уже собрались, офицер подал ему список прибывших незнакомцев.
</PARA>
</ARTICLE>
Чтобы отобразить этот фрагмент по подобию документа, мы прежде всего должны
объявить, какие элементы принадлежат самой строке как таковой (т.е. не вызывают
её разрыва), и какие элементы, являясь блочными, ей не принадлежат (т.е.
вызывают разрыв строки).
INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
Первое правило объявляет элемент INSTRUMENT как элемент строки, а второе
правило, представленное списком селекторов, разделенных друг от друга запятыми,
объявляет все другие элементы как блочные.
Одним из возможных путей интеграции таблицы стилей с XML-документом является
использование команд предобработки:
<?XML:stylesheet type="text/css" href="bach.css"?>
<ARTICLE>
<HEADLINE> Фридрих Великий знакомится с Бахом </HEADLINE>
<AUTHOR> Иоган Николас Форкель </AUTHOR>
<PARA>
Однажды вечером, как раз когда он готовил
<INSTRUMENT>флейта</INSTRUMENT>, а его музыканты уже собрались, офицер подал ему список прибывших незнакомцев.
</PARA>
</ARTICLE>
Программа просмотра изобразила бы вышеприведенный пример следующим образом:
Заметьте, что слово "флейта" остается внутри абзаца, являясь содержимым
элемента INSTRUMENT, принадлежащего непосредственно самой строке.
Пока ещё текст не отформатирован так, как бы вы этого хотели. Например,
размер шрифта заголовка должен быть больше, чем остальной текст, и вы бы желали,
чтобы имя автора было выделено курсивом:
INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
HEADLINE { font-size: 1.3em }
AUTHOR { font-style: italic }
ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5em }
Программа просмотра изобразит вышеприведённый пример следующим образом:
Добавляя больше правил в таблицу стилей, вы сможете и дальше улучшать
представление документа.
2.3 Модуль предобработки в CSS2
В этом разделе представлена одна из возможных моделей работы
пользовательского агента, поддерживающего инструкции CSS. Она отображена только
на уровне понятий, так что её отдельные реализации могут разнится между собой.
Согласно предлагаемой модели, пользовательский агент обрабатывает исходный
код в несколько этапов:
- Осуществляет грамматический анализ исходного документа и создает дерево документа.
- Определяет тип конечного устройства.
- Выбирает все таблицы стилей, связанные с документом и ассоциированные с
определённым на предыдущем этапе конечным
устройством.
- Комментирует каждый элемент дерева документа, присваивая по одному значению
каждому свойству, ассоциированному с
конечным типоп устройства. Операция присвоения значений
осуществляется в соответствии с теми правилами, которые описаны в разделе "Каскадирование и наследование".
Часть агента, относящаяся к вычислению значений, зависит от алгоритма
форматирования, предопределяемого конечным типом
устройства. Например, если конечным устройством является экран, то
пользовательские агенты применяют модель визуального форматирования. Если вывод осуществляется на печатную страницу, то
пользовательские
агенты применяют страничную модель. Если
вывод осуществляется на устройство звукового воспроизведения (например,
синтезатор речи), то пользовательские агенты применяют модель звукового воспроизведения.
- Создает
структуру форматирования на
основании комментированного дерева документа. Зачастую структура форматирования
очень похожа на дерево документа, но она также может и значительно отличаться от
него, особенно, если авторы используют псевдо-элементы и генерируемое
содержимое. Во-первых, структура форматирования не обязательно должна быть
древовидной, но ее вид в значительной степени зависит от ее реализации.
Во-вторых, в структуре форматирования может содержаться как большее, так и
меньшее количество информации, чем в дереве документа. Например, если значение
некоторого элемента в дереве документа установлено в 'none' для свойства 'display', то этот элемент ничего не
сгенерирует в структуре форматирования. С другой стороны, элемент, определяющий список, может сгенерировать больше информации в структуре форматирования:
содержимое элемента списка и информацию о стиле списка (например, изображение маркера позиции).
Следует заметить, что на этом шаге пользовательский агент, поддерживающий
CSS, не изменяет дерево документа. В частности, содержание, сгенерированное с
применением таблиц стилей, не подается обратно в языковой процессор (например,
для повторного грамматического анализа).
- Передает структуру форматирования на конечное устройство (например, печать
результатов, отображение их на экране, звуковое воспроизведение, и т.д.).
Шаг 1 выходит за рамки данного описания (см., например, [DOM]).
Шаги 2-5 составляют предмет основного внимания в данном описании.
Шаг 6 выходит за рамки данного описания.
2.3.1 Область представления
Независимо от типа устройства термин
область представления обозначает
пространство, в котором представляется структура форматирования. Сама по себе
область представления имеет неограниченные размеры, но представление обычно
осуществляется в ее ограниченной части, определяемой пользовательским агентом в
соответствии с конечным устройством. Например, пользовательские агенты,
управляющие выводом на экран, в основном ограничиваются минимальной шириной
экрана, начальное значение которой выбирают, исходя из размеров окна просмотра. Пользовательские агенты,
управляющие выводом на страницу, в основном ограничиваются шириной и высотой.
Пользовательские агенты, управляющие звуковым воспроизведением, используют
ограничения, относящиеся к частотному диапазону и никоим образом не влияющие на
время воспроизведения.
2.3.2 Модель адресации в CSS2
Свойства и селекторы в CSS2 позволяют
таблицам стилей обращаться к следующим частям документа или пользовательского
агента:
