![](https://img.kancloud.cn/24/47/244731a95b7a4fada9611a65ac9c1697_922x383.png)
![](https://img.kancloud.cn/f6/f6/f6f6da815f6b03f32116b8d2002b47f1_929x414.png)
## 分离读写
![](https://img.kancloud.cn/37/a9/37a90b495211de243165374ff6bf36ec_746x215.png)
![](https://img.kancloud.cn/7c/05/7c05d7eadf3d007fd0580cd9fa40806c_700x202.png)
![](https://img.kancloud.cn/a8/52/a85215d75a3b306785bc81fe796e7656_882x139.png)
![](https://img.kancloud.cn/53/d7/53d78e203e1dae02d09cecfe937b02fa_516x210.png)
![](https://img.kancloud.cn/d1/5b/d15b7448efab5ff4c6a4bacdb7f6ef65_701x420.png)
![](https://img.kancloud.cn/66/b8/66b87305fa9eef2e88fb9d12584d12f3_500x248.png)
![](https://img.kancloud.cn/1b/84/1b84fde70d514dce00e9e7a72610d9d8_901x429.png)
![](https://img.kancloud.cn/9c/e3/9ce3ae96d2a38dad40e5e22bcebd5df3_422x248.png)
本质上,这两种方式都是为了加载css文件,但还是存在细微的差别。
差别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可以控制的(不支持)。
差别5(不推荐):@import可以在css中再次引入其他样式表,比如创建一个主样式表,在主样式表中再引入其他的样式表,如:
@import “sub1.css”;
@import “sub2.css”;
sub1.css
———————-
p {color:red;}
sub2.css
———————-
.myclass {color:blue}
这样有利于修改和扩展。
但是:这样做有一个缺点,会对网站服务器产生过多的HTTP请求,以前是一个文件,而现在确实两个或更多的文件了,服务器压力增大,浏览量大的网站还是谨慎使用。
@import的书写方式
@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别
@import url(style.css) //Windows NS4, Macintosh NS4不识别
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import url("style.css") //Windows NS4, Macintosh NS4不识别