Встроенная информация о стиле
Определения атрибутов
style = style[CN]
Этот атрибут определяет информацию о стиле текущего элемента.
<SPAN class=index-inst title="style sheet::inline rules">style Атрибут style определяет информацию о стиле одного элемента.</SPAN> Язык таблиц стилей встроенных правил стиля определяется языком таблиц стилей по умолчанию.Синтаксис данных стиля зависит от языка таблиц стилей. <DIV class=example>
В данном примере устанавливается информация о цвете и размере шрифта текста определенного абзаца.
<P style="font-size: 12pt; color: fuchsia">Что за прелесть эти таблицы стилей!
В CSS объявления свойств имеют форму "имя : значение" и разделяются точкой с запятой.
Атрибут style может использоваться для применения определенного стиля к отдельному элементу HTML. Если стиль повторно используется для нескольких элементов, авторы должны использовать элемент STYLE для перегруппировки этой информации. Для оптимальной гибкости авторам следует определять стили во внешних таблицах стилей.
Информация о стиле в заголовке: элемент STYLE
<!ELEMENT STYLE - -%StyleSheet -- информация о стиле -->
<!ATTLIST STYLE
%i18n; -- lang, dir, для использования с заголовком --
type %ContentType; #REQUIRED - тип содержимого языка стилей --
media %MediaDesc; #IMPLIED -- для использования с этими устройствами --
title %Text; #IMPLIED -- рекомендуемый заголовок --
>
Начальный тэг: обязателен, Конечный тэг: обязателен
Определения атрибутов
type = content-type [CI]
Этот атрибут определяет язык таблиц стилей для содержимого элемента и имеет приоритет над языком таблиц стилей, ипользуемы. Язык таблиц стилей указывается как тип содержимого (например, "text/css"). Авторы должны указать значение для этого атрибута; для него нет значения по умолчанию.
media = дескрипторы устройств [CI]
Этот атрибут задает целевое устройство для информации о стиле. Это может быть один дескриптор устройства или список дескрипторов, разделенных запятыми. По умолчанию устанавливается значение "screen".
атрибуты, определяемые в другом месте
lang (информация о языке), dir (направление текста)
Элемент STYLE позволяет авторам помещать правила таблиц стилей в раздел <SPAN class=index-inst title="style sheet::rules in HEAD">head</SPAN> документа. В HTML допустимо любое число элементов STYLE в разделе HEAD.
Агенты пользователей, не поддерживающие таблицы стилей или не поддерживающие определенный язык таблиц стилей, используемый в элементе STYLE, не должны показывать элемент STYLE. <SPAN class=index-inst title="error::rendering style rules in STYLE">Ошибкой будет</SPAN> генерировать его содержимое как часть текста документа. Некоторые языки таблиц стилей поддерживают синтаксис для того, чтобы не показывать содержимое несоответствующим спецификации агентам пользователей.
Синтаксис данных стиля зависит от языка таблицы стилей.
Некоторые реализации таблиц стилей могут поддерживать большее разнообразие правил для элемента STYLE, чем в атрибуте style. Например, в CSS правила могу объявляться в элементе STYLE для:
Всех экземпляров определенного элемента языка HTML (например, для всех элементов P, всех элементов H1 и т.д.)
Всех экземпляров элемента HTML, принадлежащих определенному классу (т.е. для атрибута class которых установлено определенное значение).
Отдельных экземпляров элемента языка HTML (т.е. для атрибута id которого установлено определенное значение).
Правила приоритета и наследования правил таблиц стилей зависят от языка таблиц. <DIV class=example>
Следующее объявление 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>
</DIV>
<SPAN class=index-inst title="style sheet::used with DIV and SPAN">Хотя информация о стиле</SPAN> может устанавливаться почти для всех элементов HTML, два элемента, DIV и SPAN, особенно полезны тем, что они не накладывают никакой семантики представления (кроме blok-level vs. inline). Вместе с таблицами стилей эти элементы позволяют пользователям неограниченно расширять язык HTML, особенно при использовании атрибутов class и id. <DIV class=example>
В следующем примере элемент SPAN используется для установки малых прописных букв для стиля шрифта первых нескольких слов абзаца.
<HEAD>
<STYLE type="text/css">
SPAN.sc-ex { font-variant: small-caps }
</STYLE>
</HEAD>
<BODY>
<P><SPAN class="sc-ex">Первые несколько</SPAN> слов абзаца выделены малыми прописными буквами.
</BODY>
</DIV><DIV class=example>
В следующем примере мы используем элемент 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>
</DIV>
<SPAN class=index-inst title="media::used with style sheets|style sheet::target media for">Типы устройств</SPAN>
HTML позволяет авторам создавать документы, использующие характеристики устройства, на котором будет представляться документ (например, графические дисплеи, телевизионные экраны, переносные устройства, речевые браузеры, тактильные устройства на базе азбуки Бройля и т.д.). С помощью атрибута media авторы могут позволить агентам пользователей загружать и применять таблицы стилей выборочно. См. список распознаваемых дескрипторов устройств. <DIV class=example>
Объявления в следующем примере применяются к элементам 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>
</DIV>
Управление устройствами особенно интересно при использовании с внешними таблицами стилей, поскольку агенты пользователей могут сэкономить время, загружая из сети только таблицы стилей, применяющиеся к текущему устройству. Например, речевые браузеры могут не загружать таблицы стилей, разработанные для визуального представления. Подробнее см. в разделе о зависящих от устройств каскадах.
<SPAN class=index-inst title="style sheet::external">Внешние таблицы стилей</SPAN>
Авторы могут отделять таблицы стилей от документов HTML. Это дает следующие преимущества:
Авторы и менеджеры Web-сайтов могут совместно использовать таблицы стилей в ряде документов (и сайтов).
Авторы могут изменять таблицы стилей без изменения документа.
Агенты пользователей могут загружать таблицы стилей выборочно (в зависимости от описаний устройств).
Предпочитаемые и альтернативные таблицы стилей
HTML позволяет авторам связывать с документом любое число внешних таблиц стилей. Язык таблиц стилей определяет взаимодействие нескольких внешних таблиц стилей (например, правила "каскадов" CSS).
<SPAN class=index-def title="style sheet::alternate|alternate style sheets">Авторы могут указать ряд взаимоисключающих таблиц стилей, называемых альтернативными.</SPAN> Пользователи могут выбирать таблицы, которые им больше нравятся. Например, автор может указать один стиль для небольших экранов, другой - для слабовидящих пользователей (например, с использованием крупного шрифта). Агенты пользователей должны предоставлять пользователям возможности выбора одной из альтернативных таблиц.
<SPAN class=index-def title="style sheet::preferred|preferred style sheets">Автор может указать, что одна из альтернатив является предпочтительной.</SPAN> Агенты пользователей должны применять предпочитаемые автором таблицы стилей, если пользователь не выбрал другую альтернативу.
Авторы могут сгруппировать несколько альтернативных таблиц стилей (включая предпочитаемые автором) под одним именем стиля. Если пользователь выбирает именованный стиль, агент пользователя должен применять все таблицы стилей с этим именем. Агенты пользователей не должны применять альтернативные таблицы стилей с другим именем стиля. Как присвоить имя группе стилей, описано в разделе об определении внешних таблиц стилей.
<SPAN class=index-def title="style sheet::persistent|persistent style sheets">Авторы также могут указать постоянные таблицы стилей, которые агенты пользователей должны применять в дополнение к альтернативным таблицам стилей.</SPAN>
При применении таблицы стилей агенты пользователей должны учитывать дескрипторы устройств.
Агенты пользователей также должны позволять пользователям полностью отключать таблицы стилей автора; в этом случае агент пользователя не должен применять ни одну из таблиц стилей.
<SPAN class=index-inst title="style sheet::specification of external|link::and external style sheets">Указание внешних таблиц стилей</SPAN>
Авторы указывают внешние таблицы стилей с помощью атрибутов элемента LINK:
Установите в атрибуте href местоположение файла таблицы стилей. Значением атрибута href должен быть URI.
Установите для атрибута type значение, указывающее язык связанного ресурса (таблицы стилей). Это позволяет агентам пользователей не загружать таблицы стилей, использующие неподдерживаемые языки.
Укажите, является ли таблицы стилей постоянно, предпочитаемой или альтернативной:
Чтобы таблицы была постоянной, установите для атрибута rel значение "stylesheet", и не устанавливайте атрибут titel.
Чтобы таблица была предпочитаемой, установите для атрибута rel значение "stylesheet", и дайте таблице имя с помощью атрибута titel.
Чтобы указать альтернативную таблицу, установите для атрибута rel значение "alternate stylesheet" а дайте таблице имя с помощью атрибута tile.
Агенты пользователей должны обеспечивать пользователям средства просмотра и выбора таблицы стилей из списка альтернатив. Для атрибута title рекомендуется устанавливать значение, которое будет представлять эту таблицу в списке. <DIV class=example>
В этом примере мы сначала определяем постоянную таблицу стилей, находящуюся в файле 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">
</DIV>
Подробнее о внешних таблицах стилей Вы можете узнать в разделе о ссылках и внешних таблицах стилей.
<SPAN class=index-inst title="HTTP::Default-Style header|style sheet::specification of preferred">Авторы также могут использовать для установки предпочитаемой таблицы стилей элемент META.</SPAN> Например, чтобы установить предпочитаемую таблицу стилей "compact" (см. предыдущий пример), авторы могут включить в элемент HEAD следующую строку:
<DIV class=example>
<META http-equiv="Default-Style" content="compact">
</DIV>
Предпочитаемую таблицу стилей можно также указать с помощью заголовков HTTP. Объявление META выше эквивалентно заголовку HTTP: <DIV class=example>
Default-Style: "compact"
</DIV>
Если предпочитаемая таблица стилей указывается двумя или более элементами META или заголовками HTTP, преимущество имеет последнее объявление. Считается, что заголовки HTTP обрабатываются раньше, чем объявления HEAD.
Если предпочитаемая таблица стилей задается двумя или более элементами LINK, преимущество имеет первая.
редпочитаемые таблицы стилей, задаваемые с помощью META или заголовков HTTP имеют преимущество над таблицами, задаваемыми элементом LINK.
<SPAN class=index-inst title="style sheet::cascading|cascading style sheets">Каскады таблиц стилей</SPAN>
Каскадные языки таблиц стилей, такие как CSS, позволяют использовать информацию о стиле из нескольких источников. Однако не все языки таблиц стилей поддерживают каскады. Чтобы определить каскад, авторы указывают последовательность элементов LINK и/или STYLE. Каскад информации таблиц стилей производится в порядке указания элементов в разделе HEAD. <DIV class=note>
В следующем примере мы определяем две альтернативные таблицы стилей с именем "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">
</DIV><DIV class=example>
Вот пример каскада, в котором задействованы оба элемента - 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>
</DIV>
<SPAN class=index-inst title="media::and external style sheets|link::and media-dependent style sheets">Каскады, зависящие от устройств</SPAN>
Каскад может включать таблицы стилей, применяемые к различным устройствам. Элементы LINK и STYLE могут использоваться с атрибутом media. Агент пользователя несет ответственность за отфильтровывание таблиц стилей, не применяющихся к текущему устройству. <DIV class=example>
В следующем примере мы определяем каскад, в котором таблица стилей "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>
</DIV>
Наследование и каскады
Если агент пользователя собирается представлять документ, ему необходимо найти значения для свойств стиля, например, семейство шрифтов, начертание, размер шрифта, длину строки, цвет текста и т.д. Точный механизм зависит от языка таблиц стилей, но в общем применяется следующее:
Механизм каскадирования используется, если к элементу применяется ряд правил стиля. Этот механизм позволяет агенту пользователя сортировать правила по специфичности и определять, какое правило нужно применить. Если правило невозможно найти, следующий шаг зависит от наследования свойства. Не все свойства могут наследоваться. Для этих свойств язык таблиц стилей обеспечивает значения по умолчанию для использования в случае отсутствия явных правил для конкретного элемента.
Если свойство может наследоваться, агент пользователя проверяет непосредственно элемент, в который вложен текущий элемент, и ищет правило, применяющееся к нему. Этот процесс продолжается до тех пора, пока применимое правило не будет обнаружено. Этот механизм обеспечивает компактное задание таблиц стилей. Например, авторы могут указать семейство шрифтов для всех элементов в разделе BODY с помощью одного правила для элемента BODY.
<SPAN class=index-inst title="user agent::and style data|style sheet::comments to hide|comments::used to hide style sheet data">Как скрыть информацию о стиле от агентов пользователей</SPAN>
Некоторые языки таблиц стилей поддерживают синтаксис, позволяющий авторам скрывать содержимое элементов STYLE от несоответствующих агентов пользователей. <DIV class=example>
В данном примере для CSS показано, как можно скрыть содержимое элементов STYLE, чтобы гарантировать, что более старые несоответствующие спецификации агенты пользователей не будут представлять их в виде текста.
<STYLE type="text/css">
<!--
H1 { color: red }
P { color: blue}
-->
</STYLE>
</DIV>
<SPAN class=index-inst title="HTTP::used to link external style sheets">Привязка таблиц стилей с помощью заголовков HTTP</SPAN>
Менеджеры 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 для определения стиля по умолчанию. <DIV>
В следующем примере стиль "compact" применяется по умолчанию, поскольку в нем отсутствует ключевое слово "alternate" для атрибута rel.
Link: <compact.css>; rel="stylesheet"; title="compact"
Link: <bigprint.css>; rel="alternate stylesheet"; title="big print"
</DIV>
Это работает и при отправке документов HTML по электронной почте. Некоторые агенты электронной почты могут изменять порядок заголовков. Чтобы защитить стиль от изменения порядка каскадов для таблиц, задаваемых заголовками Link, авторы могут использовать объединение заголовков для объединения нескольких экземпляров одного и того же поля заголовка. Кавычки необходимы только в случае, если значения атрибутов включают пробелы. Используйте SGML entities для ссылок на символы, недопустимые в заголовках HTTP или электронной почты или символов, которые могут быть изменены при передаче через шлюзы.
Элементы LINK и META, implied заголовками HTTP, определяются как встреченные раньше явного элемента LINK and META а разделе HEAD документа.