Информация о стиле в заголовках: элемент 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".

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

Элемент

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-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>

Содержание Назад Вперед