加载调用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 代码
- @import url(1111.css);
- @import url(2222.css);
- /*导航*/
- #downloadNavWrapper{ width:980px; margin:0 auto; padding:0 3px 0px 3px; }
- #downloadNav1{ width:829px; position:relative; background:url(download-fbgj.jpg) no-repeat 0 0; margin:0 auto; padding:11px 0 0 151px; height:35px; overflow:hidden;}
- /*logo*/
- #logo{ position:absolute; left:5px; top:0; background:url(download-logo.gif) no-repeat; width:136px; height:46px; text-indent:-314px;}
- #logo a{ display:block; width:136px; height:46px;}