14. Стилевые таблицы

14.2. Добавление стиля для HTML

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

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

С HTML можно использовать любой язык стилевых таблиц. Простой язык стилевых таблиц может быть достаточным для работы большинства пользователей, но для высоко специализированных целей может потребоваться ряд других языков. Эта спецификация, например, использует стилевой язык "Cascading Style Sheets", сокращенно CSS.

Синтаксис стилевых таблиц зависит от языка стилевых таблиц.

14.2.1 Установка языка стилевых таблиц по умолчанию

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

Авторам следует использовать элемент META для установки языка стилевых таблиц по умолчанию для документа. Например, чтобы установить по умолчанию CSS, авторам следует поместить следующее объявление в элемент HEAD своих документов:

<META http-equiv="Content-Style-Type" content="text/css">

Язык стилевых таблиц по умолчанию может также устанавливаться с HTTP заголовками. Вышеуказанное объявление META эквивалентно заголовку HTTP:

Content-Style-Type: text/css

Устройства вывода должны устанавливать язык стилевых таблиц по умолчанию для документов в соответствии со следующими шагами (приоритет - от высшего к низшему):

1. Если объявления META определяют "Content-Style-Type", то последнее в потоке символов устанавливает язык стилевых таблиц по умолчанию.
2. Иначе, если заголовки HTTP определяют "Content-Style-Type", то последнее в потоке символов устанавливает язык стилевых таблиц по умолчанию.
3. Иначе, язык стилевых таблиц устанавливается как "text/css".

Документы, которые включают элементы с установленным атрибутом style, но которые не определяют язык стилевых таблиц по умолчанию, являются некорректными. Авторизированный инструментарий должен генерировать информацию о языке стилевых таблиц по умолчанию (обычно, объявления META), а устройства вывода не должны полагаться на установку по умолчанию "text/css".

14.2.2 Внутристрочная стилевая информация

Определение атрибутов

style = style [CN]

Этот атрибут определяет стилевую таблицу для текущего элемента.

Синтаксис значения атрибута style определяется языком стилевых таблиц по умолчанию. Например, для внутристрочного стиля CSS2, используйте синтаксис объявления блока, описанного в разделе 4.1.8 (без ограничений в фигурных скобках).

Следующий пример CSS устанавливает информацию о цвете и размере шрифта для текста в определенном параграфе.

<P style="font-size: 12pt; color: fuchsia">Aren't style sheets wonderful?

В каскадных стилевых таблицах CSS объявления свойств имеют форму "имя: значение" ("name : value") и разделаются друг от друга точкой с запятой.

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

14.2.3 Стилевая информация в элементе Head: элемент STYLE

<!ELEMENT STYLE - - %StyleSheet        -- style info -->
<!ATTLIST STYLE
  %i18n;                               -- lang, dir, for use with title --
  type        %ContentType;  #REQUIRED -- content type of style language --
  media       %MediaDesc;    #IMPLIED  -- designed for use with these media --
  title       %Text;         #IMPLIED  -- advisory title --
  >

Начальный тег: обязательный, конечный тег: обязательный

Определение атрибутов

type = content-type [CI]

Этот атрибут определяет язык стилевых таблиц содержания элемента и преодолевает установку языка стилевых таблиц по умолчанию. Язык стилевых таблиц определяется как тип содержания (например, "text/css"). Авторы должны предоставлять значение для этого атрибута; значения для этого атрибута по умолчанию нет.

media = media-descriptors [CI]

Этот атрибут устанавливает целевое медиа-устройство для стилевых таблиц. Он может быть единичным дескриптором медиа или списком значений, разделенных запятой. Значение по умолчанию для этого атрибута является "screen".

Атрибуты, определенные в другом месте

• lang, dir
• title

Элемент STYLE позволяет авторам помещать правила стилевой таблицы в заголовок документа. HTML разрешает любое количество элементов STYLE в разделе HEAD документа.

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

Синтаксис стилевых данных зависит от языка стилевых таблиц.

Некоторые исполнения стилевых таблиц могут позволить более широкое разнообразие правил в элементе STYLE, чем в атрибуте style. Например, CSS-правила могут объявляться внутри элемента STYLE для следующего:

• Все примеры особого элемента HTML (например, все элементы P, все элементы H1 и т.д.)
• Все примеры элемента HTML, принадлежащие особому классу (т.е. чей атрибут class установлен с каким-то значением).
• Единичные примеры элемента HTML (т.е. чей атрибут id установлен с каким-то значением).

Порядок преимущества и наследования для правил стиля зависят от языка стилевых таблиц.

В следующем объявлении CSS элемент STYLE помещает границу вокруг элемента H1 в документе и центрирует его на странице.

<HEAD>
 <STYLE type="text/css">
   H1 {border-width: 1; border: solid; text-align: center}
 </STYLE>
</HEAD>

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

<HEAD>
 <STYLE type="text/css">
   H1.myclass {border-width: 1; border: solid; text-align: center}
 </STYLE>
</HEAD>
<BODY>
 <H1 class="myclass"> This H1 is affected by our style </H1>
 <H1> This one is not affected by our style </H1>
</BODY>

В заключении, для ограничения диапазона стилевой информации до единичного примера H1, установите атрибут id:

<HEAD>
 <STYLE type="text/css">
   #myid {border-width: 1; border: solid; text-align: center}
 </STYLE>
</HEAD>
<BODY>
 <H1 class="myclass"> This H1 is not affected </H1>
 <H1 id="myid"> This H1 is affected by style </H1>
 <H1> This H1 is not affected </H1>
</BODY>

Хотя стилевая информация может устанавливаться почти для каждого элемента HTML, есть два элемента, DIV и SPAN, особенно полезные, так как они не навязывают какую-либо семантику презентации (за исключением - блочного и внутристрочного уровня). Когда эти элементы комбинируются со стилевыми таблицами, то они позволяют пользователям расширять HTML бесконечно, в частности тогда, когда используются с атрибутами class и id.

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

<HEAD>
 <STYLE type="text/css">
  SPAN.sc-ex { font-variant: small-caps }
 </STYLE>
</HEAD>
<BODY>
  <P><SPAN class="sc-ex">The first</SPAN> few words of
  this paragraph are in small-caps.
</BODY>

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

<HEAD>
 <STYLE type="text/css">
   DIV.Abstract { text-align: justify }
 </STYLE>
</HEAD>
<BODY>
 <DIV class="Abstract">
   <P>The Chieftain product range is our market winner for
     the coming year. This report sets out how to position
     Chieftain against competing products.

   <P>Chieftain replaces the Commander range, which will
     remain on the price list until further notice.
 </DIV>
</BODY>

14.2.4 Типы медиа

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

Следующие примеры объявлений применяются для элементов H1. Когда на бизнес-встрече используют проектор для показа, то все примеры будут голубыми. Когда документ будет печататься, то все примеры будут размещены по центру.

<HEAD>
 <STYLE type="text/css" media="projection">
    H1 { color: blue}
 </STYLE>

 <STYLE type="text/css" media="print">
   H1 { text-align: center }
 </STYLE>

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

 <STYLE type="text/css" media="aural">
   A { cue-before: uri(bell.aiff); cue-after: uri(dong.wav)}
 </STYLE>
</HEAD>

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