<style>：样式信息元素
Baseline 广泛可用 *
<style> HTML 元素包含文档或文档一部分的样式信息。它包含 CSS，这些 CSS 将应用于包含 <style> 元素的文档内容。
试一试
<style>
p {
color: #26b72b;
}
code {
font-weight: bold;
}
</style>
<p>
This text will be green. Inline styles take precedence over CSS included
externally.
</p>
<p style="color: blue">
The <code>style</code> attribute can override it, though.
</p>
p {
color: red;
}
<style> 元素必须包含在文档的 <head> 中。通常，最好将样式放在外部样式表中，并使用 <link> 元素应用它们。
如果在文档中包含多个 <style> 和 <link> 元素，它们将按照在文档中包含的顺序应用于 DOM — 确保按照正确的顺序包含它们，以避免意外的级联问题。
与 <link> 元素一样，<style> 元素可以包含 media 属性，其中包含 媒体查询，允许您根据视口宽度等媒体功能选择性地将内部样式表应用于文档。
属性
此元素包含全局属性。
阻塞-
此属性明确指示在获取关键子资源和将样式表应用于文档时应阻止某些操作。通常，
@import导入的样式表被视为关键子资源，而background-image和字体则不是。要阻止的操作必须是下面列出的阻塞标记的空格分隔列表。目前只有一个标记render: 屏幕上的内容渲染被阻塞。
注意： 只有文档
<head>中的style元素才可能阻塞渲染。默认情况下，当浏览器在解析过程中发现<head>中的style元素时，它就会阻塞渲染。如果此类style元素是通过脚本动态添加的，则必须另外设置blocking = "render"才能阻塞渲染。 媒体-
此属性定义了样式应应用于哪些媒体。其值是 媒体查询，如果缺少该属性，则默认为
all。 nonce-
一个加密的 nonce（仅使用一次的数字），用于允许
style-srcContent-Security-Policy 中的内联样式。服务器必须在每次传输策略时生成一个唯一的 nonce 值。提供一个无法猜测的 nonce 至关重要，否则绕过资源策略将是轻而易举的事。 title-
此属性指定 备用样式表集。
已弃用属性
type已弃用-
不应提供此属性：如果提供，唯一允许的值是空字符串或不区分大小写的
text/css。
示例
一个基本样式表
在以下示例中，我们为文档应用了一个简短的样式表
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Test page</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>This is my paragraph.</p>
</body>
</html>
结果
多个样式元素
在此示例中，我们包含了两个 <style> 元素 — 请注意，后续 <style> 元素中的冲突声明如何覆盖较早的声明，前提是它们的 特异性相等。
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Test page</title>
<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>
结果
包含媒体查询
在此示例中，我们基于上一个示例，在第二个 <style> 元素上包含了一个 media 属性，这样它仅在视口宽度小于 500px 时应用。
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Test page</title>
<style>
p {
color: white;
background-color: blue;
padding: 5px;
border: 1px solid black;
}
</style>
<style media="(width < 500px)">
p {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<p>This is my paragraph.</p>
</body>
</html>
结果
技术摘要
| 内容类别 | 元数据内容. |
|---|---|
| 允许内容 | 与 type 属性匹配的文本内容，即 text/css。 |
| 标签省略 | 两个标签都不能省略。 |
| 允许父级 | 任何接受 元数据内容的元素。 |
| 隐式 ARIA 角色 | 没有对应的角色 |
| 允许的 ARIA 角色 | 不允许 role |
| DOM 接口 | HTMLStyleElement |
规范
| 规范 |
|---|
| HTML # the-style-element |
浏览器兼容性
加载中…
另见
<link>元素，它允许我们将外部样式表应用于文档。- 备用样式表