<style>

概要

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

尝试一下

属性

该元素包含所有全局属性。

type

该属性以 MIME 类型（不应该指定字符集）定义样式语言。如果该属性未指定，则默认为 text/css。

media

该属性规定该样式适用于哪个媒体。属性的取值CSS 媒体查询，默认值为 all。

nonce

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

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>

规范

Specification
HTML Standard
# the-style-element

浏览器兼容性

BCD tables only load in the browser

查看更多