HTML
<style>
element
contains style information for a document, or part of a document.
It contains CSS, which is applied to the contents of the document containing the
<style>
元素。
<style>
element must be included inside the
<head>
of the document. In general, it is better to put your styles in external stylesheets and apply them using
<link>
元素。
If you include multiple
<style>
and
<link>
elements in your document, they will be applied to the DOM in the order they are included in the document — make sure you include them in the correct order, to avoid unexpected cascade issues.
In the same manner as
<link>
elements,
<style>
elements can include
media
attributes that contain
media queries
, allowing you to selectively apply internal stylesheets to your document depending on media features such as viewport width.
此元素包括 全局属性 .
type
text/css
if it is not specified; values other than the empty string or
text/css
are not used.
注意：
There is very little reason to include this attribute in modern web documents.
media
all
if the attribute is missing.
nonce
title
scoped
This attribute specifies that the styles only apply to the elements of its parent(s) and children.
This attribute may be re-introduced in the future per https://github.com/w3c/csswg-drafts/issues/3547 . If you want to use the attribute now, you can use a polyfill .
In the following example, we apply a very simple stylesheet to a document:
<!doctype html>
<html>
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>This is my paragraph.</p>
</body>
</html>
In this example we've included two
<style>
elements — notice how the conflicting declarations in the later
<style>
element override those in the earlier one, if they have equal
specificity
.
<!doctype html>
<html>
<head>
<style>
p {
color: white;
background-color: blue;
padding: 5px;
border: 1px solid black;
}
</style>
<style>
p {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<p>This is my paragraph.</p>
</body>
</html>
In this example we build on the previous one, including a
media
attribute on the second
<style>
element so it is only applied when the viewport is less than 500px in width.
<!doctype html>
<html>
<head>
<style>
p {
color: white;
background-color: blue;
padding: 5px;
border: 1px solid black;
}
</style>
<style media="all and (max-width: 500px)">
p {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<p>This is my paragraph.</p>
</body>
</html>
| 内容类别 |
元数据内容
, and if the
scoped
attribute is present:
flow content
.
|
|---|---|
| 准许内容 |
Text content matching the
type
attribute, that is
text/css
.
|
| Tag omission | Neither tag is omissible. |
| Permitted parents | Any element that accepts metadata content . |
| Implicit ARIA role | 无对应角色 |
| Permitted ARIA roles |
No
role
permitted
|
| DOM 接口 |
HTMLStyleElement
|
| 规范 | 状态 | 注释 |
|---|---|---|
|
HTML 实时标准
The definition of 'style' in that specification. |
实时标准 | |
|
HTML5
The definition of 'style' in that specification. |
推荐 |
type
attribute becomes optional.
|
|
HTML 4.01 Specification
The definition of 'style' in that specification. |
推荐 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
style
|
Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 1 | IE 完整支持 3 | Opera 完整支持 3.5 | Safari 完整支持 1 | WebView Android 完整支持 1 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 10.1 | Safari iOS 完整支持 1 | Samsung Internet Android 完整支持 1.0 |
media
|
Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 1 | IE 完整支持 3 | Opera 完整支持 3.5 | Safari 完整支持 1 | WebView Android 完整支持 1 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 10.1 | Safari iOS 完整支持 1 | Samsung Internet Android 完整支持 1.0 |
scoped
弃用
非标
|
Chrome
不支持
19 — 35
Disabled
|
Edge 不支持 No |
Firefox
不支持
55 — 61
注意事项
Disabled
|
IE 不支持 No |
Opera
不支持
15 — 22
Disabled
|
Safari 不支持 No | WebView Android 不支持 No |
Chrome Android
不支持
25 — 35
Disabled
|
Firefox Android
不支持
55 — 61
注意事项
Disabled
|
Opera Android
不支持
14 — 22
Disabled
|
Safari iOS 不支持 No | Samsung Internet Android 不支持 1.5 — 3.0 |
title
|
Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 1 | IE 完整支持 3 | Opera 完整支持 3.5 | Safari 完整支持 1 | WebView Android 完整支持 1 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 10.1 | Safari iOS 完整支持 1 | Samsung Internet Android 完整支持 1.0 |
type
|
Chrome 完整支持 1 | Edge 完整支持 12 |
Firefox
完整支持
1
注意事项
|
IE 完整支持 3 | Opera 完整支持 3.5 | Safari 完整支持 1 | WebView Android 完整支持 1 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 10.1 | Safari iOS 完整支持 1 | Samsung Internet Android 完整支持 1.0 |
完整支持
不支持
非标。预期跨浏览器支持较差。
弃用。不要用于新网站。
见实现注意事项。
用户必须明确启用此特征。
<link>
element, which allows us to apply external stylesheets to a document.