Книги-online

Ввдение в CSS2

2 Введение в CSS2

Содержание

2.1 Краткое руководство по CSS2 для HTML-документов

В этом разделе будет продемонстрировано, насколько легко разрабатываются небольшие таблицы стилей. Для этого достаточно иметь общие представления о языке HTML (см. [HTML40]) и настольной издательской терминологии.

Начнем с небольшого HTML-документа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Домашняя страница об И.С. Бахе</TITLE>
  </HEAD>
  <BODY>
    <H1>Домашняя страница об И.С. Бахе </H1>
    <P> Иоган Себастьян Бах написал много музыкальных произведений.
  </BODY>
</HTML>

Для того, чтобы текст стиля H1 отображался синим цветом, Вы можете написать следующее CSS-правило:

  H1 { color: blue }

Правило в CSS состоит из двух частей: селектора ('H1') и описания ('color: blue'). В свою очередь, описание также имеет две части: свойство ('color') и значение ('blue'). И хотя в вышеприведённом примере осуществляется попытка повлиять только на одно из свойств, необходимых для исполнения HTML-документа, тем не менее, непосредственно сам он и может быть назван таблицей стиля. Будучи объединённым с другими таблицами стилей (такая возможность является одной из основных характеристик CSS), он будет определять полное и окончательное отображение документа.

Спецификация языка HTML 4.0 определяет правила описания таблиц стилей для HTML-документов: либо непосредственно внутри HTML документа, либо посредством внешней таблицы стилей. Для вставки таблицы стиля в документ используют элемент STYLE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE> Домашняя страница об И.С. Бахе </TITLE>
  <STYLE type="text/css">
    H1 { color: blue }
  </STYLE>
  </HEAD>
  <BODY>
    <H1> Домашняя страница об И.С. Бахе </H1>
    <P> Иоган Себастьян Бах написал много музыкальных произведений 
  </BODY>
</HTML>

Для максимальной гибкости мы рекомендуем авторам создавать внешние таблицы стилей, которые могут быть модифицированы без изменения исходного HTML- документа и могут совместно использоваться несколькими документами. Для соединения с внешней таблицей стиля можно использовать элемент LINK:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE> Домашняя страница об И.С. Бахе </TITLE>
  <LINK rel="stylesheet" href="books-page-html-css2_rus-bach.css" type="text/css">
  </HEAD>
  <BODY>
    <H1> Домашняя страница об И.С. Бахе </H1>
    <P> Иоган Себастьян Бах написал много музыкальных произведений.
  </BODY>
</HTML>

Элемент LINK определяет:

тип соединения: "stylesheet".
местонахождение таблицы стилей через атрибут "ref".
тип присоединяемой таблицы стилей: "text/css".

Чтобы показать тесную связь между таблицей стилей и структурной разметкой документа, продолжим использование элемента STYLE в этом руководстве. Добавим больше цветов:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE> Домашняя страница об И.С. Бахе </TITLE>
  <STYLE type="text/css">
    BODY { color: red }
    H1 { color: blue }
  </STYLE>
  </HEAD>
  <BODY>
    <H1> Домашняя страница об И.С. Бахе </H1>
    <P> Иоган Себастьян Бах написал много музыкальных произведений.
  </BODY>
</HTML>

Таблица стилей теперь содержит два правила: первое предопределяет отображение элементов основного текста красным цветом '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="books-page-html-css2_rus-bach.css"?>
<ARTICLE>
  <HEADLINE> Фридрих Великий знакомится с Бахом </HEADLINE>
  <AUTHOR> Иоган Николас Форкель </AUTHOR>
  <PARA>
    Однажды вечером, как раз когда он готовил 
    <INSTRUMENT>флейта</INSTRUMENT>, а его музыканты уже собрались, офицер подал ему список прибывших незнакомцев.
  </PARA>
</ARTICLE>

Программа просмотра изобразила бы вышеприведенный пример следующим образом:

[D]

Заметьте, что слово "флейта" остается внутри абзаца, являясь содержимым элемента 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 }

Программа просмотра изобразит вышеприведённый пример следующим образом:

[D]

Добавляя больше правил в таблицу стилей, вы сможете и дальше улучшать представление документа.

2.3 Модуль предобработки в CSS2

В этом разделе представлена одна из возможных моделей работы пользовательского агента, поддерживающего инструкции CSS. Она отображена только на уровне понятий, так что её отдельные реализации могут разнится между собой.

Согласно предлагаемой модели, пользовательский агент обрабатывает исходный код в несколько этапов:

Осуществляет грамматический анализ исходного документа и создает дерево документа.

Определяет тип конечного устройства.

Выбирает все таблицы стилей, связанные с документом и ассоциированные с определённым на предыдущем этапе конечным устройством.

Комментирует каждый элемент дерева документа, присваивая по одному значению каждому свойству, ассоциированному с конечным типоп устройства. Операция присвоения значений осуществляется в соответствии с теми правилами, которые описаны в разделе "Каскадирование и наследование".

Часть агента, относящаяся к вычислению значений, зависит от алгоритма форматирования, предопределяемого конечным типом устройства. Например, если конечным устройством является экран, то пользовательские агенты применяют модель визуального форматирования. Если вывод осуществляется на печатную страницу, то пользовательские агенты применяют страничную модель. Если вывод осуществляется на устройство звукового воспроизведения (например, синтезатор речи), то пользовательские агенты применяют модель звукового воспроизведения.

Создает структуру форматирования на основании комментированного дерева документа. Зачастую структура форматирования очень похожа на дерево документа, но она также может и значительно отличаться от него, особенно, если авторы используют псевдо-элементы и генерируемое содержимое. Во-первых, структура форматирования не обязательно должна быть древовидной, но ее вид в значительной степени зависит от ее реализации. Во-вторых, в структуре форматирования может содержаться как большее, так и меньшее количество информации, чем в дереве документа. Например, если значение некоторого элемента в дереве документа установлено в 'none' для свойства 'display', то этот элемент ничего не сгенерирует в структуре форматирования. С другой стороны, элемент, определяющий список, может сгенерировать больше информации в структуре форматирования: содержимое элемента списка и информацию о стиле списка (например, изображение маркера позиции).

Следует заметить, что на этом шаге пользовательский агент, поддерживающий CSS, не изменяет дерево документа. В частности, содержание, сгенерированное с применением таблиц стилей, не подается обратно в языковой процессор (например, для повторного грамматического анализа).

Передает структуру форматирования на конечное устройство (например, печать результатов, отображение их на экране, звуковое воспроизведение, и т.д.).

Шаг 1 выходит за рамки данного описания (см., например, [DOM]).

Шаги 2-5 составляют предмет основного внимания в данном описании.

Шаг 6 выходит за рамки данного описания.

2.3.1 Область представления

Независимо от типа устройства термин область представления обозначает пространство, в котором представляется структура форматирования. Сама по себе область представления имеет неограниченные размеры, но представление обычно осуществляется в ее ограниченной части, определяемой пользовательским агентом в соответствии с конечным устройством. Например, пользовательские агенты, управляющие выводом на экран, в основном ограничиваются минимальной шириной экрана, начальное значение которой выбирают, исходя из размеров окна просмотра. Пользовательские агенты, управляющие выводом на страницу, в основном ограничиваются шириной и высотой. Пользовательские агенты, управляющие звуковым воспроизведением, используют ограничения, относящиеся к частотному диапазону и никоим образом не влияющие на время воспроизведения.

2.3.2 Модель адресации в CSS2

Свойства и селекторы в CSS2 позволяют таблицам стилей обращаться к следующим частям документа или пользовательского агента:

Элементы в дереве документа и определенные связи между ними (см. раздел "Селекторы").
Атрибуты элементов в дереве документа и значения этих атрибутов (см. раздел "Селекторы атрибутов").
Некоторые части содержимого элемента (см. псевдоэлементы :first-line и :first-letter).
Элементы в дереве документа, находящиеся в определенном состоянии (см. раздел "Псевдоклассы").
Некоторые части области представления, в которых будет осуществлен вывод документа.
Определенная информация о системе (см. раздел "Пользовательский интерфейс").

2.4 Принципы разработки CSS-описаний

Язык CSS2, также как и его предшественник CSS1, базируется на совокупности определенных принципов разработки описаний:

Совместимость уровней. Пользовательские агенты, поддерживающие CSS2, смогут воспринимать таблицы стилей CSS1. В свою очередь, пользовательские агенты, поддерживающие CSS1, смогут читать таблицы стилей CSS2, игнорируя те их части, которые не доступны их пониманию. Кроме того, пользовательские агенты, не поддерживающие CSS, смогут отображать документы с использованием доступных стилей. Очевидно, что стилистические улучшения, появляющиеся за счет использования CSS, при этом не смогут быть отображены, но все содержимое документа, однако, будет представлено.
Дополнение к структурированным документам. Таблицы стилей обогащают структурированные документы (например, приложения HTML и XML), предоставляя стилистическую информацию для размеченного текста. При этом модификация таблиц стилей осуществляется довольно просто и без особых последствий для разметки текста документа.
Независимость от поставщика, платформы и аппаратуры. Таблицы стилей позволяют документам сохранять независимость от поставщика, платформы и используемой аппаратуры. Сами таблицы стилей также не зависят от поставщика и платформы, а CSS2 позволяет определять целевую таблицу для группы устройств (например, принтеров).
Удобство эксплуатации. Используя в документах ссылки на таблицы стилей, вебмастеры позволяют существенно упростить обслуживание сайта, сохраняя его внешний вид относительно постоянным во времени и однообразным в пределах всего сайта. Например, для изменения цвета фона на web-странице организации необходимо модифицировать только один файл.
Простота. Будучи сложнее, чем CSS1, CSS2 в то же время остается простым языком для создания стилей, который доступен для человеческого восприятия. Свойства, определяемые в CSS, хранятся независимо друг от друга настолько, насколько это только возможно, и, как правило, при их использовании существует только один способ достижения определенного эффекта.
Производительность сети. Средства языка CSS предоставляют системы кодировки для компактного представления содержимого документа. Нередко по сравнению с графическими и звуковыми файлами, часто используемыми разработчиками для достижения определенных эффектов в презентации, таблицы стилей позволяют существенно выиграть в использовании ресурсов памяти. Кроме того, при этом необходимо меньшее число сетевых соединений, что позволяет еще больше увеличить производительность сети.
Гибкость. Использование CSS может осуществляться несколькими способами. Решающей при этом является возможность иерархического использования информации о стиле, описанной в основной (определяемой пользовательским агентом) таблице стиля, пользовательских таблицах стилей, присоединенных таблицах стилей, заголовке документа и в атрибутах элементов, формирующих тело документа.
Многообразие эффектов. Предоставляя разработчикам богатый набор эффектов, CSS увеличивает красочность Web-страницы как средства визуального отображения информации. Если дизайнеры стремились получить богатые функциональные возможности, то они и находили их в настольных издательских и слайд-шоу приложениях. Однако, некоторые из желаемых ими эффектов вступали в конфликт со свойством аппаратуры быть независимой. Теперь возможности языка CSS2 существенно продвинулись вперед, учитывая все требования дизайнеров.
Альтернативные средства интеграции. Совокупность свойств, определяемых в CSS и описанных в данной спецификации, формирует модель самосогласованного форматирования для вывода визуальной и звуковой информации. Доступ к данной модели форматирования осуществляется посредством языка CSS, либо, благодаря существующей возможности, посредством других языков. Например, программа JavaScript может динамически изменять значение свойства 'color' некоторого элемента.
Доступность. Некоторые функции CSS сделают web-страницу более доступной для тех пользователей, у которых имеются ограничения доступа:
- Свойства, позволяющие управлять выводом шрифтов, позволяют разработчикам избегать недоступных побитовых отображений текста.
- Свойства позиционирования позволяют разработчикам избегать разметки (например, невидимых изображений), управляющей расположением объектов.
- Семантика правил !important позволяет пользователям, имеющим специфические требования к презентации, игнорировать таблицы стилей разработчика.
- Новый тип значения 'inherit', которым обладают все свойства, делает более универсальным каскадное использование таблиц и позволяет упростить и сделать более последовательной настройку стиля.
- Усовершенствованная поддержка устройств, включая поддержку групп устройств и устройств для эктипографии, рельефной печати и телетайпа, позволит пользователям и разработчикам настраивать вывод под свою аппаратуру.
- Свойства, позволяющие управлять звуковым сигналом, предоставляют контроль за воспроизведением речи и аудио-выходным.
- Селекторы атрибутов, функция 'attr()' и свойство 'content' предоставляют доступ к модифицируемому содержимому.
- Счетчики и нумерация параграфов/разделов могут улучшить просмотр документа и сохранить расстояние между выпуклостями (что очень важно для эктипографических устройств). Кроме того, свойства 'word-spacing' и 'text-indent' исключают необходимость в дополнительном свободном месте.
Примечание. Для получения дополнительной информации по разработке легко читаемых документов с использованием CSS и HTML обращайтесь по адресу [WAI-PAGEAUTH].