link与@import的区别

在HTML中引入CSS的方法主要有四种，分别是行内样式、内嵌样式、链接样式、导入样式，其中外部引入的两种就是链接样式和导入样式，也就是link和import。

1、示例

XML/HTML代码
<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />   
XML/HTML代码
<style type="text/css" media="screen">   
@import url("CSS文件");   
</style>

2、区别

a、link属于html标签，除了引入css样式外还可以定义RSS等其他事务，@import是css提供的，只能引入css；

b、link在页面加载的时候会同时加载，@import引用的css会等到页面加载结束后再加载；

c、link是html标签，没有兼容性，@import只要ie5以上才能识别；

d、link引入的样式权重高于@import引入的样式；

e、link支持使用js控制DOM改变样式，@import不支持。

3、@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不识别
由此发现，@import url(style.css) 和@import url("style.css")是最优的选择，兼容的浏览器最多。从字节优化的角度来看@import url(style.css)最值得推荐。

4、四种CSS引入方式的优先级

a、就近原则

b、理论上：行内>内嵌>链接>导入

c、实际上：内嵌、链接、导入在同一个文件头部，谁离相应的代码近，谁的优先级高。