--- title: style slug: Web/HTML/Element/style tags: - HTML - Reference - Référence(2) - Веб - метаданные документа HTML - элементы translation_of: Web/HTML/Element/style ---

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

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

Атрибуты

This element includes the global attributes.

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

{{ EmbedLiveSample('Таблица_стилей_с_ограниченной_областью_действия', '100%', '200') }}

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

Specification Status Comment
{{ SpecName('HTML WHATWG', 'document-metadata.html#the-style-element', 'style') }} {{ Spec2('HTML WHATWG') }} Нет отличий от {{ SpecName('HTML5 W3C') }}.
{{ SpecName('HTML5 W3C', 'document-metadata.html#the-style-element', 'style') }} {{ Spec2('HTML5 W3C') }} Добавлен атрибут scoped
{{ SpecName('HTML4.01', 'present/styles.html#h-14.2.3', 'style') }} {{ Spec2('HTML4.01') }}  

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

{{CompatibilityTable}}
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Базовая поддержка {{CompatVersionUnknown}} {{CompatGeckoDesktop(1.0)}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
scoped 20 [1] {{CompatGeckoDesktop(21.0)}}[2] {{CompatNo}} {{CompatNo}} {{CompatNo}}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Базовая поддержка {{CompatVersionUnknown}} {{CompatGeckoDesktop(1.0)}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
scoped {{CompatUnknown}} {{CompatGeckoMobile(25.0)}}[2] {{CompatNo}} {{CompatNo}} {{CompatNo}}

[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.

См. также

{{HTMLRef}}