HTML тег `<style>`

Значение и применение

Тег <style> сообщает браузеру, что внутри него содержится код CSS. Предыдущие версии HTML (до пятой версии) и XHTML требуют в открывающем теге <style> дополнительный атрибут - <style type = "text/css">.

Поддержка браузерами

Спецификация: multipage

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (1) поддерживаются не везде — смотрите таблицу.

ВсеКомпьютерыМобильные

Совместимостьhtml.elements.style
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`style`	✓1	✓12	✓1	✓3.5	✓1	✓18	✓4	✓10.1	✓1	✓1.0	✓4.4	✓1
`blocking`	✓105	✓105	×	✓91	✓18.2	✓105	×	✓72	✓18.2	✓20.0	✓105	✓18.2
`media`	✓1	✓12	✓1	✓3.5	✓1	✓18	✓4	✓10.1	✓1	✓1.0	✓4.4	✓1
`type`	✓1	✓12	✓1	✓3.5	✓1	✓18	✓4	✓10.1	✓1	✓1.0	✓4.4	✓1

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Атрибуты

Атрибут	Значение	Описание
`media`	`media_query`	Медиазапрос, при котором применяются встроенные стили, например print или (prefers-color-scheme: dark).
`scoped` Устарело	`scoped`	Устарело. Не ограничивает действие стилей в современных браузерах; используйте селекторы контейнера либо CSS @scope.
`type`	`text/css`	Указывает тип данных, который может быть передан посредством сети интернет с применением стандарта MIME (MIME-типы). В HTML5 атрибут `type` больше не требуется для CSS, так как значением по умолчанию является `type =` `"text/css"`.
`blocking`	`render`	Запрос блокировки рендеринга при обработке стилей в head; в частности, для динамически вставленного элемента.

Примеры, попробуйте сами

Пример использования тега <style>

Измените разметку во вкладке HTML и сравните результат.

base.css

CSS

h1 {
    text-align: center;
    color: red;
}
p {
    color: blue;
}

index.html

HTML

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Пример использования тега &lt;style&gt;</title>
  </head>
  <body>
    <h1>Заголовок первого уровня.</h1>
    <p>Параграф</p>
  </body>
</html>

Пример использования атрибута media HTML тега <style>

Измените разметку во вкладке HTML и сравните результат.

base.css

CSS

h2 {
    color: brown;
}
p {
    color: red;
}
body {
    background-color: khaki;
}

@media print {
    h2,
    p {
        color: #000;
    }
    body {
        background-color: #fff;
    }
}

index.html

HTML

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />

    <title>Пример использования атрибута media HTML тега &lt;style&gt;</title>
  </head>
  <body>
    <h2>Утконос</h2>
    <p>
      <b>Утконос (лат. Ornithorhynchus anatinus)</b> — водоплавающее млекопитающее отряда однопроходных, обитающее в
      Австралии. Это единственный современный представитель семейства утконосовых (Ornithorhynchidae); вместе с ехиднами
      образует отряд однопроходных (Monotremata) — млекопитающих, по ряду признаков близких к рептилиям. Это уникальное
      животное является одним из символов Австралии; оно изображено на реверсе австралийской монеты в 20 центов.
    </p>
  </body>
</html>

Отличия HTML 4.01 от HTML 5

Исторический атрибут scoped удалён из современного HTML. Для обычного CSS атрибут type не требуется.

Значение CSS по умолчанию

CSS

style {
display: none;
}

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML тег <style>