码农教程 - 一技在手,衣食无忧! tools

HTML <style> 标签

❮上一节 完整的 HTML参考 下一节❯

示例

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

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

<h1>A heading</h1>
<p>A paragraph.</p>

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

下面有更多 "亲自试一试" 示例。

定义和用法

这个<style>标签用于定义文档的样式信息（CSS）。

在 - 的里面<style>element 您指定 HTML 元素应如何在浏览器中呈现。

提示和注释

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

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

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

浏览器支持

Element
<style> Yes Yes Yes Yes Yes

属性

Attribute Value Description
media media_query Specifies what media/device the media resource is optimized for
type text/css Specifies the media type of the <style> tag

全局属性

这个<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>This is a heading</h1>
<p>This is a paragraph.</p>

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

相关页面

HTML 教程：HTMLCSS

CSS教程：CSS 教程

HTML DOM 参考：样式对象

默认 CSS 设置

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

style {
  display: none;
}


❮上一节 完整的 HTML参考 下一节❯