Опубликовано: 5 декабря 2014      Перевод:

Перевод параграфа 2 CSS2.1 спецификации: Introduction to CSS 2.1.

2.1 Краткое знакомство с CSS 2.1 для HTML.

Этот параграф является ненормативным.

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//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 красным, вы можете создать следующее CSS правило:

h1 { color: red }

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Bach's home page</TITLE>
<STYLE type="text/css">
h1 { color: red }
</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.01//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 определяется следующее:

  • тип ссылки: на stylesheet.
  • посредством атрибута href указывается расположение таблицы стилей.
  • тип подключаемой таблицы стилей: text/css.

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

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

Стандарт CSS 2.1 насчитывает более 90 свойств, включая color. Давайте взглянем на пару других свойств:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//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", который является одним из пяти самых распространенных наборов шрифтов, известных всем пользовательским агентам. Дочерние элементы элемента BODY унаследуют значение свойства font-family.

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

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

2.2 Краткое знакомство с CSS 2.1 для XML.

Этот параграф является ненормативным.

СSS может быть использован с любым форматом структурирования документа, это касается, к примеру, приложений составленных с помощью 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 чувствительны к регистру и поэтому написанный строчными буквами селектор (например, instrument) это не то же самое, что тот же селектор, но написанный заглавными буквами (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>

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

Отображение XML кода - предварительная CSS стилизация.

Обратите внимание на то, что слово 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 }

Теперь визуальный пользовательский агент отформатирует наш пример вот так:

"Отображение XML кода - полная CSS стилизация.

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

2.3 Модель обработки CSS 2.1.

Этот параграф до его подразделов, но не включая их, является ненормативным.

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

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

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

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

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

2.3.1 Канва.

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

2.3.2 Модель адресации CSS 2.1.

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

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

2.4 Принципы CSS разработки.

Этот параграф является ненормативным.

Стандарт CSS 2.1, как и его предшественники CSS 2 и CSS 1, основывается на ряде принципов разработки:

  • Прямая и обратная совместимость. Пользовательские агенты, обеспечивающие поддержку стандарта CSS 2.1, в состоянии обрабатывать созданные с помощью CSS 1 таблицы стилей. В свою очередь пользовательские агенты CSS 1 стандарта тоже могут работать с таблицами стилей CSS 2.1, однако они опускают те фрагменты, которые им непонятны. Пользовательские агенты, у которых отсутствует поддержка CSS, все еще смогут отображать стилизованные документы, однако, все форматирование таких документов, произведенное с помощью CSS, будет ими проигнорировано. Тем не менее, весь необходимый контент будет доступен пользователю.
  • Дополнение структурированных документов. Таблицы стилей дополняют структурированные документы (к примеру, HTML и XML приложения), обеспечивая их стилевой информацией для оформленного с помощью разметки текста. Причем вносимые в таблицы стилей изменения оказывают незначительный эффект на разметку, либо такие последствия отсутствуют вообще.
  • Независимость от типов устройств, платформы и производителей.
    Благодаря таблицам стилей документы сохраняют независимость от платформ, типов устройств и производителей. Сами по себе таблицы стилей тоже предусматривают платформенную, вендорную, а также аппаратную независимость, но CSS 2.1 к тому же позволяет вам ассоциировать таблицу стилей с определенной категорией устройств (например, принтерами).
  • Сопровождение. Наличие в документах ссылок на таблицы стилей значительно упрощает процесс сопровождения сайта для веб-мастеров, позволяя сохранить при этом визуальное постоянство сайта и неизменность его восприятия пользователями. Так, например, если организация пожелает изменить цвет фона на своем сайте, то модифицировать нужно будет только один файл.
  • Простота. CSS является не сложным языком стилей, доступным для чтения и написания обычным человеком. CSS свойства остаются в максимально возможной степени независимыми друг от друга, и поэтому в целом для достижения определенного эффекта существует только один способ.
  • Сетевая производительность. CSS предоставляет компактные кодировки для представления контента. По сравнению с изображениями или аудио файлами, которые, как правило, используются авторами для достижения определенных эффектов при визуализации содержимого, таблицы стилей зачастую способствуют снижению объема загружаемого контента. Более того, для этого следует использовать меньшее число сетевых соединений, что приведет к увеличению производительности сети.
  • Гибкость. Существует несколько способов применения CSS правил к содержимому документа. Ключевым моментом здесь является возможность каскадирования стилевой информации. То есть при формировании тела документа стили применяются в следующей последовательности: дефолтная таблица стилей пользовательского агента; пользовательская таблица стилей; внешние таблицы стилей, на которые ссылается документ; стили, используемые в заголовке документа; и стили, встроенные в тег элемента с помощью атрибутов.
  • Насыщенность представления. Авторам предоставляется богатый набор используемых при отображении эффектов, что позволяет повысить разнообразие и насыщенность Web как среды представления. Дизайнеры всегда стремились получить тот уровень функциональности, который зачастую присутствует в настольных издательских системах и средствах создания слайд-шоу. Некторые из этих запрашиваемых авторами визуальных эффектов приводят к конфликту с концепцией независимости устройств, однако стандарт CSS 2.1 идет по пути удовлетворения запросов дизайнеров.
  • Возможность подключения альтернативных языков. Множество описанных настоящей спецификацией CSS свойств образуют устойчивую модель форматирования, как для визуального, так и для звукового представления. Помимо того, что эта модель форматирования доступна для CSS кодирования, к ней могут быть применены и другие языки. Так, допустим, с помощью программы, написанной на JavaScript можно динамически изменять значение свойства color определенных элементов.
  • Доступность. Благодаря некоторым CSS компонентам Web пространство становится более доступным для категории пользователей с ограниченными возможностями:
    • Свойства контроля вывода шрифтов позволяют авторам исключить представление текстовой информации посредством растровых изображений, которые недоступны для отдельных пользователей.
    • Свойства, отвечающие за позиционирование, дают возможность не прибегать к хитростям разметки (типа использования невидимых изображений) для достижения нужной компоновки документа.
    • Семантика правил с директивой !important подразумевает, что в случае необходимости выполнения конкретных требований представления, пользователи могут переопределить стили, устанавливаемые в таблице стилей автора документа.
    • Доступное для всех свойств значение inherit повышает универсальность характерной таблицам стилей каскадности, а также позволяет упростить и сделать более последовательным процесс настройки стилей.
    • Повышенная поддержка различных сред окружения, предусматривающая использование медиа групп, а также таких медиа типов как система чтения для слепых, рельефная печать и телетайпные устройства (tty) позволит пользователям и авторам адаптировать свои страницы для представления на этих устройствах.
  • Для более детальной информации по разработке доступных документов с использованием CSS и HTML смотрите [WCAG20]