<style>

概要

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

属性

该元素包含所有全局属性

type
该属性以MIME类型(不应该指定字符集)定义样式语言。如果该属性未指定,则默认为 text/css
media
该属性规定该样式适用于哪个媒体。属性的取值CSS媒体查询,默认值为 all

nonce

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

规范

规范 状态 注释
HTML Living Standard
style
Living Standard
HTML5
style
Recommendation type 属性变为可选
HTML 4.01 Specification
style
Recommendation

浏览器兼容性

BCD tables only load in the browser

查看更多