HTML <style> 标签

定义和用法

<style> 标签用于定义文档的样式信息 (CSS)。

在 <style> 元素中，您可以指定 HTML 元素在浏览器中的呈现方式。

请注意，style 元素定义的是 HTML 文档内嵌的 CSS 样式，而 link 元素则是用来导入外部样式表中的样式。

style 元素可以出现在 HTML 文档中的各个部分。一个文档可以包含多 style 元素，因此不必把所有样式定义都塞进 head 部分。在使用模板引擎生成页面的情况下这个特性很有帮助，因为这样一来就可以用页面特有的样式为模板定义的样式提供补充。

另请参阅：

HTML 教程：HTML CSS

CSS 教程：CSS 教程

HTML DOM 参考手册：Style 对象

实例

例子 1

使用 <style> 元素将简单的样式表应用于 HTML 文档：

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
</head>
<body>

<h1>这是标题</h1>
<p>这是一个段落。</p>

</body>
</html>

亲自试一试

例子 2

相同元素的多种样式：

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
<style>
  h1 {color:green;}
  p {color:pink;}
</style>
</head>
<body>

<h1>这是标题</h1>
<p>这是一个段落。</p>

</body>
</html>

亲自试一试

提示和注释

注意：当浏览器读取样式表时，它会根据样式表中的信息格式化 HTML 文档。如果在不同的样式表中为同一个选择器（元素）定义了一些属性，则将使用上次读取的样式表中的值（请参见上面的示例）！

提示：要链接到外部样式表，请使用 <link> 标签。

提示：要了解有关样式表的更多信息，请阅读我们的 CSS 教程。

属性

属性 值 描述
media 媒体查询 规定样式使用的媒体。
type text/css 规定 <style> 标签的媒体类型。

全局属性

<style> 标签还支持 HTML 中的全局属性。

事件属性

<style> 标签还支持 HTML 中的事件属性。

默认的 CSS 设置

大多数浏览器将显示具有以下默认值的 <style> 元素：

style {
  display: none;
}

浏览器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持