HTML :: Тег <style>

В HTML тег <style> (от англ. style – стиль) предназначен в основном для хранения внутренних таблиц стилей CSS, которые имеют силу во всем документе. Элемент <style> является служебным и должен размещаться в контейнере <head>. При этом разрешается использовать несколько элементов <style>.

Синтаксис

	<head>
	  <style>
	   ...
	  </style>			
	</head>

	Закрывающий тег: обязателен.

Атрибуты

media – в качестве значения принимает допустимый медиа-запрос или тип устройства, для которого будет применяться данная таблица стилей. Допустимы следующие значения типов устройств:
- all – все устройства (применяется по умолчанию);
- braille – устройства, использующиеся слепыми людьми (основаны на системе Брайля);
- embossed – принтеры, использующие для печати систему Брайля;
- handheld – смартфоны, планшеты и другие устройства с малой шириной экрана;
- print – принтер (так будет выглядеть страница на бумаге);
- screen – экран монитора;
- speech – речевые браузеры;
- projection – проектор;
- tty – терминалы и другие портативные устройства с ограниченными возможностями экрана;
- tv – телевизор.
Если одна и таже таблица стилей должна применяться сразу для нескольких устройств или разрешений экрана, то значения атрибута media следует перечислить через пробел.
type – сообщает браузеру MIME-тип (тип данных) содержимого элемента. Ознакомиться с полным списком mime-типов можно на сайте Мозилы здесь или на Википедии здесь. По умолчанию используется type="text/css".
Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Официальный сайт W3C: https://html.spec.whatwg.org/multipage/semantics.html#the-style-element

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/style

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №1</title>

  <!-- Установим стиль всех абзацев (для всех устройств) -->
  <style type="text/css">
    p{
    background-color: yellow;
    color: blue;
    }
	
    span{
    color: red;
    }	
  </style>
   
  <!-- Установим стиль всех абзацев при распечатке документа -->
  <style type="text/css" media="print">
    p{
    background-color: blue;
    color: black;
    }
  </style>
</head>
<body>
	<p>
		Если меня захотят <span>распечатать</span>, то будет <br>
		применен синий фон и черный цвет шрифта. А так я <br>
		отображаюсь на желтом фоне синими буквами.
	</p>
</body>
</html>

Пример №1