14 Таблицы стилейСодержание 14.1 Введение в таблицы стилейТаблицы стилей представляют наибольшее достижение для дизайнеров Web-страниц, расширяя возможности улучшения внешнего вида страниц. В научных средах, в которых и зародилась Web, люди более сосредоточены на содержании документов, нежели на их представлении. По мере открытия Web прочими людьми ограничения HTML стали источником разочарований, и авторам пришлось уклоняться от стилистических ограничений HTML. Хотя намерения и были добрыми - улучшение представления Web-страниц, -- технологии имели нежелательные побочные эффекты. Эти технологии работали только для некоторых, только иногда, но не для всех и не всегда. Сюда включаются:
Эти технологии существенно усложняют Web-страницы, ограничивают гибкость, создают проблемы взаимодействия и создают сложности для людей с физическими недостатками. Таблицы стилей решают эти проблемы, одновременно превосходя ограниченные механизмы представления в HTML. Таблицы стилей упрощают определение интервалов между строками текста, отступов, цветов, используемых для текста и фона, размера и стиля шрифтов и другой информации . Например, следующая таблица стилей CSS (хранящаяся в файле "special.css") зеленый устанавливает цвет текста абзаца и окружает его сплошной красной рамкой:
P.special {
color : green;
border: solid red;
}
Авторы могут связывать таблицы стилей с исходным документом HTML с помощью элемента LINK:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40">
<HTML>
<HEAD>
<LINK href="special.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<P class="special">В этом абзаце текст должен быть зеленым.
</BODY>
</HTML>
HTML 4.0 обеспечивает поддержку следующих функций таблиц стилей:
14.2 Как добавить стиль в HTMLПримечание. В примере таблицы стилей по умолчанию для HTML 4.0, включенном в [CSS2], выражена общепринятая информация о стиле для каждого элемента. Авторы могут воспользоваться этим ресурсом. Документы в формате HTML могут содержать правила таблиц стилей непосредственно или могут импортировать таблицы стилей. В HTML можно использовать все языки таблиц стилей. Простого языка таблиц стилей может быть достаточно для большинства пользователей, в то время как другие языки могут подходить для более специализированных задач. В примерах в данной спецификации используется язык "Каскадные таблицы стилей" ([CSS1]), сокращенно 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 Агенты пользователей должны определять язык таблиц стилей по умолчанию для документа в соответствии со следующими шагами (от высшего приоритета к низшему):
Документы, включающие элементы, в которых устанавливается атрибут style, но не определяется язык таблиц стилей по умолчанию, являются некорректными. Средства разработки должна генерировать информацию о языке таблиц стилей по умолчанию (обычно с помощью объявлений META), чтобы агенты пользователей не полагались на язык по умолчанию "text/css". 14.2.2 Встроенная информация о стилеОпределения атрибутов style Атрибут style определяет информацию о стиле одного элемента. Язык таблиц стилей встроенных правил стиля определяется языком таблиц стилей по умолчанию. Синтаксис данных стиля зависит от языка таблиц стилей. В данном примере устанавливается информация о цвете и размере шрифта текста определенного абзаца. <P style="font-size: 12pt; color: fuchsia">Что за прелесть эти таблицы стилей! В CSS объявления свойств имеют форму "имя : значение" и разделяются точкой с запятой. Атрибут style может использоваться для применения определенного стиля к отдельному элементу HTML. Если стиль повторно используется для нескольких элементов, авторы должны использовать элемент STYLE для перегруппировки этой информации. Для оптимальной гибкости авторам следует определять стили во внешних таблицах стилей. 14.2.3 Информация о стиле в заголовке: элемент STYLE<!ELEMENT STYLE - - %StyleSheet -- информация о стиле --> <!ATTLIST STYLE %i18n; -- lang, dir, для использования с заголовком -- type %ContentType; #REQUIRED - тип содержимого языка стилей -- media %MediaDesc; #IMPLIED -- для использования с этими устройствами -- title %Text; #IMPLIED -- рекомендуемый заголовок -- > Начальный тэг: обязателен, Конечный тэг: обязателен Определения атрибутов
атрибуты, определяемые в другом месте Элемент STYLE позволяет авторам помещать правила таблиц стилей в раздел head документа. В HTML допустимо любое число элементов STYLE в разделе HEAD. Агенты пользователей, не поддерживающие таблицы стилей или не поддерживающие определенный язык таблиц стилей, используемый в элементе STYLE, не должны показывать элемент STYLE. Ошибкой будет генерировать его содержимое как часть текста документа. Некоторые языки таблиц стилей поддерживают синтаксис для того, чтобы не показывать содержимое несоответствующим спецификации агентам пользователей. Синтаксис данных стиля зависит от языка таблицы стилей. Некоторые реализации таблиц стилей могут поддерживать большее разнообразие правил для элемента STYLE, чем в атрибуте style. Например, в CSS правила могу объявляться в элементе STYLE для:
Правила приоритета и наследования правил таблиц стилей зависят от языка таблиц. Следующее объявление 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"> Наш стиль влияет на этот заголовок уровня H1</H1>
<H1> А на этот заголовок наш стиль не влияет</H1>
</BODY>
И, наконец, для ограничения области действия информации о стиле единственным экземпляром элемента H1, установите атрибут id:
<HEAD>
<STYLE type="text/css">
#myid {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="myclass"> На этот заголовок H1 стиль не влияет</H1>
<H1 id="myid"> А на этот влияет </H1>
<H1> На этот опять не влияет </H1>
</BODY>
Хотя информация о стиле может устанавливаться почти для всех элементов HTML, два элемента, DIV и SPAN, особенно полезны тем, что они не накладывают никакой семантики представления (кроме block-level vs. inline). Вместе с таблицами стилей эти элементы позволяют пользователям неограниченно расширять язык HTML, особенно при использовании атрибутов class и id. В следующем примере элемент SPAN используется для установки малых прописных букв для стиля шрифта первых нескольких слов абзаца.
<HEAD>
<STYLE type="text/css">
SPAN.sc-ex { font-variant: small-caps }
</STYLE>
</HEAD>
<BODY>
<P><SPAN class="sc-ex">Первые несколько</SPAN> слов абзаца выделены малыми прописными буквами.
</BODY>
В следующем примере мы используем элемент DIV и атрибут class для установки выравнивания текста для ряда абзацев, составляющих введение в научную статью. Информация о стиле может повторно использоваться для других разделов введения путем установки атрибута 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>
Управление устройствами особенно интересно при использовании с внешними таблицами стилей, поскольку агенты пользователей могут сэкономить время, загружая из сети только таблицы стилей, применяющиеся к текущему устройству. Например, речевые браузеры могут не загружать таблицы стилей, разработанные для визуального представления. Подробнее см. в разделе о зависящих от устройств каскадах. 14.3 Внешние таблицы стилейАвторы могут отделять таблицы стилей от документов HTML. Это дает следующие преимущества:
14.3.1 Предпочитаемые и альтернативные таблицы стилейHTML позволяет авторам связывать с документом любое число внешних таблиц стилей. Язык таблиц стилей определяет взаимодействие нескольких внешних таблиц стилей (например, правила "каскадов" CSS). Авторы могут указать ряд взаимоисключающих таблиц стилей, называемых альтернативными. Пользователи могут выбирать таблицы, которые им больше нравятся. Например, автор может указать один стиль для небольших экранов, другой - для слабовидящих пользователей (например, с использованием крупного шрифта). Агенты пользователей должны предоставлять пользователям возможности выбора одной из альтернативных таблиц. Автор может указать, что одна из альтернатив является предпочтительной. Агенты пользователей должны применять предпочитаемые автором таблицы стилей, если пользователь не выбрал другую альтернативу. Авторы могут сгруппировать несколько альтернативных таблиц стилей (включая предпочитаемые автором) под одним именем стиля. Если пользователь выбирает именованный стиль, агент пользователя должен применять все таблицы стилей с этим именем. Агенты пользователей не должны применять альтернативные таблицы стилей с другим именем стиля. Как присвоить имя группе стилей, описано в разделе об определении внешних таблиц стилей. При применении таблицы стилей агенты пользователей должны учитывать дескрипторы устройств. Агенты пользователей также должны позволять пользователям полностью отключать таблицы стилей автора; в этом случае агент пользователя не должен применять ни одну из таблиц стилей. 14.3.2 Указание внешних таблиц стилейАвторы указывают внешние таблицы стилей с помощью атрибутов элемента LINK:
Агенты пользователей должны обеспечивать пользователям средства просмотра и выбора таблицы стилей из списка альтернатив. Для атрибута title рекомендуется устанавливать значение, которое будет представлять эту таблицу в списке. В этом примере мы сначала определяем постоянную таблицу стилей, находящуюся в файле mystyle.css: <LINK href="mystyle.css" rel="stylesheet" type="text/css"> Установка атрибута title назначает ее предпочитаемой автором таблицей: <LINK href="mystyle.css" title="Compact" rel="stylesheet" type="text/css"> Добавление ключевого слова "alternate" а атрибут rel сделает ее альтернативной таблицей стилей: <LINK href="mystyle.css" title="Medium" rel="alternate stylesheet" type="text/css"> Подробнее о внешних таблицах стилей Вы можете узнать в разделе о ссылках и внешних таблицах стилей. Авторы также могут использовать для установки предпочитаемой таблицы стилей элемент META. Например, чтобы установить предпочитаемую таблицу стилей "compact" (см. предыдущий пример), авторы могут включить в элемент HEAD следующую строку: <META http-equiv="Default-Style" content="compact"> Предпочитаемую таблицу стилей можно также указать с помощью заголовков HTTP. Объявление META выше эквивалентно заголовку HTTP: Default-Style: "compact" Если предпочитаемая таблица стилей указывается двумя или более элементами META или заголовками HTTP, преимущество имеет последнее объявление. Считается, что заголовки HTTP обрабатываются раньше, чем объявления HEAD. Если предпочитаемая таблица стилей задается двумя или более элементами LINK, преимущество имеет первая. Предпочитаемые таблицы стилей, задаваемые с помощью META или заголовков HTTP имеют преимущество над таблицами, задаваемыми элементом LINK. 14.4 Каскады таблиц стилейКаскадные языки таблиц стилей, такие как CSS, позволяют использовать информацию о стиле из нескольких источников. Однако не все языки таблиц стилей поддерживают каскады. Чтобы определить каскад, авторы указывают последовательность элементов LINK и/или STYLE. Каскад информации таблиц стилей производится в порядке указания элементов в разделе HEAD. Примечание. В данной спецификации не описано каскадирование таблиц стилей разных языков. Авторам следует избегать смешивания языков. В следующем примере мы определяем две альтернативные таблицы стилей с именем "compact". Если пользователь выбирает стиль "compact", агент пользователя должен применять обе внешние таблицы, а также постоянную таблицу "common.css". Если пользователь выбирает стиль "big print", применяться будут только альтернативная таблица "bigprint.css" и постоянная таблица "common.css". <LINK rel="alternate stylesheet" title="compact" href="small-base.css" type="text/css"> <LINK rel="alternate stylesheet" title="compact" href="small-extras.css" type="text/css"> <LINK rel="alternate stylesheet" title="big print" href="bigprint.css" type="text/css"> <LINK rel="stylesheet" href="common.css" type="text/css"> Вот пример каскада, в котором задействованы оба элемента - LINK и STYLE.
<LINK rel="stylesheet" href="corporate.css" type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE type="text/css">
p.special { color: rgb(230, 100, 180) }
</STYLE>
14.4.1 Каскады, зависящие от устройствКаскад может включать таблицы стилей, применяемые к различным устройствам. Элементы LINK и STYLE могут использоваться с атрибутом media. Агент пользователя несет ответственность за отфильтровывание таблиц стилей, не применяющихся к текущему устройству.
В следующем примере мы определяем каскад, в котором таблица стилей "corporate" представляется в нескольких версиях: одна для печати, другая для экранного представления, третья для речевых браузеров (полезная, например, при чтении электронной почты в машине). Таблица "techreport" применяется ко всем устройствам. Цветная rule, определяемая элементом STYLE, используется для печати и для экрана, но не для звукового представления.
<LINK rel="stylesheet" media="aural" href="corporate-aural.css" type="text/css">
<LINK rel="stylesheet" media="screen" href="corporate-screen.css" type="text/css">
<LINK rel="stylesheet" media="print" href="corporate-print.css" type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE type="text/css">
p.special { color: rgb(230, 100, 180) }
</STYLE>
14.4.2 Наследование и каскадыЕсли агент пользователя собирается представлять документ, ему необходимо найти значения для свойств стиля, например, семейство шрифтов, начертание, размер шрифта, длину строки, цвет текста и т.д. Точный механизм зависит от языка таблиц стилей, но в общем применяется следующее: Механизм каскадирования используется, если к элементу применяется ряд правил стиля. Этот механизм позволяет агенту пользователя сортировать правила по специфичности и определять, какое правило нужно применить. Если правило невозможно найти, следующий шаг зависит от наследования свойства. Не все свойства могут наследоваться. Для этих свойств язык таблиц стилей обеспечивает значения по умолчанию для использования в случае отсутствия явных правил для конкретного элемента. Если свойство может наследоваться, агент пользователя проверяет непосредственно элемент, в который вложен текущий элемент, и ищет правило, применяющееся к нему. Этот процесс продолжается до тех пора, пока применимое правило не будет обнаружено. Этот механизм обеспечивает компактное задание таблиц стилей. Например, авторы могут указать семейство шрифтов для всех элементов в разделе BODY с помощью одного правила для элемента BODY. 14.5 Как скрыть информацию о стиле от агентов пользователейНекоторые языки таблиц стилей поддерживают синтаксис, позволяющий авторам скрывать содержимое элементов STYLE от несоответствующих агентов пользователей. В данном примере для CSS показано, как можно скрыть содержимое элементов STYLE, чтобы гарантировать, что более старые несоответствующие спецификации агенты пользователей не будут представлять их в виде текста.
<STYLE type="text/css">
<!--
H1 { color: red }
P { color: blue}
-->
</STYLE>
14.6 Привязка таблиц стилей с помощью заголовков HTTPМенеджеры Web-серверов могут сконфигурировать сервер таким образом, чтобы таблица стилей применялась к группе страниц. Заголовок HTTP Link, описанный в [RFC2068], раздел 19.6.1.2, действует так же, как элемент LINK, с теми же атрибутами и значениями. Несколько заголовков Link соответствуют нескольким элементам LINK в том же порядке. Например, Link: <http://www.acme.com/corporate.css>; REL=stylesheet соответствует: <LINK rel="stylesheet" href="http://www.acme.com/corporate.css"> Можно задать несколько альтернативных стилей с помощью нескольких заголовков Link, а затем использовать атрибут rel для определения стиля по умолчанию. В следующем примере стиль "compact" применяется по умолчанию, поскольку в нем отсутствует ключевое слово "alternate" для атрибута rel. Link: <compact.css>; rel="stylesheet"; title="compact" Link: <bigprint.css>; rel="alternate stylesheet"; title="big print" Это работает и при отправке документов HTML по электронной почте. Некоторые агенты электронной почты могут изменять порядок заголовков [RFC822]. Чтобы защитить стиль от изменения порядка каскадов для таблиц, задаваемых заголовками Link, авторы могут использовать объединение заголовков для объединения нескольких экземпляров одного и того же поля заголовка. Кавычки необходимы только в случае, если значения атрибутов включают пробелы. Используйте SGML entities для ссылок на символы, недопустимые в заголовках HTTP или электронной почты или символов, которые могут быть изменены при передаче через шлюзы. Элементы LINK и META, implied заголовками HTTP, определяются как встреченные раньше явного элемента LINK and META а разделе HEAD документа. |