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控制都是针对本页面标签的，没有多余的ＣＳＳ命令；再者不用外链ＣＳＳ文件。直接在ＨＴＭＬ文档中读取样式。缺点就是改版麻烦些，单个页 面显得臃肿，ＣＳＳ不能被其他ＨＴＭＬ引用造成代码量相对较多，维护也麻烦些。

 

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

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

第四：在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可以控制的。