<style>: Элемент информации о стиле

Базовая линия Широко доступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

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

Попробуйте

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

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

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

Атрибуты

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

blocking Экспериментальный

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

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

media

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

nonce

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

title

Этот атрибут указывает наборы альтернативных стилевых листов.

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

type Устаревший: Этот атрибут не должен предоставляться: если он предоставляется, единственно допустимые значения — пустая строка или совпадение, не чувствительное к регистру, с text/css.

Примеры

Простой стилевой файл

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

html

<!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> переопределяют те, что в предыдущем элементе, если у них одинаковая специфика.

html

<!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>, чтобы он применялся только тогда, когда ширина viewport меньше 500px.

html

<!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="all and (max-width: 500px)">
      p {
        color: blue;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <p>This is my paragraph.</p>
  </body>
</html>

Результат

Техническое описание

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

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

Спецификация
HTML Стандарт # the-style-element

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

	Рабочие столы					Мобильные
	Хром	Эдж	Файрфокс	Опера	Сафари	Хром Android	Файрфокс для Android	Опера Android	Сафари на IOS	Samsung Internet	WebView Android
`style`	1	12	1	3.5	1	18	4	10.1	1	1.0	4.4
`blocking`	105	105	Нет	91	Нет	105	Нет	72	Нет	20.0	105
`media`	1	12	1	3.5	1	18	4	10.1	1	1.0	4.4
`type`	1	12	1 До версии 75 Firefox принимал любые типы медиа CSS (MIME) с необязательными параметрами. Начиная с версии 75, это ограничено строкой 'text/css' согласно спецификации.	3.5	1	18	4	10.1	1	1.0	4.4

См. также

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

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style