这篇翻译不完整。请帮忙从英语翻译这篇文章

概要

HTML的<style>元素包含文档的样式信息或者文档的部分内容。默认情况下,该标签的样式信息通常是CSS的格式。

属性

该元素包含所有全局属性

type
该属性以MIME类型(不应该指定字符集)定义样式语言。如果该属性未指定,则默认为 text/css
media
该属性规定该样式适用于哪个媒体。属性的取值CSS媒体查询,默认值为 all

nonce

A cryptographic nonce (number used once) to whitelist inline styles in a style-src Content-Security-Policy. The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource’s policy is otherwise trivial.
title
指定可选的样式表。
scoped
如果该属性存在,则样式应用于其父元素;如果不存在,则应用于整个文档。

非标准
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behaviour my change in the future.

已淘汰
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

示例

一个简单的样式表

<style type="text/css">
body {
  color:red;
}
</style> 

一个scoped的样式表

<article>
  <div>The scoped attribute allows for you to include style elements mid-document.
   Inside rules only apply to the parent element.</div>
  <p>This text should be black. If it is red your browser does not support the scoped attribute.</p>
  <section>
    <style scoped>
      p { color: red; }
    </style>
    <p>This should be red.</p>
  </section>
</article>

现场示例

规范

规范 状态 注释
HTML Living Standard
style
Living Standard HTML5没有改变。
HTML5
style
Recommendation 增加scoped属性。
HTML 4.01 Specification
style
Recommendation  

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本支持 (Yes) 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
scoped 20 [1] 21.0 (21.0)[2] 未实现 未实现 未实现
特性 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本支持 (Yes) 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
scoped ? 25.0 (25.0)[2] 未实现 未实现 未实现

[1] 在Chrome 20+到34,同过在chrome://flags中打开“Enable <style scoped>“或者”实验性WebKit特性”来支持。在Chrome 35+由于代码完成而移除了这些flags
[2] Gecko在20及更高版本实现:scope 伪类,但是layout.css.scope-pseudo.enable必须被设置为true。这仅是在每夜和Aurora测试版本上是默认的。

 

查看更多

  • <link>元素允许使用外部的样式表。

文档标签和贡献者

标签: 
此页面的贡献者: VdoG, linghuam, RandyOu, mengzyou
最后编辑者: VdoG,