加载调用css时link与@import的区别

其实 link 与 @import 在显示效果上还是有很大区别的

1,@import url()机制是不同于link的,link是在加载页面前把css加载完毕,而@import url()则是读取完文件后在加载,所以会出现一开始没有css样式,闪烁一下出现样式后的页面(网速慢的情况下)。

2,@import 是css2里面的,所以古老的ie5不支持。

3,当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。

4,link除了能加载css外还能定义RSS,定义rel连接属性,@import只能加载css

@import url(xxx.css); 有最大次数的限制,经测试IE6的最大次数是31次,第32个import及以后的都不能生效。Firefox 没有发现有import的最大值。另外,既然横向import有最大次数限制,却可以通过垂直import来继续扩展。

  他们从方法上是一样的,只是在浏览器识别上有点差距,link在支持CSS的浏览器上都支持而@import只在5.0以上的版本有效,而且还能用于浏览器过滤也就是hack的使用,兼容一些老版本的浏览器。所以最好还是使用link通用型更强,但是对于高版本的浏览器,也就是现在的浏览器来说,其实都一样,这是个没有太大意义的区分 。

例:

css 代码
 
  1. @import url(1111.css);
  2. @import url(2222.css);
  3.  
  4. /*导航*/
  5. #downloadNavWrapper{ width:980pxmargin:0 auto;  padding:0 3px 0px 3px; }
  6. #downloadNav1width:829pxposition:relativebackground:url(download-fbgj.jpg) no-repeat 0 0margin:0 autopadding:11px 0 0 151pxheight:35pxoverflow:hidden;}
  7.  
  8. /*logo*/

  9. #logoposition:absolute; left:5px; top:0background:url(download-logo.gif) no-repeatwidth:136pxheight:46pxtext-indent:-314px;}
  10. #logo a{ display:block;  width:136pxheight:46px;}