<style> HTML-элемент сведений о стилях

Элемент <style> HTML содержит сведения о стилях документа или его части. Он содержит CSS, который применяется к содержимому документа, содержащего элемент <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: red;
}

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

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

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

Атрибуты

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

blocking

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

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

Примечание: Блокировать отрисовку могут только элементы style в <head> документа. По умолчанию элемент style в <head> блокирует отрисовку, когда браузер обнаруживает его во время разбора. Если такой элемент style добавлен динамически с помощью скрипта, необходимо также задать для него blocking = "render", чтобы он блокировал отрисовку.

media

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

nonce

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

title

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

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

type

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

Примеры

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

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

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Test page</title>
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>This is my paragraph.</p>
  </body>
</html>

Результат

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

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

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Test page</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>This is my paragraph.</p>
  </body>
</html>

Результат

Добавление медиазапроса

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

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Test page</title>
    <style>
      p {
        color: white;
        background-color: blue;
        padding: 5px;
        border: 1px solid black;
      }
    </style>
    <style media="(width < 500px)">
      p {
        color: blue;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <p>This is my paragraph.</p>
  </body>
</html>

Результат

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

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

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

См. также

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