Связывание с внешним списком стилей
Внешние каскадные списки стилей идеальны для случаев, когда одни и те же правила применяются к элементам, находящимся на двух или большем количестве Web-страниц. Фактически при связывании всех страниц Web-сайта с внешним списком стилей внешний вид всех страниц сайта можно изменить путем изменения правил, содержащихся в одном файле. Более того, большинство Web-браузеров кэшируют внешние списки стилей, что исключает задержку в выводе на экран страниц при загрузке одного и того же файла каскадного списка стилей.
Как предполагает само имя метода, для связывания HTML-документа с внешним списком стилей используется дескриптор <link>. Вместо ввода правил списка стилей, в заголовок каждой Web-страницы вводится ссылка на файл списка стилей. После этого при изменении в файле списка стилей такого свойства, как, например, типа шрифта, его размера или цвета, все изменения будут сразу же отражаться на всех Web-страницах.
Для связывания Web-страницы с внешним каскадным списком стилей необходимо поместить в заголовок страницы дескриптор <link> следующего вида:
<head>
<title>Связывание с каскадным списком стилей (CSS)</title>
<link rel=stylesheet href="styles.css" type="text/css">
</head>
Обратите внимание, что дескриптор <link> не нужно помещать между начальным и конечным дескрипторами (<style></style>). В приведенном примере дескриптор <link> указывает Web-браузеру на необходимость использования правил каскадного списка стилей, которые содержатся в файле styles.css. Атрибут type говорит о том, что в тестовом файле содержатся данные списка стилей, а атрибут href указывает имя файла и, при необходимости, путь к файлу, содержащему объявления каскадного списка стилей. Если Web-браузер не сможет найти файл внешнего списка стилей (указанный в атрибуте href дескриптора <link>), для вывода элементов страницы на экран будут использоваться правила, установленные в Web-браузере по умолчанию.
Помимо атрибута type, который может использоваться для предотвращения загрузки Web-браузером типов каскадных списков стилей, которые он не поддерживает, можно указать атрибут media, задающий среду, к которой применяются содержащиеся в файле правила. Считывая значение атрибута media, Web-браузер может выборочно загружать только те файлы каскадных списков стилей, которые применимы к данной конкретной среде работы браузера. Например, при задании следующего дескриптора <link> Web-браузер может не загружать файлы списков стилей, применимых для "tv" (т.е. телевидения) при выводе на экран обычных HTML-документов:
<link rel=stylesheet href:"WebTv.css" type="text/css" media="tv">
Допустимые значения атрибута media перечислены ниже:
all Для всех устройств.
aural Для синтезаторов речи.
braille Для вывода на тактильных устройствах.
embossed Для принтеров брайлевской печати.
handheld Для таких малых устройств, как, например, PDA (которые, как правило, имеют монохромные дисплеи, поддерживают растровые изображения и имеют достаточно ограниченную пропускную способность).
print Для вывода на принтеры.
Projection Для вывода на проекторы.
screen Для вывода на компьютерный экран без разбивки на страницы (по умолчанию).
tty Для телетайпных устройств (использующих шрифт с фиксированным углом наклона).
tv Для телевизионных экранов.
Во внешнем файле списка стилей (например, style.css) правила должны определяться следующим образом:
h1 {color:blue; font-size:40px; font-family:verdana}
р {color:white; background:green; font-family:helvetica; text-indent:1cm}
body {background:#ADD8E6; color:maroon)
Обратите внимание на отсутствие во внешнем каскадном списке стилей каких бы то ни было HTML-дескрипторов. Во внешнем, файле списка стилей должны содержаться только правила. Таким образом, внешний каскадный список стилей содержит те же правила, что и внутренний (т.е. внедренный) список. Тем не менее, в файле правила списка стилей не заключаются между начальным и конечным дескрипторами стиля и не содержат HTML-дескрипторов.