<style> HTML

Тег <style> (от англ. style — стиль) применяется для определения стилей элементов веб-страницы.

Элемент <style> необходимо использовать внутри контейнера <head>. Можно задавать несколько <style>.

Синтаксис

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

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

WAI ARIA

Нет значения role по-умолчанию.

Атрибуты

  • media - Определяет устройство вывода, для работы с которым предназначена таблица стилей.
  • type - Сообщает браузеру, какой синтаксис использовать, чтобы правильно интерпретировать стили.

media

Устанавливает устройство вывода, для которого предназначена таблица стилей. Для каждого устройства можно определить свой собственный стиль, который бы учитывал специфику устройства и подгонял под него вид веб-страницы.

Синтаксис

<style media="all | print | screen | speech">
 ...
</style>

Значения

  • all - Все устройства.
  • print - Печатающее устройство вроде принтера.
  • screen - Экран монитора.
  • speech - Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда же входят речевые браузеры.

Можно устанавливать сразу несколько значений, перечисляя их через запятую.

Значение по умолчанию

  • screen

type

Сообщает браузеру, какой синтаксис использовать, чтобы правильно интерпретировать таблицу стилей. Как правило, браузеры корректно работают со стилями и при отсутствии этого атрибута, он необходим для некоторых старых браузеров, которые могут не распознать содержимое контейнера <style>.

В HTML4 этот атрибут является обязательным, в HTML5 его можно опустить.

Синтаксис

<style type="text/css">...</style>

Значения

В качестве значения используется MIME-тип — text/css.

Значение по умолчанию

  • text/css

Спецификации

Примеры

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>STYLE, атрибут media</title>
        <style media="screen">
            .window {
                background: #333;
                border: 1px solid red;
                font-size: 0.9em;
                color: #fc0;
                padding: 10px;
            }
        </style>
        <style media="print">
            .window {
                border: 1px solid black;
                font-family: Arial;
                font-size: 0.9em;
                color: black;
                padding: 10px
            }
        </style>
    </head>
    <body>
        <div class="window">
            Ветеринарное свидетельство входит экскурсионный эфемероид, но особой популярностью пользуются заведения подобного рода, сосредоточенные в районе Центральной площади и железнодорожного вокзала. 
        </div>
    </body>
</html>