HTML / 8. Каскадные таблицы стилей

Элементы стилей

На самом простом уровне стиль – это не что иное, как правило, указывающее броузеру, как выводить содержимое какого-то определенного HTML- или XHTML-тега.2 У каждого тега есть ряд ассоциированных с ним стилевых свойств, значения которых определяют, как этот тег воспроизводится броузером. Правило приписывает определенное значение одному или нескольким свойствам тега. Например, большинство тегов имеют свойство color, значение которого определяет цвет, который современные GUI-броузеры должны использовать при отображении содержимого тега. К числу других свойств относятся шрифт, интервал между строками, поля, рамки, громкость звука и тембр, которые будут детально рассмотрены ниже в этой главе.

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

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

Встроенные стили. Атрибут style
Встроенный стиль – это простейший способ применения стиля к тегу. Просто включите в тег атрибут style со списком свойств и их значений. Броузер использует их при выводе содержимого в соответствии с требованиями тега.

К примеру, следующий стиль предлагает отобразить текст заголовка уровня 1, «Я такой сииинииий!», применяя не только свойственные броузеру стилевые характеристики тега <h1>, но также синий цвет и курсив:

<h1 style="color: blue; font-style: italic"> Я такой сииинииий!</h1>

Встроенные стили трудно поддерживать, поскольку они придают дополнительный смысл определениям тегов, затрудняя их восприятие.

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

Таблицы стилей на уровне документа
Действительная сила таблиц стилей становится более очевидной, когда вы помещаете список правил представления в начало HTML- или XHTML-документа. Расположенные внутри тега <head> и заключенные в собственный тег <style> (с закрывающим </style>) таблицы стилей на «уровне документа» действуют на все вхождения тегов в документ, за исключением тех, что содержат обладающие более высоким приоритетом встроенные определения с атрибутом style.1

Все, что находится между тегами <style> и </style>, рассматривается как часть стилевых правил, которые должны быть применены к документу. На самом деле содержимое тега <style> не относится к HTML или XHTML и не подчиняется обычным правилам размеченного содер-жимого. Тег <style>, таким образом, позволяет вставить в документ чужеродную информацию, которую броузер использует для форматирования тегов.

К примеру, броузеры, понимающие таблицы стилей, отобразят синим курсивом содержимое всех тегов заголовков в HTML-документе, имеющем в своем заголовке следующее определение таблиц на уровне документа:

<head>
<title>Все синее</title>
<style type="text/css">
<!--
/* делаем все заголовки 1-го уровня синими и курсивом */
h1 {color: blue; font-style: italic}
-->
</style>
</head>

<h1> Я такой сииинииий!</h1>
...
<h1>И я тожеее сииинииий!</h1>

Атрибут type
Кроме CSS, для HTML/XHTML доступны и другие таблицы стилей. Подобно стилевым таблицам JavaScript, описываемым в главе 12, они плохо поддерживаются (или вовсе не поддерживаются) современными броузерами, так что мы не станем уделять им много внимания в этой книге. Как бы то ни было, броузеру нужен способ определения таблицы стилей, используемой в вашем документе. С этой целью ставьте атрибут type в тег <style>. Все каскадные таблицы стилей имеют тип text/css. Таблицы стилей JavaScript применяют тип text/javascript.

Можно опустить данный атрибут и надеяться, что броузер сам поймет, какой тип используется. Мы предпочитаем всегда включать атрибут type, избегая возможных недоразумений.

Атрибут media
В наши дни HTML- и XHTML-документы можно встретить в самых неожиданных местах, даже в сотовых телефонах. Чтобы помочь броузеру выбрать лучший способ вывода документа, включите в тег <style> атрибут media. Его значением является средство обмена информацией, для которого этот документ предназначен, хотя это и не препятствует
выводу документа другим устройством. Значением атрибута по умолчанию является screen (дисплей компьютера). Другие определенные в стандарте значения – это tty (телетайпы, терминалы или портатив-ные устройства с ограниченными возможностями дисплея), tv (устройства типа телевизора с низким разрешением и плохой цветопередачей), projection (проекционные аппараты), handheld (портативные компьютеры и сотовые телефоны), print (принтеры, печатающие чернилами на бумаге), braille (тактильные устройства), embossed (устройства для вывода текста в коде Брайля, для слепых), aural (аудиоустройства или,
например, синтезаторы речи) и all (многие другие типы устройств).

Если вы хотите вместо all явно перечислить несколько типов устройств, вы можете использовать в качестве значения атрибута media заключенный в кавычки список, элементы которого разделяются запятыми. Например:

<style type="text/css" media="screen,print">

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

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

Как обеспечить определение разных стилей для разных устройств, не создавая нескольких копий документа? Стандарт CSS2 позволяет определять стили, специфичные для того или иного устройства вывода, через свои специальные директивы (так называемые правила at) @import и @media.

Атрибуты dir, lang и title
Как и со многими другими HTML/XHTML-элементами, можно связать с тегом <!-- <DEFANGED_STYLE> описательное название, а также указать язык и направление вывода текста с помощью атрибутов title, lang и dir соответственно.

Броузеры без поддержки стилей
Конечно, вы заметили, что в предыдущем примере, где стиль определялся на уровне документа, мы поместили содержимое тега <style> внутрь тега комментария <!--. Старые версии броузеров, не поддерживающие стили, игнорируют тег <style>, но с энтузиазмом выводят на экран его содержимое. Современные броузеры ожидают, что в HTML-коментарии перечислены стилевые правила, и обрабатывают их соответствующим образом, в то время как старые броузеры игнорируют неизвестный им тег, а к тегу комментария относятся корректно. Это работает.

Порядок тегов очень важен. В нашем примере принят следующий подход:

<style>
<!--
h1 {color: blue; font-style: italic}
-->
</style>

Ставьте тег <style>, за ним HTML-комментарий, а за комментарием – стилевые правила на уровне документа. После этого закройте комментарий и поставьте тег </style> – именно в таком порядке.

С XHTML-документами нужно обращаться чуть иначе. В них мы помещаем стили, относящиеся ко всему документу, в секцию CDATA, а не в HTML-тег комментария.

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

Внешние таблицы стилей
Кроме того, можно помещать определения стилей в отдельный документ (текстовый файл, MIME-типом которого является text/css) и импортировать такие «внешние» таблицы стилей в документы. Чтобы придать своим документам унифицированный вид, пользуйтесь единой таблицей стилей для других документов в этом собрании и даже для других собраний документов. Поскольку внешняя таблица является отдельным файлом и загружается броузером из сети, ее можно хранить где угодно, использовать многократно и даже применять чужие таблицы стилей.

Например, допустим, что мы создали файл gen_styles.css, включающий следующее стилевое правило:

h1 {color: blue; font-style: italic}

Можно предложить броузеру прочитать файл gen_styles.css для каждого документа из нашей подборки, а он в ответ покрасит содержимое каждого тега <h1> в синий цвет и выведет текст курсивом. Конечно, это произойдет только при условии, что машина пользователя способна совершать такие фокусы со стилем, на ней установлен работающий
с таблицами стилей броузер и назначения стиля не отменены на уровне документа или встроенным определением.

Загрузить в документ внешнюю таблицу стилей можно двумя способами: при помощи тега <link> или директивы @import.

Присоединение внешних таблиц стилей при помощи тега <link>
Один способ загрузить внешнюю таблицу стилей – использовать тег <link> внутри тега <head> в вашем документе:

<head> <title>
Присоединение стиля с помощью link</title>
<link rel=stylesheet type="text/css"
href="http://www.kumquats.com/styles/gen_styles.css"
title="Синева">
</head>

<h1>Я такой сииинииий!</h1>
...
<h1>И я тожеее сииинииий!</h1>

Напомним, что тег <link> связывает документ, в котором он содержится, с каким-то другим документом в сети. В примере мы сообщаем броузеру, что документ, поименованный в атрибуте href, имеет тип stylesheet, как это указано в атрибуте type. Ссылка на внешнюю таблицу стилей в теге <link> требует указания атрибутов href и type. Кроме того, мы явно, причем добровольно, сообщаем броузеру, что отношение файла к нашему документу определяется значением stylesheet (таблица стилей). Мы также добавили атрибут title, определяющий название таблицы стилей, создав возможность для ссылок на нее в будущем.

Тег <link> и его обязательные атрибуты href и type должны появляться только в заголовке документа. URL таблицы стилей может быть абсолютным или относительным, отсчитываемым от базового URL документа.

Импортированные внешние таблицы стилей
Второй способ загрузки внешней таблицы стилей импортирует файлы, применяя специальную директиву (так называемое правило at) в теге <style>:

<head>
<title>Импортированный стиль</title>
<style type="text/css">
<!--
@import url(http://www.kumquats.com/styles/gen_styles.css);
@import "http://www.kumquats.com/styles/spec_styles.css";
body {background: url(backgrounds/marble.gif)}
-->
</style>
</head>

Директива @import ожидает параметр в виде URL, указывающего путь в сети к внешней таблице стилей. Как показано в этом примере, URL может быть заключенной в двойные кавычки строкой, заканчивающейся точкой с запятой, или следовать за ключевым словом url, так же оканчиваясь точкой с запятой, но помещаясь при этом в скобки.

URL может быть абсолютным или относительным, отсчитываемым от базового URL документа.Команда @import должна появляться до любых традиционных стилевых правил, будь то в теге <style> или во внешней таблице стилей.

В противном случае стандарт настаивает, чтобы броузер игнорировал ошибочную @import. Согласно стандарту CSS2 каскадирование происходит так: сначала импортируются различные таблицы стилей, затем обрабатываются правила, определенные на уровне документа, в результате выигрывает последний оставшийся стиль.

Директива @import может появиться в определениях стиля на уровне документа или даже в другой таблице стилей, что позволяет создавать вложенные таблицы стилей.

Стили для разных устройств вывода
Помимо атрибута media для тега <style> стандарт CSS2 содержит еще два средства, которые позволяют применять различные таблицы стилей в зависимости от того, какой агент или устройство будут выводить документ. С помощью этих способов можно применять один или целую таблицу стилей, когда документ отображается на экране компьютера, и другую группу стилей, когда содержимое выводится на принтере, печатающем по системе Брайля. А как же обходиться с сотовыми телефонами в сети?
Подобно тому как атрибут media для тега <style> сообщает, в каких случаях нужно применять описанную в теге таблицу стилей, существует возможность указать обработчику документов1, следует ли ему загружать и использовать внешнюю таблицу в зависимости от того, какое устройство будет доносить до человека содержание документа.
Это можно сделать, добавив в конец команды @import один или несколько отделенных друг от друга запятыми типов посредников.

Следующий пример предлагает обработчику документов решить, какую из таблиц стилей загрузить и применить – предназначенную для синтезатора речи или ту, что задает стили при выводе на экран компьютера и на печать:

@import url(http://www.kumquats.com/styles/visual_styles.css) screen,print;
@import "http://www.kumquats.com/styles/speech_styles.css" aural;
В CSS2 включены следующие типы устройств вывода: all, aural,
braille, embossed, handheld, print, projection, screen, tty и tv.

Другой предусмотренный CSS2 способ учесть устройство вывода состоит в применении явной директивы @media, которая позволяет включать в одну таблицу стилей правила, относящиеся только к определенным посредникам. Это можно делать как на уровне документа, таки во внешней таблице стилей. На уровне документа @media должна, как и директива @import, содержаться в теге <style>. При этом обе они не могут входить в иные правила. В отличие от @import, директиве @media разрешено следовать за другими стилевыми назначениями, и те, которые описаны в ней, вправе отменять определенные прежде в соответствии с каскадным стандартом.

Содержимое @media включает в себя одно или несколько разделенных запятыми наименований типов посредников, за которыми следуют фигурные скобки ({}), охватывающие набор стилевых правил. Например:

body {background: white}
@media tv, projection {
body {background: yellow}
}

Атрибут yellow у специальной директивы @media окрашивает фон тела документа в желтый цвет (а не в белый, указанный в качестве умолчания в общем стилевом правиле), когда документ отображается на телевизионном экране или проекционной системой (это определяют атрибуты tv и projection).

<link> или @import?
На первый взгляд может показаться, что способы присоединения таблиц стилей, использующие тег <link> и директиву @import, эквивалентны и применяют различный синтаксис для достижения одной и той же цели. Это так, если в документе только один тег <link>. Когда их больше, в игру вступают специальные правила CSS2.

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

Если речь идет об @import, то, напротив, всякий распознающий стили броузер должен слить множество указанных в директивах таблиц в один набор стилевых правил для документа. При возникновении каких-либо взаимных противоречий приоритет имеет последняя импортированная таблица. Следовательно, если внешняя таблица стилей gen_styles.css предлагает броузеру отобразить содержимое тега <h1> синим курсивом, а spec_styles.css настаивает на красном цвете текста того же тега, то содержимое будет отображено красным курсивом.

И если впоследствии мы определим для тега <h1> другой цвет, скажем желтый, на уровне документа, тег <h1> будет желтым и наклонным.

Каскадный эффект. Понятно?На практике популярные броузеры обращаются с таблицами стилей, присоединенными с помощью тега <link>, так же, как с импортированными таблицами, каскадным образом совмещая их действие. Броузеры в настоящее время не позволяют выбирать таблицу стилей. Импортированные стили замещают стили, присоединенные тегом <link>, точно так же, как определенные на уровне документа и встроенные в тег стили замещают внешние определения. Собирая все это вместе, рассмотрим пример:

<html>
<head>
<link rel=stylesheet href=sheet1.css type=text/css>
<link rel=stylesheet href=sheet2.css type=text/css>
<style>
<!--
@import url(sheet3.css);
@import url(sheet4.css);
-->
</style>
</head>

В соответствии с моделью CSS2 броузер должен предложить пользователю выбирать между sheet1.css и sheet2.css. Затем он должен загрузить выбранную таблицу, за которой последуют sheet3.css и sheet4.css.

Стили, определенные в таблицах sheet3.css и sheet4.css, так же как и встроенные стили, будут в случае конфликта применяться вместо стилей выбранной таблицы. На практике популярные броузеры каскадным образом объединят правила таблиц из примера, обрабатывая их в том порядке, в каком они появляются, от sheet1 до sheet4.

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

Netscape шестой версии (но не более ранних), Internet Explorer версии 5 и более поздних, а также все версии Opera и Firefox признают и @import, и @media как на уровне документа, так и во внешних таблицах, позволяя вкладывать таблицы друг в друга.

Можно и не пытаться с помощью Netscape Navigator ранних версий получить стилевую дифференциацию по различным средствам вывода во внешних таблицах. Предполагайте, следовательно, что большая часть людей, имеющих броузеры Netscape версии 4, отображает документы на обычном экране PC, так что сделайте это устройство приниаемым по умолчанию. Затем вложите все стили, ориентированные на тактильный или печатный способ представления, при помощи директив @media, чтобы поддерживающие CSS обработчики смогли выбирать их, основываясь на устройстве вывода. Альтернативой является включение всех нужных стилей в тегах <style> во всех документах. И не думайте приниматься за это!

Комментарии к стилям
Комментарии в теге <style> только приветствуются, как и во внешних таблицах стилей, но вы должны обращаться с ними не так, как с комментариями языка HTML. Таблицы стилей – это не HTML. Лучше выделяйте комментарии, открывая их последовательностью символов
/* и закрывая */. (Те из вас, кто знаком с языком программирования С, узнают такие обозначения.) Используйте эти правила оформления комментариев как на уровне документа, так и во внешних таблицах стилей. Комментарии нельзя вкладывать друг в друга.

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

Приоритеты стилей
Можно импортировать несколько внешних таблиц и комбинировать их с определениями стилей на уровне документа и тега разными способами. Их эффекты складываются. Можно, например, задать тип шрифта для тега <h1> из нашего примера во внешней таблице, в то время как для его отображения будет использоваться стиль из определений на
уровне документа.

Эффекты таблиц стилей не накапливаются, однако из ряда стилей, ко-
торые, возможно, определяют различные значения для одного и того
же свойства (цвет содержимого тега <h1>, например), всегда существу-
ет один, обладающий приоритетом. Его можно найти, следуя прави-
лам, перечисленным ниже, и действуя по порядку.

Ранжируем по источнику
Стиль, определенный «ближе» к тегу, имеет приоритет над установленными с «большего расстояния». Так, встроенные в тег стили обладают большим приоритетом, чем определенные на уровне документа, которые, в свою очередь, приоритетнее действия внешних таблиц.

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

Если стилей все еще несколько, ранжируем их по порядку вхождения Последнее описание преобладает над всеми предыдущими.

Результат взаимодействия между свойствами стилей и традиционными атрибутами тегов почти невозможно предсказать. Диктуемые таблицами стилей цвета фона и переднего плана – определены ли они внешним образом, на уровне документа или встроены в тег – имеют предпочтение перед различными атрибутами цвета, которые могут встретиться в тегах. Атрибут align для встроенных в документ изображений, напротив, обычно оказывается сильнее выравнивания, предписанного стилями.

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

Тем не менее мы советуем просто спасаться бегством от одноразовых, встроенных в документ, локализованных эффектов, достигаемых, скажем, тегом <font> или атрибутом color. Они сделали свое дело, их время ушло. Наступила пора вернуть (безболезненно!) последовательность и систематичность в представление документов. Используйте
стили. Это стезя HTML.

Статьи по HTML на эту тему:

Бестеговые стили – тег <span>
Применение стилей в документах
Синтаксис стилей
Стилевые классы
Стилевые свойства

Вернуться в раздел: HTML / 8. Каскадные таблицы стилей