Атрибут 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 | |
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>
<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)