HTML тег <style>

Значение и применение

Тег <style> сообщает браузеру, что внутри него содержится код CSS. Предыдущие версии HTML (до пятой версии) и XHTML требуют в открывающем теге <style> дополнительный атрибут - <style type = "text/css">.

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

Тег	Chrome	Firefox	Opera	Safari	IExplorer	Edge
<style>	Да	Да	Да	Да	Да	Да

Атрибуты

Атрибут	Значение	Описание
media	media_query	Указывает, что код CSS адаптирован (оптимизирован) под определённые виды устройств. Атрибут может принимать несколько значений и используется, чтобы указать стиль для речевых или печатных устройств, для определенных моделей смартфонов и так далее.
scoped	scoped	Является логическим атрибутом, который указывает, что стили применяются не ко всему документу, а только к родительскому элементу и его дочерним элементам. Элемент <style> при этом размещается не внутри элемента <head>, а внутри того родительского элемента для которого применяются стили. Атрибут имеет ограниченную поддержку браузерами (описание внутри).
type	text/css	Указывает тип данных, который может быть передан посредством сети интернет с применением стандарта MIME (MIME-типы). В HTML5 атрибут type больше не требуется для CSS, так как значением по умолчанию является type = "text/css".

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

В данном примере с использованием HTML тега <style> добавлены стили, которые изменяют цвет элементов и выравнивают заголовок первого уровня по центру.

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования HTML тега <style></title>
<style>
h1 {
text-align: center; /* выравниваем элемент по центру */;
color: red; /* устанавливаем цвет элемента - красный */;
}
p {
color: blue; /* устанавливаем цвет элемента - синий */
}
</style>
</head>
<body>
	<h1>Заголовок первого уровня.</h1>
	<p>Параграф</p>
</body>
</html>

Рассмотрим пример в котором установим определенные стили, которые браузер будет использовать при просмотре страниц, а другие при печати страниц (в нашем случае для экономии ресурса принтера - цвет всех элементов черный, а цвет заднего фона белый).

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования атрибута media HTML тега <style></title>
<style> 
h2 {color: brown;} /* устанавливаем цвет элемента - коричневый */
p {color: red;} /* устанавливаем цвет элемента - красный */
body {background-color: khaki;} /* устанавливаем цвет заднего фона - хаки */
</style>
<style media = "print"> /* устанавливаем стили, которые браузер будет использовать при просмотре и печати страниц */
h2, p {color: #000;} /* групповой селектор устанавливает цвет элементов - черный */
body {background-color: #FFF; } /* устанавливаем цвет заднего фона - белый */
</style>
</head>
<body>
	<h2>Утконос</h2>
	<p><b>Утконос (лат. Ornithorhynchus anatinus)</b> — водоплавающее млекопитающее отряда однопроходных, обитающее в Австралии. Это единственный современный представитель семейства утконосовых (Ornithorhynchidae); вместе с ехиднами образует отряд однопроходных (Monotremata) — млекопитающих, по ряду признаков близких к рептилиям. Это уникальное животное является одним из символов Австралии; оно изображено на реверсе австралийской монеты в 20 центов.</p>
</body>
</html>

Ниже показано как этот пример отображается в браузере, а на изображении как пример отображается в предварительном просмотре печати страницы.

Пример использования атрибута media HTML тега style (медиа-запросы для конкретных типов устройств).

Отличия HTML 4.01 от HTML 5

В HTML 5 добавлен новый атрибут scoped html5

, который позволяет определить стили для определенного раздела документа. В HTML 5 отсутствует необходиость использовать дополнительный атрибут - <style type = "text/css"> (значение по умолчанию).

Значение CSS по умолчанию

style {
display: none;
}

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML теги