1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
|
---
title: <style>
slug: Web/HTML/Element/style
tags:
- 文档
- 样式表
translation_of: Web/HTML/Element/style
---
<div>{{HTMLRef}}</div>
<h2 id="概要">概要</h2>
<p><strong>HTML 的<style>元素</strong>包含文档的样式信息或者文档的部分内容。默认情况下，该标签的样式信息通常是<a href="/en-US/docs/Web/CSS">CSS</a>的格式。</p>
<p>{{EmbedInteractiveExample("pages/tabbed/style.html", "tabbed-standard")}}</p>
<ul class="htmlelt">
<li><dfn><a href="/zh_CN/docs/HTML/Content_categories">内容类别</a></dfn><a href="/zh-CN/docs/Web/HTML/Content_categories#Metadata_content">元数据内容</a>，如果指定了 <code>scoped</code> 属性：<a href="/zh-CN/docs/Web/HTML/Content_categories#Flow_content">流内容</a></li>
<li><dfn>允许的内容</dfn>与 <code>type</code> 属性相匹配的文本内容，也就是 <code>text/css</code></li>
<li><dfn>标签忽略</dfn> {{no_tag_omission}}</li>
<li><dfn>允许的父元素</dfn> 任意接受<a href="/zh-CN/docs/Web/HTML/Content_categories#Metadata_content">元数据内容</a>的元素</li>
<li><dfn>Permitted ARIA roles</dfn>None</li>
<li><dfn>DOM 接口</dfn> {{domxref("HTMLStyleElement")}}</li>
</ul>
<h2 id="属性">属性</h2>
<p>该元素包含所有<a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a>。</p>
<dl>
<dt>{{htmlattrdef("type")}}</dt>
<dd>该属性以 MIME 类型（不应该指定字符集）定义样式语言。如果该属性未指定，则默认为 <code>text/css</code>。</dd>
<dt>{{htmlattrdef("media")}}</dt>
<dd>该属性规定该样式适用于哪个媒体。属性的取值<a href="/zh-CN/docs/Web/Guide/CSS/Media_queries">CSS 媒体查询</a>，默认值为 <code>all</code>。</dd>
<dt>
<p>{{htmlattrdef("nonce")}}</p>
</dt>
<dd>一种加密的随机数（一次使用的数字），用于在<a href="/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/style-src">style-src Content-Security-Policy</a>中将内联样式列入白名单。 服务器每次发送策略时都必须生成一个唯一的随机数值。 提供一个无法猜测的随机数非常重要，因为绕开资源策略是微不足道的。</dd>
<dt>{{htmlattrdef("title")}}</dt>
<dd>指定可选的样式表。</dd>
<dt>
<h3 id="已淘汰属性">已淘汰属性</h3>
<p>{{htmlattrdef("scoped")}} {{non-standard_inline}} {{deprecated_inline}}</p>
<p>此属性指定样式仅适用于其父项和子项的元素。</p>
<div class="blockIndicator note">
<p>以后可能会根据<a href="https://github.com/w3c/csswg-drafts/issues/3547">https://github.com/w3c/csswg-drafts/issues/3547</a>重新引入此属性。 如果要立即使用该属性，则可以使用<a href="https://github.com/samthor/scoped">polyfill</a>。</p>
</div>
</dt>
</dl>
<h2 id="示例">示例</h2>
<h3 id="一个简单的样式表">一个简单的样式表</h3>
<p>在下面的例子中，我们将简单的样式应用到文档中</p>
<pre><!doctype html>
<html>
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>This is my paragraph.</p>
</body>
</html></pre>
<p>{{EmbedLiveSample('A_simple_stylesheet', '100%', '60')}}</p>
<h3 id="多种样式元素">多种样式元素</h3>
<p>在这个例子中包含两种样式<code><style></code>元素</p>
<pre><!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>
</pre>
<div>{{EmbedLiveSample('Multiple_style_elements', '100%', '60')}}</div>
<div>
<h3 id="包含媒体media选择">包含媒体 (media) 选择</h3>
<p>这个例子根据前一个例子构建，在第二个<style>中，视图宽度小于 500px 时生效</p>
<pre><!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></pre>
<p>{{EmbedLiveSample('Including_a_media_query', '100%', '60')}}</p>
</div>
<h2 id="规范"><br>
<span style="font-size: 2.33333rem; letter-spacing: -0.00278rem;">规范</span></h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">注释</th>
</tr>
<tr>
<td>{{ SpecName('HTML WHATWG', 'document-metadata.html#the-style-element', 'style') }}</td>
<td>{{ Spec2('HTML WHATWG') }}</td>
<td></td>
</tr>
<tr>
<td>{{ SpecName('HTML5 W3C', 'document-metadata.html#the-style-element', 'style') }}</td>
<td>{{ Spec2('HTML5 W3C') }}</td>
<td>type 属性变为可选</td>
</tr>
<tr>
<td>{{ SpecName('HTML4.01', 'present/styles.html#h-14.2.3', 'style') }}</td>
<td>{{ Spec2('HTML4.01') }}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("html.elements.style")}}</p>
<h2 id="查看更多">查看更多</h2>
<ul>
<li>{{HTMLElement("link")}}元素允许使用外部的样式表。</li>
<li><a href="/zh-CN/docs/Web/CSS/Alternative_style_sheets">Alternative Style Sheets</a></li>
</ul>
|
