Опубликован: 19.05.2006 | Доступ: свободный | Студентов: 9814 / 1465 | Оценка: 4.29 / 4.03 | Длительность: 22:29:00
ISBN: 978-5-94774-648-8
Лекция 14:

Таблицы стилей

< Лекция 13 || Лекция 14: 1234 || Лекция 15 >

Добавление стиля в 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

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

  1. Если какое-либо объявление META устанавливает " Content-Style-Type ", это выражение определяет язык по умолчанию для таблиц стилей.
  2. Иначе, если какое-либо объявление заголовка HTTP устанавливает " Content-Style-Type ", тогда данное выражение определяет язык по умолчанию для таблиц стилей.
  3. Иначе языком по умолчанию является "text/css".

Документы, содержащие элементы с установленным атрибутом style, но не определившие язык по умолчанию для таблиц стилей, являются некорректными. Авторские утилиты должны генерировать информацию о языке по умолчанию для таблиц стилей (обычно в объявлении META ) так, чтобы ПА не должны были обращаться к языку по умолчанию - "text/css".

Инлайн-стиль (внедрённый)

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

style = style [CN]

Синтаксис значений атрибута style определяется языком по умолчанию для таблиц стилей. Например, для инлайн-стиля [ "[CSS2]" ] используйте синтаксис блока объявлений, описанный в разделе 4.1.8 (без фигурных скобок-ограничителей).

Этот пример CSS устанавливает цвет и шрифт текста параграфа:

<P style="font-size: 12pt; color: fuchsia">Aren't style sheets wonderful?

В CSS правильное объявление имеет форму "имя : значение" (с разделяющим двоеточием).

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

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

Информация о стиле в заголовках: элемент 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-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>
< Лекция 13 || Лекция 14: 1234 || Лекция 15 >
Ирина Кириллова
Ирина Кириллова

Нажимаю на ссылку на дополнительный материал и дополнение к информации-меня возвращает на первую страницу лекции. Подскажите, что делать? Или дополнительный материал платный?

Ахмед Хамзатов
Ахмед Хамзатов
Россия, г. Грозный