<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

查看更多