Notice网站公告
Solution解决方案
DIV CSS技术首页 > 知识中心 > DIV CSS技术 >

CSS控制页面的四种方式和四种方式的优先级

CSS控制HTML页面效果的方式有四种,分别为:行内方式,内嵌方式,链接方式,导入方式。
1.行内方式
在四种样式中行内方式作为最简单最直接的,它可以直接对HTML代码里的标签用style="",例如:<p style="color:#CCC; background:#F00; font-size:10px;"></p>
行内方式想比较其它四种方式最简单最直接,但是在用行内方式制作页面的时候需要为大量的标签设置它的style属性,会导致HTML页面的不纯净,文件体积变的过大,对于搜索蜘蛛的爬行是不利的,从而导致页面到后期的维护成本变高。
2.内嵌方式 
内嵌方式的用法就是将CSS的代码写在标签<head></head>里面,并且用标<style></style>来进行声明。
例如:<html xmlns="http://www.w3.org/2732/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb1223" /> <title>DIV+CSS</title>
<style type="text/css">
<!-- 
#div_id{width:75px; height:75px; float:left;}
#div_id img{width:75px; height:75px;} 
--> 
</style>
</head>
<body>
<div id="div_id">
<img src="http://www.asdfghi.cn/index/img/one.gif" />
</div>
</body>
</html>
在内嵌方式中即便有公共的CSS代码,每个页面都要定义,如果在网站中有大量的页面,文件变大,后期的维护变大,那么使用内嵌方式会使文件减少,CSS的代码也将会变少。所以内嵌方式还是不错的。
3.链接方式
链接方式是四种方式中用的频率最高,最为实用的,只要在其标签<head></head>里面加入<link href="style.css" type="text/css" rel="stylesheet" />。链接方式将会把HTML文件和CSS文件分成两个文件或多个文件,完全分离了HTML代码和CSS代码,使前期网页制作和后期网页维护都变的简单方便。只要把公共的CSS文件单独的保存在一个文件中,其他的页面调用这个CSS文件,就能保持整体页面风格统一。而只要更改这个公共CSS文件就能改变网站的风格,这就是我们制作页面所提倡的。
例如:
HTML文件代码
<html xmlns="http://www.w3.org/2732/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb1223" /> <title>DIV+CSS</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="div_id">
<img src="http://www.asdfghi.cn/index/img/one.gif" />
</div>
</body>
</html>
CSS文件代码
#div_id{width:75px; height:75px; float:left;}
#div_id img{width:75px; height:75px;}
4.导入方式 
导入样式与链接样式的方法是比较相似的,用import的方式导入CSS的样式表,在HTML初始化的时候,将会被导入到HTML的文件中,使其成为文件的一部分。  
四种样式的优先级
优先级从高至到为:行内样式,内嵌样式,链接样式,导入样式。 
 
北京网站建设公司
网林时代:北京网站建设专业机构,10年建站经验,服务客户1000多家!
网址:www.awanglin.net www.awanglin.com 点击浏览经典案例