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

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

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


Этот каскад свойств и стилевых правил дал имя стандарту каскадных таблиц стилей.

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

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

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

, но также синий цвет и курсив:

Я такой сииинииий!



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

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

Таблицы стилей на уровне документа
Действительная сила таблиц стилей становится более очевидной, когда вы помещаете список правил представления в начало HTML- или XHTML-документа.


Расположенные внутри тега и заключенные в собственный тег ) таблицы стилей на «уровне документа» действуют на все вхождения тегов в документ, за исключением тех, что содержат обладающие более высоким приоритетом встроенные определения с атрибутом style.1

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


Я такой сииинииий!


...

И я тожеее сииинииий!



Атрибут type
Кроме CSS, для HTML/XHTML доступны и другие таблицы стилей.


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

Ставьте тег – именно в таком порядке.

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

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

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

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

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

Можно предложить броузеру прочитать файл gen_styles.css для каждого документа из нашей подборки, а он в ответ покрасит содержимое каждого тега

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

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

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

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

Я такой сииинииий!


...

И я тожеее сииинииий!



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

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

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


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

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


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

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

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

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

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