css引入方式

css中共有四种模式:

第一:在head部分加入<link  rel="stylesheet" type="text/css" href="index.css"/>,引入外部的CSS文件。

这种方法是当前最常用的方式,能够体现DIV+CSS中的内容和显示分离的思想,便于维护和阅读,代码看起来也相当美观。

第二:在head部分加入
<style type="text/css">
.logo{margin: 0;padding: 0;border:1px red solid;}
</style>

 

优点:速度 快,所有的CSS控制都是针对本页面标签的,没有多余的CSS命令;再者不用外链CSS文件。直接在HTML文档中读取样式。缺点就是改版麻烦些,单个页 面显得臃肿,CSS不能被其他HTML引用造成代码量相对较多,维护也麻烦些。

 

第三:直接在页面的标签里加 <div style="border:1px red solid;">测试信息</div>

这种方法现在用的很少,通用性差,效果特殊,使用CSS命令较少,并且不常改动的地方,使用这种方法反而是很好的选择。

第四:在style使用@import

<style type="text/css">
@import url(index.css);
</style>

其中link和@inport的区别

差别1:老祖宗的差别。link属于XHTML标签,而@import完全是CSS提供的一种方式。

link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。

差别2:加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的 CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就 是闪烁),网速慢的时候还挺明显

差别3:兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。

差别4:使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。

猜你喜欢

转载自yh2016.iteye.com/blog/2312501