轻松上手,快乐学习!

HTML <style> 标签



实例

在 HTML 文档中使用 <style> 元素:

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

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

</body>
</html>
亲自试一试 »

下面有更多实例。


定义和用法

<style> 标签定义 HTML 文档的样式信息。

<style> 元素中,您可以规定在浏览器中如何呈现 HTML 文档。

每个 HTML 文档能包含多个 <style> 标签。


提示和注释

注释: 当浏览器读取样式表时,它将根据样式表中的信息格式化HTML文档。如果在不同的样式表中为同一选择器(元素)定义了某些属性,则将使用上次读取的样式表中的值(参见下面的示例)!

提示: 如需链接外部样式表,请使用 <link> 标签。

提示: 如需学习更多有关样式表的知识,请阅读我们的 CSS 教程

注释: 如果没有使用 "scoped" 属性,则每一个 <style> 标签必须位于 head 头部区域。


浏览器支持

元素
<style> Yes Yes Yes Yes Yes

属性

属性 描述
media media_query 为样式表规定不同的媒体类型。
scoped scoped 如果使用该属性,则样式仅仅应用到 style 元素的父元素及其子元素。
type text/css 规定样式表的 MIME 类型。

全局属性

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


事件属性

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


更多实例

实例

相同元素的多个样式:

<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 教程: HTML CSS

CSS 教程: CSS 教程

HTML DOM 参考手册: Style 对象


默认CSS设置

大多数浏览器将使用以下默认值显示 <style> 元素:

style {
  display: none;
}