1.3. Внешние таблицы стилей
Таблицы стилей можно описывать отдельно от HTML-документов. Это позволяет:
совместно использовать таблицы стилей в ряде документов и сайтов;
изменять таблицы стилей без изменения документа;
загружать таблицы стилей выборочно.
HTML позволяет связывать с документом любое количество внешних таблиц стилей. Язык CSS определяет взаимодействие нескольких внешних таблиц стилей (например, правила "каскадов").
Упражнение 1. В текстовом редакторе «Блокнот» запишем следующий текст: P.special { color : green; border: solid red; }
и сохраним его в файле mycss.css.
Теперь для применения этой внешней таблицы стилей нужно связать документ с файлом mycss.css. В следующем примере для связывания применяют тег LINK:
<HTML>
<HEAD>
<LINK HREF="mycss.css" REL= "stylesheet" TYPE="text/css">
</HEAD>
<BODY>
<P class="special">B этом абзаце текст должен быть отображен символами зеленого цвета и обрамлен рамкой красного цвета.
</BODY>
</HTML>
Связывание внешней таблицы стилей с помощью атрибутов тега LINK состоит из следующих шагов:
В атрибуте HREF указывают URI файла таблицы стилей.
В атрибуте TYPE указывают язык таблицы стилей. Браузеры не загружают таблицы стилей, использующие неподдерживаемые языки.
С помощью атрибутов REL и TITLE указывают, является ли таблица стилей постоянной, предпочитаемой или альтернативной.
3.1. Таблица постоянная, если REL="stylesheet", а значение TITLE не установлено.
3.2 Таблица предпочитаемая, если REL="stylesheet", а значением атрибута TITLE таблице присваивают имя.
3.3. Таблица альтернативная, если REL="alternate stylesheet", а значением атрибута TITLE таблице присваивают имя.
Например, укажем, что таблица стилей в файле mycss.css является предпочитаемой:
<LINK HREF="mycss.css" TYPE="text/css" TITLE="Compact" REL = "stylesheet">
Если тегами LINK указаны несколько предпочитаемых таблиц стилей, применяется указанная первой таблица.
Для
установки предпочитаемой таблицы стилей
можно применить и тег МЕТА.
Например,
чтобы установить предпочитаемую таблицу
стилей "compact",
можно записать следующую строку:
<МЕТА HTTP-EQUIV="Default-Style" CONTENT="compact">
Если тегами МЕТА указаны несколько предпочитаемых таблиц стилей, применяется указанная последней таблица.
Предпочитаемые таблицы стилей, указанные тегами МЕТА имеют преимущество над таблицами, задаваемыми тегами LINK.
Можно сгруппировать несколько альтернативных таблиц стилей (включая предпочитаемые) одним именем стиля. Если пользователь выбирает именованный стиль, браузер применяет все таблицы стилей с этим именем.
Также можно указывать постоянные таблицы стилей, которые браузеры применяют в дополнение к альтернативным таблицам.
1.4. Каскады таблиц стилей
Каскадные языки таблиц стилей, такие как CSS, допускают применение таблиц стилей из нескольких источников (каскад таблиц стилей) Для создания каскада указывают последовательность тегов LINK и/или STYLE Каскад таблиц производится в порядке их указания в заголовке документа. При этом следует избегать смешивания языков таблиц стилей.
Рассмотрим следующий фрагмент:
<LINK REL="alternate stylesheet" TITLE="compact"
HREF="small-base.css" TYPE="text/css">
<LINK REL=''alternate stylesheet" TITLE="compact"
HREF="small-extras.css"TYPE="text/css">
<LINK REL="alternate stylesheet" TITLE="big print"
HREF="bigprint.css"TYPE="text/css">
<LINK REL="stylesheet" HREF="common.css" TYPE="text/css">
Если пользователь выбирает стиль "compact", браузер применяет обе внешние таблицы. Если пользователь выбирает стиль "big print", браузер применяет таблицу "bigprint.css". При любом выборе применяется и постоянная таблица "common.css".
Каскад может включать таблицы стилей, применяемые к различным устройствам. Браузер сразу отбрасывает таблицы стилей, не применяемые к текущему устройству. В следующем примере каскада таблица стилей "соrр" представлена для печати, экранного представления и речевых браузеров.
Таблица "tech" применяется ко всем устройствам. Стиль, определяемый тегом STYLE, используется для печати и для экрана, но не для звукового представления.
<LINK REL="stylesheet" media="aural"
HREF="corp-aural.css"TYPE="text/css">
<LINK REL="stylesheet" media="screen"
HREF="corpe-screen.css"TYPE="text/css">
<LINK REL="stylesheet" media="print"
HREF="corp-print.css"TYPE="text/css">
<LINK REL="stylesheet" HREF="tech.css" TYPE="text/ess">
<STYLE TYPE="text/css">
p.sperial { color: rgb(230,100,180)}
</STYLE>