页面中使用CSS的方式主要有3种：
1.行内添加style属性
2.外链样式link
3.外链样式@import
现在来看一下这两种外链样式的区别：
@import的
<style>
@import url(./css/index.css);
</style>
Link的
<link rel="stylesheet" href="./css/index.css">
两者都是外部引用CSS方式，但是存在一定的区别：
一、link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事物；
@import属于CSS范围，只能加载CSS；
二、link引用CSS时，在页面加载时同时加载；
@import需要页面完全载入以后加载
三、Link是XHTML标签，无兼容问题；
@import是在CSS2.1提出的，低版本浏览器不支持；
四、Link支持使用Javascript控制DOM去改变样式；
而@import不支持；
补充：@import最优写法：
1.@import‘文件’//Windows IE4/ NS4,Mac OS X IE5,Macintosh IE4/IE5/NS4不识别
2.@import“文件”//Windows IE4/ NS4,Macintosh IE4/NS4不识别
3.@import url（文件） //Windows NS4,Macintosh NS4不识别
4.@import url（‘文件’）//Windows NS4，Mac OS X IE5,Macintosh IE4/IE5/NS4不识别
5.@import url（“文件”）//Windows NS4,Macintosh NS4不识别
以上分析得知，@import url（文件）和 @import url（“文件”）是最优的选择，兼容的浏览器最多。从字节优化的角度来看@import url（文件）最值得推荐。
Link与@import一些区别
① link除了加载CSS文件以外，它还能加载其它类型文件，如“icon”，而“@import”只能加载CSS文件
给网页加上图标：<link rel="shortcut icon" href="oa.jpg">
② link在现代的浏览器中是多线程加载的，也就是说在通过该标签加载一个文件的时候body标签内的DOM也在执行同步的加载。加载效率高于@import
③ link作为一个标签，也就是一个DOM元素，是可以通过JavaScript进行操作的（如增加、删除link标签，修改link的属性值等）。而“@import”写在style标签内部或CSS文件内（写在style标签内和CSS文件内的写法一致），是无法通过JavaScript进行操作的。
