<style> - элемент для указания стилей

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

HTML-элемент <style> содержит информацию о стилях документа или его части. Они будут применены к содержимому документа, включающего элемент <style>.

Интерактивный пример

Элемент <style> должен быть включён внутрь <head> документа. В общем случае лучше размещать стили во внешних таблицах стилей и подключать их с помощью элементов <link>.

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

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

Атрибуты

Этот элемент включает глобальные атрибуты.

blocking

Этот атрибут явно указывает, что некоторые действия должны быть заблокированы до получения необходимых ресурсов. Стили, импортированные с помощью @import, обычно считаются критическими ресурсами, в то время как background-image и шрифты — нет. Блокируемые действия указываются в виде списка ключевых слов, разделённого пробелами. Допустимые значения:

  • render: Отображение контента на экране блокируется.
media

Этот атрибут определяет, к какому виду медиа должен применяться стиль. Значением этого атрибута является медиавыражение, которое по умолчанию соответствует all.

nonce

Криптографический одноразовый номер, используемый для разрешения применения встроенных стилей с помощью директивы style-src политики Content-Security-Policy. Сервер должен генерировать это значение каждый раз, когда отправляет заголовок. Важно предоставлять такое значение, которое невозможно угадать, так как в противном случае обойти политику ресурса будет достаточно просто.

title

Этот атрибут задаёт альтернативные наборы стилей.

Устаревшие атрибуты

type

Этот атрибут не следует устанавливать, но если он указан, то допустимыми значениями являются только пустая строка или регистронезависимое значение text/css.

Примеры

Простая таблица стилей

В следующем примере мы применяем очень простой стиль к документу:

html
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <title>Тестовая сраница</title>
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>Это мой параграф.</p>
  </body>
</html>

Результат

Несколько элементов style

В этом примере мы добавили два элемента <style>, обратите внимание, как конфликтующие объявления стилей в последнем элементе <style> перекрывают те, что были в предыдущем, если у них одинаковая специфичность.

html
<!doctype html>
<html lang=ru">
  <head>
    <meta charset="UTF-8" />
    <title>Тестовая страница</title>
    <style>
      p {
        color: white;
        background-color: blue;
        padding: 5px;
        border: 1px solid black;
      }
    </style>
    <style>
      p {
        color: blue;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <p>Это мой параграф.</p>
  </body>
</html>

Результат

Включение медиавыражения

В этом примере мы добавили медиавыражение с помощью атрибута media во втором элементе <style>, чтобы он применялся только при ширине области просмотра менее 500px.

html
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <title>Тестовая страница</title>
    <style>
      p {
        color: white;
        background-color: blue;
        padding: 5px;
        border: 1px solid black;
      }
    </style>
    <style media="all and (max-width: 500px)">
      p {
        color: blue;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <p>Это мой параграф.</p>
  </body>
</html>

Результат

Техническая сводка

Категории контента Метаданные.
Допустимое содержимое Текстовое содержимое, соответствующее атрибуту type, то есть text/css.
Пропуск тегов Ни один из тегов не может быть пропущен.
Допустимые родители Любой элемент, который принимает метаданные.
Неявная ARIA-роль Нет соответствующей роли
Допустимые ARIA-роли Атрибут role не допускается
DOM-интерфейс HTMLStyleElement

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

Specification
HTML Standard
# the-style-element

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также