html.okpython.net
HTML и CSS для начинающих

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".
  • Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Примеры

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