HTML <style> 标签

实例

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. h1 {color:red}
  5. p {color:blue}
  6. </style>
  7. </head>
  8. <body>
  9. <h1>Header 1</h1>
  10. <p>A paragraph.</p>
  11. </body>
  12. </html>

定义和用法

<style> 标签用于为 HTML 文档定义样式信息。

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

type 属性是必需的,定义 style 元素的内容。唯一可能的值是 “text/css”。

style 元素位于 head 部分中。

浏览器支持

元素 Chrome Internet Explorer / Edge Firefox Safari Opera
<style> Yes Yes Yes Yes Yes

所有主流浏览器都支持 <style> 标签。

提示和注释

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

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

HTML 与 XHTML 之间的差异

NONE

必需的属性

属性 描述
type text/css 规定样式表的 MIME 类型。

可选的属性

属性 描述
media screen
tty
tv
projection
handheld
print
braille
aural
all
为样式表规定不同的媒介类型。

全局属性

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

事件属性

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

TIY 实例

HTML中的样式

本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化。

  1. <head>
  2. <style type="text/css">
  3. h1 {color: red}
  4. p {color: blue}
  5. </style>
  6. </head>
  7. <body>
  8. <h1>header 1</h1>
  9. <p>A paragraph.</p>
  10. </body>

没有下划线的链接

本例演示如何使用样式属性做一个没有下划线的链接。

  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  3. <meta http-equiv="Content-Language" content="zh-cn" />
  4. </head>
  5. <body>
  6. <a href="/example/html/lastpage.html" style="text-decoration:none">
  7. 这是一个链接!
  8. </a>
  9. </body>

链接到一个外部样式表

本例演示如何<link>标签链接到一个外部样式表。

  1. <head>
  2. <link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
  3. </head>
  4. <body>
  5. <h1>我通过外部样式表进行格式化。</h1>
  6. <p>我也一样!</p>
  7. </body>

相关页面

HTML DOM 参考手册:Style 对象