程序员人生 网站导航

CSS:外部样式表/内部样式表/内联样式

栏目:htmlcss时间:2014-12-08 08:25:59

在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>


------分隔线----------------------------
------分隔线----------------------------

最新技术推荐