Краткое описание
HTML-элемент <style> содержит стилевую информацию для документа или его части. По умолчанию стилевые инструкции внутри этого элемента считаются написанными на CSS.
- Категории содержимогоMetadata content, and if the
scopedattribute is present: flow content . - Permitted content Style information matching the language of the
typeattribute. - 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
Спецификации
| 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>, позволяющий использовать внешние таблицы стилей.