назад   дальше   содержание   свойства   индекс  

2 Введение в CSS2

Содержание

2.1 Небольшой пример CSS2 для HTML

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

Для определения синего цвета текста элемента H1, вы должны внести следующую управляющую запись:

  H1 { color: blue }

Правила CSS состоят из двух основных частей: селектора ('H1') и объявления ('color: blue'). Объявление имеет две части: свойство ('color') и значение ('blue'). Пока пример содержит свойства только одного элемента, необходимого для представления документа HTML, он может быть только таблицей стилей для таблицы стилей. Скомбинированный с другими определениями стиля (одно из фундаментальных свойств CSS - возможность комбинирования таблиц стилей),он будет определять окончательный вид всего документа.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <STYLE type="text/css">
    H1 { color: blue }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <LINK rel="stylesheet" href="bach.css" type="text/css">
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

Элемент LINK должен содержать:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <STYLE type="text/css">
    BODY { color: red }
    H1 { color: blue }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

Таблица стилей теперь содержит два определения; первый указывает цвет элементу BODY: 'red' (красный), второй же определяет цвет элемента H1 как синий ('blue'). Не определен цвет для элемента P, но он наследует цвет родительского элемента BODY. Элемент H1 также является наследником элемента BODY, но его определение имеет приоритет над наследованием значений свойств.В CSS часто встречаются конфликты между различными значениями, и эта спецификация описывает, как их разрешить.

CSS2 имеет более 100 различных свойств, включая 'color' (цвет). Давайте посмотрим на некоторые другие: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <STYLE type="text/css">
    BODY { 
      font-family: "Gill Sans", sans-serif;
      font-size: 12pt;
      margin: 3em; 
    }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

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

Первая декларация в элементе BODY устанавливает начертание шрифта "Gill Sans". Если этот шрифт недоступен, броузер будет использовать начертание шрифта без засечек 'sans-serif'. Sans-serif - одно из пяти семейств шрифтов, которые известны всем броузерам. Дочерние элементы BODY будут наследовать значение свойства 'font-family'.

Вторая декларация устанавливает размер шрифта элементу BODY в 12 точек (points). Точка ("point") общеупотребительный типографский термин для определения высоты шрифта и других линейных размеров. Это пример абсолютной единицы измерения, которая не изменяется в зависимости от окружения.

Третья декларация использует относительные размеры, которые пересчитываются вслед за окружающими величинами. Единица измерения "em" зависит от высоты шрифта элемента. В этом случае результатом будет величина отступа, равная утроенной высоте шрифта.

2.2 Небольшой пример CSS2 для XML

CSS может использоваться с любыми форматами структурирования документов, например, с eXtensible Markup Language (Расширяемым языком разметки) [XML10]. XML более зависит от таблиц стилей, чем HTML, так как авторы могут использовать свои собственные элементы, которые броузеры не умеют показывать.

Вот простейший фрагмент XML: 

<ARTICLE>
  <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
  <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
  <PARA>
    One evening, just as he was getting his 
    <INSTRUMENT>flute</INSTRUMENT> ready and his
    musicians were assembled, an officer brought him a list of
    the strangers who had arrived.
  </PARA>
</ARTICLE>

Чтобы показать этот фрагмент в читаемом виде, мы, во-первых, должны определить, какие элементы являются строчными (т.е., не разрывающими строки), а какие - блоковыми (т.е., разрывающими строки). 

INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }

Первая управляющая запись определяет INSTRUMENT как строковый элемент, и вторая запись, включающая разделенный запятыми список селекторов, определяет каждый из этих элементов как блочный.

Одна из возможностей ссылаться на таблицу стилей из документа XML - это использовать указание: 

<?XML:stylesheet type="text/css" href="bach.css"?>
<ARTICLE>
  <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
  <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
  <PARA>
    One evening, just as he was getting his 
    <INSTRUMENT>flute</INSTRUMENT> ready and his
    musicians were assembled, an officer brought him a list of
    the strangers who had arrived.
  </PARA>
</ARTICLE>

Визуальные средства просмотра сформатируют этот пример так:

Example rendering   [D]

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

Визуальные средства просмотра сформатируют этот пример так:

Example rendering   [D]

Добавление большего числа определений стилей придаст более презентабельный вид вашему документу.

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

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

В этой модели броузер обрабатывает содержимое поэтапно:

  1. Разбор документа и создание дерева документов.
  2. Идентификация указанных медиа - типов.
  3. Получение всех указанных в документе таблиц стилей, которые определяют используемые медиа-типы.
  4. Присвоение каждому элементу дерева документа единственного значения для каждого свойства (property) указанных медиа-типов. Значения устанавливаются для свойств по правилам, описанным в разделе каскад и наследование.

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

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

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

  6. Отправка форматированной структуры в указанную среду (т.е., печать результата, показ на экране, преобразование в речь, и т.д.).

Первый шаг лежит вне компетенции этой спецификации (см., например, [DOM]).

Шаги 2-5 подробно рассмотрены в спецификации.

Шаг 6 лежит вне компетенции этой спецификации.

2.3.1 Канва

Для всех сред термин canvas (канва, холст) описывается как "место, где отображается форматированная структура". Канва бесконечна для каждого измерения пространства, но отображение осуществляется для конечного участка канвы, используемого броузером и указанной средой вывода. Например, броузеры отображают на экран необходимый минимум ширины и выбирают ширину, основываясь на размерах видимой части окна экрана (viewport). Броузеры отображают страницы с сохранением пропорций высоты и ширины. Слуховые броузеры ограничены звуковым диапазоном, но не временем.

2.3.2 Адресная модель CSS2

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

2.4 Принципы проектирования CSS

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

назад   дальше   содержание   свойства   индекс