HTML <style> 标签 详解
HTML基础 2022-06-02 09:43:13小码哥的IT人生shichen
HTML <style> 标签
实例
<html>
<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>
<body>
<h1>Header 1</h1>
<p>A paragraph.</p>
</body>
</html>
完整实例【亲自试一试】：
<html>
<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>
<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
<style> 标签用于为 HTML 文档定义样式信息。
在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。
type 属性是必需的，定义 style 元素的内容。唯一可能的值是 "text/css"。
style 元素位于 head 部分中。
浏览器支持
| 元素 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| <style> | Yes | Yes | Yes | Yes | Yes |
所有主流浏览器都支持 <style> 标签。
HTML 与 XHTML 之间的差异
NONE
必需的属性
| 属性 | 值 | 描述 |
|---|---|---|
| type | text/css | 规定样式表的 MIME 类型。 |
可选的属性
| 属性 | 值 | 描述 |
|---|---|---|
| media |
|
为样式表规定不同的媒介类型。 |
全局属性
<style> 标签支持 HTML 中的全局属性。
事件属性
<style> 标签支持 HTML 中的事件属性。
TIY 实例
完整实例【HTML中的样式】：
<html>
<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>
<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化。
完整实例【没有下划线的链接】：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
</head>
<body>
<a href="/demo/example/html/lastpage.html" style="text-decoration:none">
这是一个链接！
</a>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
本例演示如何使用样式属性做一个没有下划线的链接。
完整实例【链接到一个外部样式表】：
<html>
<head>
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
</head>
<body>
<h1>我通过外部样式表进行格式化。</h1>
<p>我也一样！</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
本例演示如何<link>标签链接到一个外部样式表。
相关页面
HTML DOM 参考手册：Style 对象
