Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Введение в HTML.doc
Скачиваний:
34
Добавлен:
21.03.2016
Размер:
957.44 Кб
Скачать

Спецификация внешней таблицы стилей

Авторы определяют внешнюю таблицу стилей со следующими атрибутами элемента LINK:

  • href указывает на расположение файла таблицы стилей. Значением href является URI;

  • значение атрибута type указывает язык связанного ресурса (таблицы стилей). Это позволяет ПА избегать загрузки таблиц стилей для не поддерживаемого языка таблиц стилей;

  • определить, является таблица стилей постоянной, основной или альтернативной:

    • чтобы сделать таблицу постоянной, установите атрибут rel в "stylesheet" и не устанавливайте атрибут title;

    • чтобы сделать таблицу основной, установите атрибут rel в "stylesheet" и именуйте таблицу с помощью атрибута title;

    • чтобы сделать таблицу альтернативной, установите атрибут rel в "alternate stylesheet" и именуйте таблицу с помощью атрибута title.

ПА должен предоставлять пользователю возможность видеть список альтернативных стилей и выбрать из него. Значение атрибута title рекомендуется как название каждого пункта выбора.

В этом примере мы сначала определяем постоянную таблицу стилей, находящуюся в файле mystyle.css:

<LINK href="mystyle.css" rel="stylesheet" type="text/css">

Установка атрибута title делает её авторской основной:

<LINK href="mystyle.css" title="compact" rel="stylesheet" type="text/css">

Добавление ключевого слова "alternate" к атрибуту rel делает её альтернативной таблицей стилей:

<LINK href="mystyle.css" title="Medium" rel="alternate stylesheet" type="text/css">

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

Авторы могут использовать элемент META для установки основной таблицы стилей документа. Например, чтобы установить основную таблицу стилей в "compact" (см. предыдущий пример), авторы могут включить следующую строчку в HEAD:

<META http-equiv="Default-Style" content="compact">

Основная таблица стилей может быть специфицирована заголовками HTTP. Предыдущее объявление META эквивалентно заголовку HTTP:

Default-Style: "compact"

Если два или более объявления META или заголовка HTTP определяют основную таблицу стилей, самая последняя имеет приоритет. Заголовки HTTP появляются раньше, чем HEAD документа.

Если два или более элемента LINK определяют основную таблицу стилей, первая таблица имеет преимущество.

Основная таблица стилей, определённая в META или в заголовке HTTP, имеет преимущество перед таблицами, определёнными в элементе LINK.

Каскадные таблицы стилей

Языки каскадных таблиц стилей, такие как CSS, разрешают объединять стилевую информацию из различных источников. Однако, не все языки таблиц стилей поддерживают каскадирование. Чтобы создать каскад, авторы определяют последовательность элементов LINK и/или STYLE. Стилевая информация каскадируется в том порядке, в котором элементы появляются в HEAD.

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

В следующем примере мы определяем две альтернативные таблицы стилей с названием "compact". Если пользователь выберет стиль "compact", ПА обязан применить обе внешние таблицы стилей, также как и постоянную таблицу стилей "common.css". Если пользователь выберет стиль "big print", только альтернативная таблица "bigprint.css" и постоянная "common.css" будут применены.

<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">

Пример каскада, который использует элементы LINK и STYLE.

<LINK rel="stylesheet" href="corporate.css" type="text/css">

<LINK rel="stylesheet" href="techreport.css" type="text/css">

<STYLE type="text/css">

p.special { color: rgb(230, 100, 180) }

</STYLE>