/html/style/rel:> Вид таблицы стилей_

Атрибут rel

Синтаксис

(X)HTML
<style type="..." rel="[значение]">
  ... 
</style>

Описание

Атрибут / параметр rel (от англ. "relation" ‒ «отношение, связь») указывает вид таблицы стилей.

Примечание

Таблицы стилей бывают трёх видов:

  • «Постоянная» ‒ имеет атрибут «rel» со значением «stylesheet» и не имеет «title» атрибут.
  • «Предпочтительная» ‒ имеет атрибут «rel» со значением «stylesheet», а так же имеет «title» атрибут с именем таблицы стилей.
  • «Альтернативная» ‒ имеет атрибут «rel» со значением «alternate stylesheet», а так же имеет «title» атрибут с именем таблицы стилей.

Поддержка браузерами

Chrome
Поддерж.[1][3][4]
Firefox
Поддерж.[1][3]
Opera
Поддерж.[1][2]
Maxthon
Поддерж.[1][3]
IExplorer
Поддерж.[1][3]
Safari
Поддерж.[1][3]
iOS
Поддерж.[1][3]
Android
Поддерж.[1][3]
  • [1] ‒ отсутствует инструмент выбора между альтернативными наборами таблиц стилей.
  • [2] ‒ применяются сразу все альтернативные наборы таблиц стилей.
  • [3] ‒ применяется только первый набор «предпочтительных» или «альтернативных» таблиц стилей.
  • [4] ‒ «альтернативные» таблицы стилей применяются только в наборе с «предпочтительными» таблицами стилей.

Спецификация

Верс. Раздел
HTML
2.0 ---
3.2 STYLE and SCRIPT
4.01 14.3.2 Specifying external style sheets
DTD: Transitional Strict Frameset
5.0 4.2.6 The style element
5.1 4.2.6. The style element
XHTML
1.0 Extensible HyperText Markup Language
DTD: Transitional Strict Frameset
1.1 Extensible HyperText Markup Language

Значения

stylesheet
Определяет таблицу стилей либо как «постоянную», либо как «предпочтительную» (в зависимости от наличия/отсутствия «title» атрибута).
stylesheet alternate
Определяет таблицу стилей как «альтернативную».

Значение по умолчанию: «stylesheet».


Пример использования

Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Параметр rel (Элемент style)</title>
<!-- Постоянные таблицы стилей -->
<style type="text/css"> li { color: white; } </style>
<style rel="stylesheet" type="text/css"> .persistent { color: green; } </style>

<!-- Наборы «предпочтительных» таблиц стилей -->
<style rel="stylesheet" type="text/css" title="Красный"> .preferred1 { color: red; } </style>
<style rel="stylesheet" type="text/css" title="Оранжевый"> .preferred2 { color: orange; } </style>

<!-- Наборы «альтернативных» таблиц стилей -->
<style rel="alternate stylesheet" type="text/css" title="Красный"> p { color: red; } </style>
<style rel="alternate stylesheet" type="text/css" title="Оранжевый"> p { color: orange; } </style>

<style rel="alternate stylesheet" type="text/css" title="Blue"> .alternate1 { color: blue; } </style>
<style rel="alternate stylesheet" type="text/css" title="Violet"> .alternate2 { color: violet; } </style>
<style rel="alternate stylesheet" type="text/css" title="Blue"> h1 { color: blue; } </style>
<style rel="alternate stylesheet" type="text/css" title="Violet"> h1 { color: violet; } </style>
</head>
<body>
<h1>Пример использования атрибута "rel"</h1>
<p>Действующие таблицы стилей:</p>
<ul>
<li class="persistent">Постоянная</li>
<li class="preferred1">Предпочтительная 1</li>
<li class="preferred2">Предпочтительная 2</li>
<li class="alternate1">Альтернативная 1</li>
<li class="alternate2">Альтернативная 2</li>
</ul>
</body>
</html>
Параметр rel (Элемент style)