---
title: <style>
slug: Web/HTML/Element/style
tags:
  - 文档
  - 样式表
translation_of: Web/HTML/Element/style
---
<div>{{HTMLRef}}</div>

<h2 id="概要">概要</h2>

<p><strong>HTML的&lt;style&gt;元素</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>&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
    p {
      color: red;
    }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;p&gt;This is my paragraph.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>

<p>{{EmbedLiveSample('A_simple_stylesheet', '100%', '60')}}</p>

<h3 id="多种样式元素">多种样式元素</h3>

<p>在这个例子中包含两种样式<code>&lt;style&gt;</code>元素</p>

<pre>&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
    p {
      color: white;
      background-color: blue;
      padding: 5px;
      border: 1px solid black;
    }
  &lt;/style&gt;
  &lt;style&gt;
    p {
      color: blue;
      background-color: yellow;
    }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;p&gt;This is my paragraph.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

<div>{{EmbedLiveSample('Multiple_style_elements', '100%', '60')}}</div>

<div>
<h3 id="包含媒体media选择">包含媒体(media)选择</h3>

<p>这个例子根据前一个例子构建,在第二个&lt;style&gt;中,视图宽度小于500px 时生效</p>

<pre>&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
    p {
      color: white;
      background-color: blue;
      padding: 5px;
      border: 1px solid black;
    }
  &lt;/style&gt;
  &lt;style media="all and (max-width: 500px)"&gt;
    p {
      color: blue;
      background-color: yellow;
    }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;p&gt;This is my paragraph.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</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>