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

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 Standard
# the-style-element

浏览器兼容性

BCD tables only load in the browser

参见