style

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

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

• Категории содержимогоMetadata content, and if the scoped attribute is present: flow content .
• Permitted content Style information matching the language of the type attribute.
• Tag omission None, both the starting and ending tag are mandatory.
• Допустимые родительские элементы ...
• Интерфейс DOM HTMLStyleElement

Атрибуты

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

Live sample

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

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

[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>, позволяющий использовать внешние таблицы стилей.