<style>
概要
HTML 的 <style>
元素包含文档的样式信息或者文档的部分内容。默认情况下,该标签的样式信息通常是CSS的格式。
尝试一下
- 内容类别 (en-US)元数据内容,如果指定了
scoped
属性:流内容 - 允许的内容与
type
属性相匹配的文本内容,也就是text/css
- 标签忽略 不允许,开始标签和结束标签都不能省略。
- 允许的父元素 任意接受元数据内容的元素
- _Permitted ARIA roles_None
- DOM 接口
HTMLStyleElement
属性
该元素包含所有全局属性。
type
-
该属性以 MIME 类型(不应该指定字符集)定义样式语言。如果该属性未指定,则默认为
text/css
。 media
-
该属性规定该样式适用于哪个媒体。属性的取值CSS 媒体查询,默认值为
all
。 nonce
-
一种加密的随机数(一次使用的数字),用于在style-src Content-Security-Policy (en-US)中将内联样式列入白名单。服务器每次发送策略时都必须生成一个唯一的随机数值。提供一个无法猜测的随机数非常重要,因为绕开资源策略是微不足道的。
title
-
指定可选的样式表。
已淘汰属性
scoped
非标准 已弃用-
此属性指定样式仅适用于其父项和子项的元素。
备注: 以后可能会根据https://github.com/w3c/csswg-drafts/issues/3547重新引入此属性。如果要立即使用该属性,则可以使用polyfill。
示例
一个简单的样式表
在下面的例子中,我们将简单的样式应用到文档中:
html
<!doctype html>
<html>
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>This is my paragraph.</p>
</body>
</html>
多种样式元素
在这个例子中包含两种样式 <style>
元素
html
<!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>
包含媒体 (media) 选择
这个例子根据前一个例子构建,在第二个 <style>
中,视图宽度小于 500px 时生效
html
<!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>
规范
Specification |
---|
HTML Standard # the-style-element |
浏览器兼容性
BCD tables only load in the browser
查看更多
<link>
元素允许使用外部的样式表。- Alternative Style Sheets