当前位置：文江博客知识库简体中文文档 Web HTML Element style

<style> - HTML（超文本标记语言）编辑

概要

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

内容类别元数据内容，如果指定了 scoped 属性：流内容
允许的内容与 type 属性相匹配的文本内容，也就是 text/css
标签忽略不允许，开始标签和结束标签都不能省略。
允许的父元素任意接受元数据内容的元素
Permitted ARIA rolesNone
DOM接口 HTMLStyleElement

属性

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

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

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.