<style>

概要

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

属性

该元素包含所有全局属性

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

nonce

一种加密的随机数(一次使用的数字),用于在style-src Content-Security-Policy中将内联样式列入白名单。 服务器每次发送策略时都必须生成一个唯一的随机数值。 提供一个无法猜测的随机数非常重要,因为绕开资源策略是微不足道的。
title
指定可选的样式表。

已淘汰属性

scoped

此属性指定样式仅适用于其父项和子项的元素。

以后可能会根据https://github.com/w3c/csswg-drafts/issues/3547重新引入此属性。 如果要立即使用该属性,则可以使用polyfill

示例

一个简单的样式表

在下面的例子中,我们将简单的样式应用到文档中

<!doctype html>
<html>
<head>
  <style>
    p {
      color: red;
    }
  </style> 
</head>
<body>
  <p>This is my paragraph.</p>
</body>
</html>

多种样式元素

在这个例子中包含两种样式<style>元素

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

包含媒体(media)选择

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

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


规范

规范 状态 注释
HTML Living Standard
style
Living Standard
HTML5
style
Recommendation type 属性变为可选
HTML 4.01 Specification
style
Recommendation

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
styleChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
mediaChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
scoped
DeprecatedNon-standard
Chrome No support 19 — 35
Disabled
No support 19 — 35
Disabled
Disabled From version 19 until version 35 (exclusive): this feature is behind the Enable <style scoped> preference (needs to be set to true). To change preferences in Chrome, visit chrome://flags.
Edge No support NoFirefox No support 55 — 61
Notes Disabled
No support 55 — 61
Notes Disabled
Notes This attribute was hidden behind a pref because no other browsers support it (See bug 1291515).
Disabled From version 55 until version 61 (exclusive): this feature is behind the layout.css.scoped-style.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support 21 — 55
IE No support NoOpera No support 15 — 22
Disabled
No support 15 — 22
Disabled
Disabled From version 15 until version 22 (exclusive): this feature is behind the Enable <style scoped> preference (needs to be set to true).
Safari No support NoWebView Android No support NoChrome Android No support 25 — 35
Disabled
No support 25 — 35
Disabled
Disabled From version 25 until version 35 (exclusive): this feature is behind the Enable <style scoped> preference (needs to be set to true). To change preferences in Chrome, visit chrome://flags.
Firefox Android No support 55 — 61
Notes Disabled
No support 55 — 61
Notes Disabled
Notes This attribute was hidden behind a pref because no other browsers support it (See bug 1291515).
Disabled From version 55 until version 61 (exclusive): this feature is behind the layout.css.scoped-style.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support 21 — 55
Opera Android No support 14 — 22
Disabled
No support 14 — 22
Disabled
Disabled From version 14 until version 22 (exclusive): this feature is behind the Enable <style scoped> preference (needs to be set to true).
Safari iOS No support NoSamsung Internet Android No support 1.5 — 3.0
titleChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
typeChrome Full support 1Edge Full support 12Firefox Full support 1
Notes
Full support 1
Notes
Notes Prior to 75, Firefox accepted any CSS media (MIME) type, with optional parameters. Starting in 75, this has been restricted to the string 'text/css', per the spec.
IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
No support  
No support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

查看更多