<style>:样式信息元素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
HTML 的 <style>
元素包含文档的样式信息或文档的部分内容。其中的 CSS 会应用于包含 <style>
元素的文档内容。
尝试一下
属性
该元素包含所有全局属性。
blocking
实验性-
该属性明确指出在获取关键子资源时应阻止某些操作。通常,
@import
样式表被视为关键子资源,而background-image
和字体则不被视为关键子资源。render
:屏幕上的内容渲染被阻断。
media
-
该属性规定该样式适用于哪个媒体。属性的取值为媒体查询,如果属性缺失,则默认为
all
。 nonce
-
用于允许在 style-src Content-Security-Policy 中使用内联样式的密码学 nonce(只使用一次的数字)。每次传输策略时,服务器都必须生成一个唯一的 nonce 值。提供一个无法猜测的 nonce 值至关重要,否则绕过资源策略将变得微不足道。
title
-
该属性指定替代样式表集。
已弃用的属性
type
已弃用-
不应提供该属性:如果提供,唯一允许的值是空字符串或不区分大小写匹配的
text/css
。
示例
一个简单的样式表
在下面的例子中,我们将简单的样式应用到文档中:
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>测试页面</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>这是一个段落。</p>
</body>
</html>
多个样式元素
在本例中,我们包含了两个 <style>
元素。请注意,如果后一个 <style>
元素中的优先级相同,那么后一个元素中的冲突声明将覆盖前一个元素中的冲突声明。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>测试页面</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>这是一个段落。</p>
</body>
</html>
包含媒体查询
在这个示例中,我们在前一个示例的基础上,在第二个 <style>
元素上加入了 media
属性,因此只有当视口宽度小于 500px 时才会应用该属性。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>测试页面</title>
<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>这是一个段落。</p>
</body>
</html>
技术概要
内容分类 | 元数据内容。 |
---|---|
允许的内容 | 与 type 属性匹配的文本内容,即 text/css 。 |
标签省略 | 开始和结束标签都不允许省略。 |
允许的父元素 | 任何接受元数据内容的元素。 |
隐含的 ARIA 角色 | 没有相应的角色 |
允许的 ARIA 角色 | 没有允许的 role |
DOM 接口 | HTMLStyleElement |
规范
Specification |
---|
HTML Standard # the-style-element |
浏览器兼容性
BCD tables only load in the browser