Содержание
Таблицы стилей являются грандиозным прорывом в области Web-дизайна. В научных кругах, там, где был придуман Web, больше интересуются содержимым документов, чем их внешним видом. Поскольку всё больше людей открывают для себя Web, ограничения HTML становятся постоянным источником разочарований, и авторы должны постоянно придумывать, как преодолеть эти стилистические ограничения. Хотя намерения были самыми благими - улучшить внешний вид Web-страниц - техника исполнения этого имела, к сожалению, побочные эффекты. Эта техника иногда работает, но не всегда и не везде. Она включает:
Эти способы явно увеличивали сложность страниц Web, ограничивали свободу действий, создавали проблемы совместимости, а также сложности для пользователей с физическими проблемами.
Таблицы стилей решают эти задачи, одновременно выходя за узкие рамки механизмов представления в HTML. Таблицы стилей облегчают установку межстрочных интервалов, отступов, цвета текста и фона, размера и стиля шрифта и других деталей.
Например, эта небольшая CSS (таблица стилей), находящаяся в файле "special.css", устанавливает цвет текста параграфа в зелёный и окружает его сплошной красной рамкой:
P.special {
color : green;
border: solid red;
}
Авторы могу подключить эту таблицу стилей к основному документу HTML с помощью элемента LINK:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//RU"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<LINK href="special.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<P class="special">Текст в этом параграфе должен быть зелёного цвета.
</BODY>
</HTML>
HTML 4 поддерживает следующие возможности таблиц стилей:
Таблицы
стилей, наоборот, применяются к конкретным
носителям или группам носителей. Таблица,
предполагаемая для использования с
экраном, может функционировать при печати
на принтере, но мало подходит для речевых
браузеров.
Эта спецификация позволяет Вам определить
устройства из широкого набора, в которых
данная таблица стилей может быть
применена. Это позволяет пользовательским
агентам (ПА) исключить употребление
неподходящих таблиц стилей. Языки таблиц
стилей могут включать возможности
описания в той же самой таблице
зависимости от типа носителя.
В настоящее время предлагается для решения этой проблемы включать соответствующие инструкции непосредственно в каждый элемент HTML. Информация о представлении в этом случае всегда доступна для ПА при отображении конкретного элемента.
Во многих случаях, авторы предпочитают использовать обычные таблицы стилей для групп документов. При использовании внедрённых таблиц стилей, передача стилевых установок документам действительно приводит к значительному снижению параметров работы, поскольку, для большинства документов, таблицы стилей будут размещены в локальном кэше. Общедоступность хороших таблиц стилей способствует этому.
Примечание. Образец таблицы стилей HTML 4, включённый в [CSS2], показывает обычно приемлемую информацию по умолчанию для каждого элемента. Авторы и разработчики могут найти его вполне пригодным.
Документы HTML могут содержать правила таблиц стилей непосредственно в себе или импортировать таблицы стилей.
Любой язык таблиц стилей может быть использован в HTML. Простой язык может удовлетворить потребности большинства пользователей, а другие языки больше подходят для решения узкоспециализированных задач. В этой спецификации использован язык стилей "Cascading Style Sheets" ([CSS1]), сокращённо - CSS.
Синтаксис данных стиля зависит от языка таблицы стилей.
Авторы могут специфицировать язык таблиц стилей для стилевой информации, ассоциированной с документом HTML.
Авторы должны использовать элемент META для установки в данного документе языка по умолчанию для таблиц стилей. Для этого, например, автор должен поместить следующее объявление в HEAD своих документов:
<META http-equiv="Content-Style-Type" content="text/css">
Язык по умолчанию для таблиц стилей может быть также установлен в заголовках HTTP. Предыдущее объявление META эквивалентно объявлению в заголовке HTTP:
Content-Style-Type: text/css
ПА должны определять язык по умолчанию для таблиц стилей документа в такой последовательности (приоритет по убыванию):
Документы, содержащие элементы с установленным атрибутом style, но не определившие язык по умолчанию для таблиц стилей, являются некорректными. Авторские утилиты должны генерировать информацию о языке по умолчанию для таблиц стилей (обычно в объявлении META) так, чтобы ПА не должны были обращаться к языку по умолчанию - "text/css".
Определение атрибута
Синтаксис значений атрибута style определяется языком по умолчанию для таблиц стилей. Например, для инлайн-стиля [[CSS2]] используйте синтаксис блока объявлений, описанный в разделе 4.1.8 (без фигурных скобок-ограничителей).
Этот пример CSS устанавливает цвет и шрифт текста параграфа:
<P style="font-size: 12pt; color: fuchsia">Aren't style sheets wonderful?
В CSS правильное объявление имеет форму "имя : значение" (с разделяющим двоеточием).
Для установки стилевой информации в
нескольких элементах авторы могут использовать
элемент STYLE.
Для достижения максимальной гибкости
авторы должны определять стили во внешних
таблицах стилей.
<!ELEMENT STYLE - - %StyleSheet -- информация о стиле --> <!ATTLIST STYLE %i18n; -- lang, dir, для использования с названием элемента -- type %ContentType; #НЕОБХОДИМ -- тип содержимого языка стилей -- media %MediaDesc; #ПРЕДПОЛАГАЕТСЯ -- создан для использования с этим носителем -- title %Text; #ПРЕДПОЛАГАЕТСЯ -- информативное название -- >
Начальный тег: необходим, Конечный тег: необходим
Определения атрибутов
Атрибуты, определённые в другом месте
Элемент STYLE позволяет разместить информацию стиля в "шапке" документа. 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> На этот H1 не действует </H1>
</BODY>
Хотя информация стиля может быть установлена почти для любого элемента HTML, два из них, DIV и SPAN, используются обычно так, чтобы не иметь семантики представления (кроме уровня блока и инлайн). В комбинации с таблицами стиля эти элементы позволяют пользователю расширять HTML, особенно при использовании атрибутов class и id.
В этом примере мы используем элемент SPAN для установки стиля шрифта нескольких слов в начале параграфа в малые прописные.
<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 для выравнивания по формату текста нескольких параграфов, образующих воображаемый раздел научной статьи. Эта стилевая информация может использоваться повторно для другого раздела путём установки атрибута 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>
HTML позволяет создавать документы, использующие преимущества тех носителей, где документы должны просматриваться (напр., графические дисплеи, телеэкраны, портативные устройства, речевые браузеры, тактильные брайль-устройства и т.д.). Устанавливая атрибут media, авторы дают ПА возможность выборочно загружать и использовать таблицы стилей. См. список распознаваемы 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>
Media-элемент представляет особый интерес при применении к таблице стилей, поскольку ПА может сэкономить время, запрашивая по сети только те таблицы, которые применяются непосредственно к текущему устройству. К примеру, речевые браузеры могут исключить загрузку таблиц стилей, созданных для визуального представления. См. также раздел media-зависимые каскады.
Авторы могут отделить таблицы стилей от основных документов HTML. Это даёт следующие преимущества:
HTML позволяет ассоциировать любое число внешних таблиц стилей с документом. Язык таблицы стилей определяет, сколько внешних таблиц стилей взаимодействует с документом (например, "каскадные" правила CSS).
Авторы могут определить несколько взаимоисключающих таблиц стилей, называемых альтернативными таблицами стилей. Пользователь может сделать выбор, в зависимости от своих предпочтений. К примеру, автор может определить одну таблицу стилей для малого экрана, а другую - для слабовидящих (напр., крупные шрифты). ПА должны предоставить пользователю возможность выбора из нескольких таблиц стилей.
Авторы могут определить одну из альтернативных таблиц стилей как основную (предпочтительную). ПА должны использовать такую таблицу, если только пользователь не выбрал другую.
Авторы могут группировать несколько альтернативных таблиц стилей (включая основную авторскую) под одним именем стиля. Если пользователь выбирает именованный стиль, ПА должен применить все таблицы стилей с этим именем. ПА не должны применять альтернативные таблицы стилей с другим именем стиля. В разделе спецификация внешней таблицы стилей объясняется, как именовать группу таблиц стилей.
Авторы также могут определить постоянные\persistent таблицы стилей, которые обязаны применяться ПА в дополнение к любой альтернативной таблице стилей.
ПА обязаны учитывать media-декскрипторы при использовании любой таблицы стилей.
ПА должны также давать пользователю возможность полностью отключить авторские таблицы стилей. В этом случае, ПА обязан не применять любую, постоянную или альтернативную, таблицу стилей.
Авторы определяют внешнюю таблицу стилей со следующими атрибутами элемента 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.
Языки каскадных таблиц стилей, такие как 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>
Каскад может включать таблицы стилей, применяемые для разных типов носителя. И LINK, и STYLE могут использоваться с атрибутом media. ПА в этом случае отвечает за фильтрацию тех таблиц, которые не применяются для текущего носителя.
В следующем примере мы определяем каскад, где таблица "corporate" даётся в нескольких версиях: одна для печати, другая для экрана и третья для речевых браузеров (используемая, как говорят, при чтении email в автомобиле). Таблица "techreport" применима ко всем носителям. Правило цвета, определённое элементом 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 media="screen, print" type="text/css">
p.special { color: rgb(230, 100, 180) }
</STYLE>
Если ПА хочет отобразить документ, ему нужно найти значения для свойств стиля, например, семейство шрифтов, стиль шрифта, размер, высота строки, цвет текста и так далее. Точный механизм зависит от языка таблиц стилей, но следующее описание в целом применимо:
Механизм каскадирования применяется, если несколько правил стиля применяются непосредственно к элементу. Этот механизм позволяет ПА сортировать правила по специфике, чтобы определить, какое правило применить. Если не найдено ни одного правила, следующий шаг зависит от того, может или нет наследоваться это свойство стиля. Не все свойства могут наследоваться. Для этих свойств язык таблиц стиля предоставляет значения по умолчанию для того, чтобы использовать их при отсутствии явных правил для конкретного элемента.
Если свойство может наследоваться, ПА проверяет непосредственно включаемые элементы, чтобы убедиться, применимо ли к ним правило. Этот процесс продолжается до тех пор, пока ПА находит применимые правила. Этот механизм позволяет компактно специфицировать таблицы стилей. К примеру, авторы могут определить семейство шрифтов для всех элементов внутри BODY одним правилом, которое применяется к элементу BODY.
Некоторые языки таблиц стилей поддерживают синтаксис, позволяющий авторам прятать содержимое элементов STYLE от несоответствующих ПА.
Этот пример иллюстрирует, как в CSS закомментировать содержимое элементов STYLE так, чтобы быть уверенным наверняка, что несоответствующие ПА не будут рассматривать его как текст.
<STYLE type="text/css">
<!--
H1 { color: red }
P { color: blue}
-->
</STYLE>
Этот раздел относится только к тем ПА, которые соответствуют версиям HTTP, определяющим поле заголовка Link. Обратите внимание, что HTTP 1.1, как определено в [RFC2616] ,не содержит поле заголовка Link (см. раздел 19.6.3).
Менеджеры Web-сервера могут найти удобным сконфигурировать сервер так, чтобы таблица стилей применялась к группе страниц. Заголовок HTTP Link имеет то же действие, что и элемент 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 пересылаются по email. Некоторые агенты email могут изменять порядок заголовков [RFC822]. Чтобы защитить каскадный порядок таблиц стилей, определённый заголовками Link, авторы могут использовать конкатенацию заголовков для сращивания нескольких объектов одного поля заголовка. Знак кавычек нужен только тогда, когда значения атрибутов содержат пробелы. Используйте мнемоники SGML для ссылки на символы, которые недопустимы в заголовках HTTP или email или могут быть изменены при прохождении через шлюзы.
Элементы LINK и META, ожидаемые заголовками HTTP, определены как появляющиеся явно перед каким-либо элементом LINK или META в HEAD документа.