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
支持 支持 支持 支持 支持