<style>:样式信息元素

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

HTML<style> 元素包含文档的样式信息或文档的部分内容。其中的 CSS 会应用于包含 <style> 元素的文档内容。

尝试一下

<style> 元素必须包含在文档的 <head> 内。一般来说,最好将样式放在外部样式表中,然后使用 <link> 元素应用它们。

如果在文档中包含多个 <style><link> 元素,它们将按照在文档中包含的顺序应用到 DOM,请确保按照正确的顺序包含它们,以避免出现意想不到的层叠问题。

<link> 元素的方式相同,<style> 元素可以包含用于媒体查询media 属性,这样就可以根据视口宽度等媒体特性,有选择性地将内部样式表应用到文档中。

属性

该元素包含所有全局属性

blocking

该属性明确指出在获取关键子资源时应阻止某些操作。通常,@import 样式表被视为关键子资源,而 background-image 和字体则不被视为关键子资源。要阻止的操作必须是下面列出的以空格分隔的阻止标记列表。

  • render:屏幕上的内容渲染被阻断。
media

该属性规定该样式适用于哪个媒体。属性的取值为媒体查询,如果属性缺失,则默认为 all

nonce

用于允许在 style-src Content-Security-Policy 中使用内联样式的密码学 nonce(只使用一次的数字)。每次传输策略时,服务器都必须生成一个唯一的 nonce 值。提供一个无法猜测的 nonce 值至关重要,否则绕过资源策略将变得微不足道。

title

该属性指定替代样式表集。

已弃用的属性

type 已弃用

不应提供该属性:如果提供,唯一允许的值是空字符串或不区分大小写匹配的 text/css

示例

基础样式表

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

html
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>测试页面</title>
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>这是一个段落。</p>
  </body>
</html>

多个样式元素

在本例中,我们包含了两个 <style> 元素。请注意,如果后一个 <style> 元素中的优先级相同,那么后一个元素中的冲突声明将覆盖前一个元素中的冲突声明。

html
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>测试页面</title>
    <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>这是一个段落。</p>
  </body>
</html>

包含媒体查询

在这个示例中,我们在前一个示例的基础上,在第二个 <style> 元素上加入了 media 属性,因此只有当视口宽度小于 500px 时才会应用该属性。

html
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>测试页面</title>
    <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>这是一个段落。</p>
  </body>
</html>

技术概要

内容分类 元数据内容
允许的内容 type 属性匹配的文本内容,即 text/css
标签省略 开始和结束标签都不允许省略。
允许的父元素 任何接受元数据内容的元素。
隐含的 ARIA 角色 没有相应的角色
允许的 ARIA 角色 没有允许的 role
DOM 接口 HTMLStyleElement

规范

Specification
HTML
# the-style-element

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
style
blocking
media
type
Deprecated

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Deprecated. Not for use in new websites.
See implementation notes.

参见