style
Краткое описание
HTML-элемент <style> содержит стилевую информацию для документа или его части. По умолчанию стилевые инструкции внутри этого элемента считаются написанными на CSS.
- Категории содержимого (en-US)Metadata content (en-US), and if the
scoped
attribute is present: flow content (en-US). - Permitted content Style information matching the language of the
type
attribute. - Tag omission Нет, открывающий и закрывающий теги обязательны.
- Допустимые родительские элементы ...
- Интерфейс DOM
HTMLStyleElement
(en-US)
Атрибуты
This element includes the global attributes.
type
- Этот атрибут определяет язык стиля в виде MIME-типа (кодировка не указывается). Этот атрибут необязателен, и при отсутствии считается «
text/css
». media
- К какому виду медиа должен применяться этот стиль. Значением этого атрибута является медиавыражение (en-US), которое по умолчанию соответствует
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! (en-US)
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>
, позволяющий использовать внешние таблицы стилей.