html.okpython.net
Основы создания сайтов
HTML :: Тег <style>
В HTML тег <style> (от англ. style – стиль) предназначен в основном для хранения внутренних таблиц стилей CSS, которые имеют силу во всем документе. Элемент <style> является служебным и должен размещаться в контейнере <head>. При этом разрешается использовать несколько элементов <style>.
Синтаксис
<head>
<style>
...
</style>
</head>
Закрывающий тег: обязателен.
Атрибуты
-
media – в качестве значения принимает допустимый медиа-запрос или тип устройства, для которого
будет применяться данная таблица стилей. Допустимы следующие значения типов устройств:
- all – все устройства (применяется по умолчанию);
- braille – устройства, использующиеся слепыми людьми (основаны на системе Брайля);
- embossed – принтеры, использующие для печати систему Брайля;
- handheld – смартфоны, планшеты и другие устройства с малой шириной экрана;
- print – принтер (так будет выглядеть страница на бумаге);
- screen – экран монитора;
- speech – речевые браузеры;
- projection – проектор;
- tty – терминалы и другие портативные устройства с ограниченными возможностями экрана;
- tv – телевизор.
- 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