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

结果

多个 style 元素

在此示例中，我们包含了两个 <style> 元素——请注意，如果后面的 <style> 元素中的冲突声明具有相同的特异性，则它们会覆盖前面的元素中的声明。

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>

结果

包含媒体查询

在此示例中，我们基于上一个示例进行构建，在第二个 <style> 元素上包含 media 属性，以便仅在视口宽度小于 500px 时应用它。

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>

结果

技术摘要

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

规范

规范
HTML 标准 # the-style-element

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

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