<style>: The Style Information element

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

¥The <style> HTML element contains style information for a document, or part of a document. It contains CSS, which is applied to the contents of the document containing the <style> element.

Try it

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

¥The <style> element must be included inside the <head> of the document. In general, it is better to put your styles in external stylesheets and apply them using <link> elements.

如果你在文档中包含多个 <style> 和 <link> 元素，它们将按照它们在文档中包含的顺序应用到 DOM — 确保以正确的顺序包含它们，以避免意外的级联问题。

¥If you include multiple <style> and <link> elements in your document, they will be applied to the DOM in the order they are included in the document — make sure you include them in the correct order, to avoid unexpected cascade issues.

与 <link> 元素相同，<style> 元素可以包含包含媒体查询的 media 属性，允许你根据媒体功能（例如视口宽度）有选择地将内部样式表应用到文档。

¥In the same manner as <link> elements, <style> elements can include media attributes that contain media queries, allowing you to selectively apply internal stylesheets to your document depending on media features such as viewport width.

属性

¥Attributes

该元素包括全局属性。

¥This element includes the global attributes.

blocking Experimental

此属性明确指示在获取关键子资源时应阻止某些操作。@import-ed 样式表通常被视为关键子资源，而 background-image 和字体则不是。

render：屏幕上内容的呈现被阻止。

media

该属性定义样式应应用于哪些媒体。它的值为媒体查询，如果该属性丢失，则默认为 all。

nonce

加密随机数（使用一次的数字），用于允许 style-src 内容安全策略中的内联样式。服务器每次传输策略时都必须生成唯一的随机数值。提供一个无法猜测的随机数至关重要，否则绕过资源的策略是微不足道的。

title

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

已弃用的属性

¥Deprecated attributes

type Deprecated: 不应提供此属性：如果是，则唯一允许的值为空字符串或 text/css 的不区分大小写的匹配。

示例

¥Examples

一个简单的样式表

¥A simple stylesheet

在下面的示例中，我们将一个非常简单的样式表应用于文档：

¥In the following example, we apply a very simple stylesheet to a document:

html

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Test page</title>
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>This is my paragraph.</p>
  </body>
</html>

结果

¥Result

多种风格元素

¥Multiple style elements

在此示例中，我们包含了两个 <style> 元素 - 请注意后一个 <style> 元素中的冲突声明如何覆盖前一个元素中的声明（如果它们具有相同的 specificity）。

¥In this example we've included two <style> elements — notice how the conflicting declarations in the later <style> element override those in the earlier one, if they have equal specificity.

html

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Test page</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>This is my paragraph.</p>
  </body>
</html>

结果

¥Result

包括媒体查询

¥Including a media query

在此示例中，我们在前一个示例的基础上构建，包括第二个 <style> 元素上的 media 属性，因此它仅在视口宽度小于 500px 时应用。

¥In this example we build on the previous one, including a media attribute on the second <style> element so it is only applied when the viewport is less than 500px in width.

html

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Test page</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>This is my paragraph.</p>
  </body>
</html>

结果

¥Result

技术总结

¥Technical summary

内容类别	元数据内容.
允许的内容	匹配 `type` 属性的文本内容，即 `text/css`。
标签遗漏	两个标签都不可省略。
允许的父级	任何接受元数据内容的元素。
隐式 ARIA 角色	没有对应的角色
允许的 ARIA 角色	不允许 `role`
DOM 接口	`HTMLStyleElement`

规范

Specification
HTML Standard # the-style-element

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看

¥See also

<link> 元素，它允许我们将外部样式表应用到文档。
替代样式表