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

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨июль 2015 г.⁩.

* Some parts of this feature may have varying levels of support.

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

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

<style>
  p {
    color: #26b72b;
  }
  code {
    font-weight: bold;
  }
</style>

<p>
  This text will be green. Inline styles take precedence over CSS included
  externally.
</p>

<p style="color: blue">
  The <code>style</code> attribute can override it, though.
</p>

p {
  color: #f00;
}

Элемент <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 # the-style-element

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

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

Элемент <link>, позволяющий использовать внешние таблицы стилей.
Альтернативные таблицы стилей

Help improve MDN

Learn how to contribute

This page was last modified on ⁨15 апр. 2025 г.⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content