link与@import的区别

引子

看到淘宝网页中这样写使用的是import, 而很多网站都是使用link，当然还有一些页面比较简单，流量很大的网站，是直接将CSS写在html代码中的。

• 看到淘宝网页中大部分是这样写的

<style type="text/css" media="screen">
　　@import url("http://www.taobao.com/home/css/global/v2.0.css?t=20070518.css");
</style>

• 而很多网站，比如大前端使用的都是 link

<link rel="stylesheet" rev="stylesheet" href="default.css" type="text/css" media="all" />

• 而像google 百度 163等网站他们都是直接写在网页中

首先明确：CSS 连入 HTML 有三种方式：

• 外部引用CSS
  • 使用 link 标签引用CSS
  • 使用 @import 引用CSS
• 内部引用CSS3
• 内联引用CSS

因此，这个问题是限制于外部引用css的。

再明确：link 和 @import 的写法分别是：

• 同在XML/HTML页面中引用时：

link：

<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" /> 

@import：

<style type="text/css" media="screen"> 
　　@import url("CSS文件");
</style>

• @import自己在css样式表文件中引用时：
  • @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) 最值得推荐。

再看，link 和 @import 的区别在于：

• 归属范畴不一样：
  • link是XHTML标签，除了加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等
  • @import属于CSS范畴，只能加载CSS
• 加载时机不一样：
  • link引用CSS时，在页面载入时同时加载
  • @import需要页面网页完全载入以后加载
  • 所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显（梦之都加载CSS的方式就是使用@import，我一边下载一边浏览梦之都网页时，就会出现上述问题）
• 兼容性不一样：
  • link是XHTML标签，无兼容问题
  • @import是在CSS2.1提出的，低版本的浏览器不支持，只有在IE5以上的才能识别
• 使用dom控制样式时的差别：
  • link支持使用Javascript控制DOM去改变样式，使用javascript控制dom去改变样式的时候，只能使用link标签
  • @import不是dom可以控制的
• @import的独特性：
  • @import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，这样做有优点也有缺点：

    • 优点：这样更利于修改和扩展

    • 缺点：会对网站服务器产生过多的HTTP请求，以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨慎使用。有兴趣的可以观察一下像新浪等网站的首页或栏目首页代码，他们总会把css或js直接写在html里，而不用外部文件。

main.css
———————-
@import “sub1.css”;
@import “sub2.css”;

sub1.css
———————-
p {color:red};

sub2.css
———————-
.myclass {color:blue}

 

参考：

• http://www.dreamdu.com/blog/2007/05/11/css_link_import/
• http://www.cnblogs.com/zbo/archive/2010/11/17/1879590.html
• http://www.daqianduan.com/2417.html