Тег <style>
belarusweb.net
© Петр Романовский Минск, 2016-2018.



belarusweb.net
Основы создания сайтов...

Тег <style>

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

<!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>

Пример 3.6. Использование элемента 'style'

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

Видеоуроки по курсу HTML

Комментарии (0)

Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!