diff options
Diffstat (limited to 'files/zh-cn/web/html/element/style/index.html')
| -rw-r--r-- | files/zh-cn/web/html/element/style/index.html | 178 |
1 files changed, 178 insertions, 0 deletions
diff --git a/files/zh-cn/web/html/element/style/index.html b/files/zh-cn/web/html/element/style/index.html new file mode 100644 index 0000000000..97a0b45b1f --- /dev/null +++ b/files/zh-cn/web/html/element/style/index.html @@ -0,0 +1,178 @@ +--- +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="https://wiki.developer.mozilla.org/en-US/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> + +<div class="hidden"> +<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("html.elements.style")}}</p> + +<h2 id="查看更多">查看更多</h2> + +<ul> + <li>{{HTMLElement("link")}}元素允许使用外部的样式表。</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets">Alternative Style Sheets</a></li> +</ul> |