1. Веб-технологии для разработчиков
  2. HTML
  3. Справка по HTML
  4. Элемент
  5. <style>

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

<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

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

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

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

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