--- 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>