HTML :: Тег <style>

Применение стилевых свойств к элементу разметки через атрибут style имеет силу только для одного элемента. Если нам понадобится применить их к другому элементу разметки, то придется повторно задать для него атрибут style с теми же значениями. Поэтому на практике данный способ применяется редко. Вместо этого чаще используется элемент «style», который формируется при помощи парного тега <style> (от англ. style – стиль) и предназначен в основном для хранения внутренних таблиц стилей CSS, которые имеют силу во всем документе. Он является служебным элементом и располагается в заголовке документа. Разрешается использовать несколько элементов «style» (см. пример №1).

HTML Результат

htmlCodes

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

Пример №1. Использование элемента «style»

Атрибут media может принимать те же значения, что и в элементе «link». Второй атрибут type сообщает браузеру MIME-тип (тип данных) содержимого элемента. Это позволяет браузеру правильно интерпретировать код элемента. По умолчанию, type="text/css" и media="all", поэтому указывать их не обязательно, т.к. мы всегда будем применять элемент «style» для размещения внутренних таблиц стилей CSS и, за редким исключением, применять для отображения документа на всех устройствах. Короче, элемент «style» мы будем использовать, как обычный контейнер для размещения там таблиц стилей CSS.

HTML :: Тег <style>

Быстрый переход к другим страницам