码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-12-05 15:32:09      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:html   css   样式   

在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-8" />
<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>这是一个段落:灰色</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-8" />
<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>这是一个段落:灰色</p>

<br/><br/>
</body>
</html>
(3)内联样式(一般不建议使用),指在某个html内指定改标签内容的样式。由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。

<!--内联样式-->
<!--不带下划线的链接-->
<a href="http://www.baidu.com" style="text-decoration:none" target="_blank">
这是一个不带下划线的链接
</a>


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

标签:html   css   样式   

原文地址:http://blog.csdn.net/books1958/article/details/41725623

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!