CSS：外部样式表/内部样式表/内联样式
来源：程序员人生 发布时间：2014-12-08 08:25:59 阅读次数：4389次
在html中，援用CSS样式有3中方式：外部样式表，内部样式表，内联样式。
本文代码整理自w3school：http://www.w3school.com.cn
（1）外部样式表，指在html文件的head标签中，使用link援用另外一个css文件中定义的样式。如果某个样式表需要被使用许屡次，使用外部样式表是最好的选择。
html文件:
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>援用外部css样式</title>
<!--外部样式表-->
<head>
<link rel="stylesheet" type="text/css" href="css/baseStyle.css">
</head>
<body>
<h1>h1级别的标题：红色</h1>
<h2>h2级别的标题：绿色</h2>
<h3>h3级别的标题：蓝色</h3>
<p>这是1个段落：灰色</p>
</body>
</html>
CSS样式，baseStyle.css:
h1 {color:red}
h2 {color:green}
h3 {color:blue}
p {color:gray}
（2）内部样式表，指在html文件的head标签内声明样式。当单个文档需要特殊的样式时，就应当使用内部样式表。
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>内部样式表</title>
<!--内部样式表-->
<head>
<style type="text/css">
h1 {color:red}
h2 {color:green}
h3 {color:blue}
p{color:gray}
</style>
</head>
<body>
<h1>h1级别的标题：红色</h1>
<h2>h2级别的标题：绿色</h2>
<h3>h3级别的标题：蓝色</h3>
<p>这是1个段落：灰色</p>
<br/><br/>
</body>
</html>
（3）内联样式（1般不建议使用），指在某个html内指定改标签内容的样式。由于要将表现和内容混杂在1起，内联样式会损失掉样式表的许多优势。
<!--内联样式-->
<!--不带下划线的链接-->
<a href="http://www.baidu.com" style="text-decoration:none" target="_blank">
这是1个不带下划线的链接
</a>
生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
