Mobile :: HTML 4.01 :: Спецификация HTML 4.01 :: mat.net.ua мобильная версия

Таблицы стилей являются грандиозным прорывом в области Web-дизайна. В научных кругах, там, где был придуман Web, больше интересуются содержимым документов, чем их внешним видом. Поскольку все больше людей открывают для себя Web, ограничения HTML становятся постоянным источником разочарований, и авторы должны постоянно придумывать, как преодолеть эти стилистические ограничения. Хотя намерения были самыми благими - улучшить внешний вид Web-страниц - техника исполнения этого имела, к сожалению, побочные эффекты. Эта техника иногда работает, но не всегда и не везде. Она включает:

использование подходящих расширений HTML;

конвертирование текста в изображение;

использование изображений для управления пробелами;

использование таблиц для форматирования текста;

написание программ вместо использования HTML.

Эти способы явно увеличивали сложность страниц 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 поддерживает следующие возможности таблиц стилей:

Гибкость размещения информации о стиле

Размещение таблиц стилей в отдельных файлах облегчает их повторное использование. Иногда необходимо включить инструкции представления в документ, к которому они применяются, путем группировки их в начале документа или установкой в атрибутах по всему телу документа. Чтобы облегчить работу со стилями на базе сайта, эта спецификация описывает, как использовать заголовки-"шапки"/headers HTTP для установки применения таблиц стилей в документах.

Независимость от конкретного языка таблицы стилей

Эта спецификация не привязывает HTML к какому-то определенному языку таблиц стилей. Это позволяет использовать разные языки, например, простой для большинства пользователей и более сложный - для пользователей с узко специализированными потребностями. Примеры, данные ниже, используют язык CSS (Cascading Style Sheets) [CSS1], но возможны и другие языки таблиц стилей.

Каскадирование

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

Зависимость от типа носителя

HTML позволяет авторам определять media-независимые документы. Это дает пользователям возможность использовать Web-страницы на разных устройствах и носителях информации, например, графические дисплеи компьютеров, использующих Windows, Macintosh OS и X11, телевизионные устройства, специально адаптированные телефоны и портативные устройства на базе PDA, речевые браузеры и тактильные брайль-устройства.

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

Альтернативные стили

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

Возражения в связи с ухудшением параметров работы

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

В настоящее время предлагается для решения этой проблемы включать соответствующие инструкции непосредственно в каждый элемент HTML. Информация о представлении в этом случае всегда доступна для ПА при отображении конкретного элемента.

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

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

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

Документы HTML могут содержать правила таблиц стилей непосредственно в себе или импортировать таблицы стилей.

Любой язык таблиц стилей может быть использован в HTML. Простой язык может удовлетворить потребности большинства пользователей, а другие языки больше подходят для решения узкоспециализированных задач. В этой спецификации использован язык стилей "Cascading Style Sheets" ([CSS1]), сокращенно - CSS.

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

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

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

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

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

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

Content-Style-Type: text/css

ПА должны определять язык по умолчанию для таблиц стилей документа в такой последовательности (приоритет по убыванию):

Если какое-либо объявление META устанавливает "Content-Style-Type", это выражение определяет язык по умолчанию для таблиц стилей.

Иначе, если какое-либо объявление заголовка HTTP устанавливает "Content-Style-Type", тогда данное выражение определяет язык по умолчанию для таблиц стилей.

Иначе языком по умолчанию является "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 правильное объявление имеет форму "имя : значение" (с разделяющим двоеточием).

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

14.2.3 Информация о стиле в заголовках: элемент STYLE

<!ELEMENT STYLE - - %StyleSheet -- информация о стиле -->
<!ATTliST STYLE
 %i18n; -- lang, dir, для использования с названием элемента --
 type %ContentType; #НЕОБХОДИМ -- тип содержимого языка стилей --
 media %MediaDesc; #ПРЕДПОЛАГАЕТСЯ -- создан для использования с этим носителем --
 title %Text; #ПРЕДПОЛАГАЕТСЯ -- информативное название --
 >

Начальный тег: необходим, Конечный тег: необходим

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

type = Content-Type [CI]

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

media = media-дескрипторы [CI]

Определяет предполагаемый носитель для стилевой информации. Это может быть один media-дескриптор или список разделенных запятыми значений. Значение по умолчанию для этого атрибута - "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"> В этом 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-exfont-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.Abstracttext-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, авторы дают ПА возможность выборочно загружать и использовать таблицы стилей. См. список распознаваемы media-дескрипторов.

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

<HEAD>
 <STYLE type="text/css" media="projection">
 H1color: blue}
 </STYLE>

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

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

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

Media-элемент представляет особый интерес при применении к таблице стилей, поскольку ПА может сэкономить время, запрашивая по сети только те таблицы, которые применяются непосредственно к текущему устройству. К примеру, речевые браузеры могут исключить загрузку таблиц стилей, созданных для визуального представления. См. также раздел media-зависимые каскады.

14.3 Внешние таблицы стилей

Авторы могут отделить таблицы стилей от основных документов HTML. Это дает следующие преимущества:

авторы и менеджеры Web-сайтов могут разделять использование таблиц стилей среди нескольких документов (и сайтов);

авторы могут изменять таблицы стилей без изменения самих документов;

ПА могут выборочно загружать таблицы стилей (в зависимости от media-дескриптора).

14.3.1 Основные и альтернативные таблицы стилей

HTML позволяет ассоциировать любое число внешних таблиц стилей с документом. Язык таблицы стилей определяет, сколько внешних таблиц стилей взаимодействует с документом (например, "каскадные" правила CSS).

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

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

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

Авторы также могут определить постоянные\persistent таблицы стилей, которые обязаны применяться ПА в дополнение к любой альтернативной таблице стилей.

ПА обязаны учитывать media-декскрипторы при использовании любой таблицы стилей.

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

14.3.2 Спецификация внешней таблицы стилей

Авторы определяют внешнюю таблицу стилей со следующими атрибутами элемента LINK:

href указывает на расположение файла таблицы стилей. Значением href является URI;

значение атрибута type указывает язык связанного ресурса (таблицы стилей). Это позволяет ПА избегать загрузки таблиц стилей для не поддерживаемого языка таблиц стилей;

определить, является таблица стилей постоянной, основной или альтернативной:

чтобы сделать таблицу постоянной, установите атрибут rel в "stylesheet" и не устанавливайте атрибут title;

чтобы сделать таблицу основной, установите атрибут rel в "stylesheet" и именуйте таблицу с помощью атрибута title;

чтобы сделать таблицу альтернативной, установите атрибут rel в "alternate stylesheet" и именуйте таблицу с помощью атрибута title.

ПА должен предоставлять пользователю возможность видеть список альтернативных стилей и выбрать из него. Значение атрибута 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.specialcolor: rgb(230, 100, 180) }
</STYLE>

14.4.1 Media-зависимые каскады

Каскад может включать таблицы стилей, применяемые для разных типов носителя. И 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.specialcolor: rgb(230, 100, 180) }
</STYLE>

14.4.2 Наследование и каскадирование

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

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

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

14.5 Скрытие данных стиля от пользовательских агентов (ПА)

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

Этот пример иллюстрирует, как в CSS закомментировать содержимое элементов STYLE так, чтобы быть уверенным наверняка, что несоответствующие ПА не будут рассматривать его как текст.

<STYLE type="text/css">
<!--
 H1color: red }
 pcolor: blue}
 -->
</STYLE>

14.6 Ссылки на таблицы стилей в заголовках HTTP

Этот раздел относится только к тем ПА, которые соответствуют версиям 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 документа.

предыдущий следующий содержание элементы атрибуты индекс

Мобильная версия

Сайт для компьютера
http://www.mat.net.ua