Краткое описание

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

Атрибуты

This element includes the global attributes.

type
Этот атрибут определяет язык стиля в виде MIME-типа (кодировка не указывается). Этот атрибут необязателен, и при отсутствии считается «text/css».
media
К какому виду медиа должен применяться этот стиль. Значение этого атрибута — media query, которое при отсутствии атрибута будет all.
scoped
Если указан этот атрибут, то стиль применяется только внтури своего родительского элемента. Если не указан, то стиль применяется ко всему документу.
title
Specifies alternative style sheet sets.
disabled
If set, disables (does not apply) the style rules, specified within the element, to the Document.

Примеры

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

<style type="text/css">
body {
  color:red;
}
</style> 

Таблица стилей с ограниченной областью действия

<article>
  <div>Атрибут scoped позволяет включить элементы стиля в середине документа.
   Внутренние правила применяются только внутри родительского элемента.</div>
  <p>Этот текст должен быть чёрным. Если он красный, ваш браузер не поддерживает атрибут scoped.</p>
  <section>
    <style scoped>
      p { color: red; }
    </style>
    <p>Этот должен быть красным.</p>
  </section>
</article>

Live sample

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

Specification Status Comment
HTML Living Standard
Определение 'style' в этой спецификации.
Живой стандарт Нет отличий от HTML5.
HTML5
Определение 'style' в этой спецификации.
Рекомендация Добавлен атрибут scoped
HTML 4.01 Specification
Определение 'style' в этой спецификации.
Рекомендация  

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Базовая поддержка (Да) 1.0 (1.7 или ранее) (Да) (Да) (Да)
scoped 20 [1] 21.0 (21.0)[2] Нет Нет Нет
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Базовая поддержка (Да) 1.0 (1.7 или ранее) (Да) (Да) (Да)
scoped ? 25.0 (25.0)[2] Нет Нет Нет

[1] Поддерживается в Chrome с 20+ по 34 при включённом флаге "Enable <style scoped>" или "experimental WebKit features" в chrome://flags. Удалён в Chrome 35+ из-за сложности кода.
[2] Gecko 20 и более новые реализуют псевдо-классы :scope, но должна быть включена настройка layout.css.scope-pseudo.enabled. This is only the case by default in Nightly and Aurora test versions.

См. также

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

Метки документа и участники

Внесли вклад в эту страницу: warsan, teoli, Aleksej, dronov
Обновлялась последний раз: warsan,