外部引用CSS中 link与@import的区别
这两天刚写完XHTML加载CSS的几种方式,其中外部引用CSS分为两种方式link和@import。
本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别。
差别1:老祖宗的差别。link属于XHTML标签,而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。
差别2:加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显(梦之都加载CSS的方式就是使用@import,我一边下载一边浏览梦之都网页时,就会出现上述问题)。
差别3:兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
差别4:使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。
大致就这几种差别了(如果还有什么差别,大家告诉我,我再补充上去),其它的都一样,从上面的分析来看,还是使用link标签比较好。
标准网页制作加载CSS文件时,还应该选定要加载的媒体(media),比如screen,print,或者全部all等。这个我到CSS高级教程中再给大家介绍。
注:
1,网友comehope在留言中提出了另一种区别。
差别5:@import可以在css中再次引入其他样式表,比如可以创建一个主样式表,在主样式表中再引入其他的样式表,如:
main.css
———————-
@import “sub1.css”;
@import “sub2.css”;
sub1.css
———————-
p {color:red;}
sub2.css
———————-
.myclass {color:blue}
这样更利于修改和扩展.
猴子提示:这样做有一个缺点,会对网站服务器产生过多的HTTP请求,以前是一个文件,而现在却是两个或更多文件了,服务器的压力增大,浏览量大的网站还是谨慎使用。有兴趣的可以观察一下像新浪等网站的首页或栏目首页代码,他们总会把css或js直接写在html里,而不用外部文件。


2008-08-13
[Reply]
2008-07-24
受益匪浅!感谢梦之都!
[Reply]
2008-05-13
还有一个区别:@import可以在css中再次引入其他样式表,比如可以创建一个主样式表,在主样式表中再引入其他的样式表,如:
main.css
———————-
@import “sub1.css”;
@import “sub2.css”;
sub1.css
———————-
p {color:red;}
sub2.css
———————-
.myclass {color:blue}
这样更利于修改和扩展.
BTW:这个页面的发表评论表单,没有设置TAB键次序.
[Reply]
可爱的猴子 reply on 2008-05-14 9:48:
1,import能加载多个css文件的确是和link的区别,这样加载多个,虽然看着更结构化一点,但是会对网站服务器造成更大的压力,增加了请求次数。浏览量大的网站还是少用这种方式。
2,tab键的顺序已经改好了,教程中和wordpress的冲突了。谢谢
[Reply]
2008-05-07
http://www.xun-ku.cn
[Reply]
2008-05-03
很赞,谢谢作者,有机会多交流,呵呵
[Reply]
2008-05-01
[Reply]
2008-04-13
这个页面是xhtml+css制作的,现在有个问题:
就是页面在IE6.0里的打印预览的时候出错是什么问题,当我把link调入的CSS去掉就可以打印预览??
谢谢
[Reply]
2008-04-04
这两天就看 你做的教程了,真是受益匪浅,十分感谢,希望以后多多完善,多多补充
[Reply]
2008-03-23
真诚感谢,同样是猴子。
[Reply]
2008-03-16
我是一个零起点的自学者,英语基础差不多是0。但是看了教程后我十分感谢作者,因为我能看懂(虽然不是100%)。有了教程给打下的这个基础真是受益匪浅,我真的太高兴了。真诚的道一句:教程的工作人员你们辛苦了!
[Reply]
2008-01-16
谢谢作者将这么好的教程公布于网上 从而我们能方便的学习,十分感谢你的服务精神,真诚的道一句:您辛苦了
[Reply]
2007-11-27
@import 在以后查找的时候更方便。考虑浏览器的兼容性问题,还不如考虑网站的维护来的重要。
[Reply]
2007-11-07
[…] 看到淘宝网页中这样写使用的是import,而很多网站都是使用link,当然还有一些页面比较简单,流量很大的网站,是直接将CSS写在html代码中的?他们有什么区别?css用import还是link好?从经典论坛和另外一个网站大概了解了一下 看到淘宝网页中大部分是这样写的 <style type="text/css" media="screen"> @import url("http://www.taobao.com/home/css/global/v2.0.css?t=20070518.css"); </style> 而很多网站,比如我的 http://www.dayanmei.com 使用的都是link <link rel="stylesheet" rev="stylesheet" href="default.css" type="text/css" media="all" /> 而像google 百度 163等网站他们都是直接写在网页中 当然使用链接link和导入import的好处就是易于维护,但当网速比较慢的时候,会出现加载中断的情况,导致页面排版错误 他俩的作用相同 唯一的不同是服务对象不一样 @import 为CSS服务 link是为当前的页服务 经典有网友说 @import会优先执行。 下面转载一篇来自 http://www.dreamdu.com/blog/2007/05/11/css_link_import/ 的文章 外部引用CSS中 link与@import的区别 这两天刚写完XHTML加载CSS的几种方式,其中外部引用CSS分为两种方式link和@import。 本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别。 * 差别1:老祖宗的差别。link属于XHTML标签,而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。 * 差别2:加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显(梦之都加载CSS 的方式就是使用@import,我一边下载一边浏览梦之都网页时,就会出现上述问题)。 * 差别3:兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。 * 差别4:使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。 大致就这几种差别了(如果还有什么差别,大家告诉我,我再补充上去),其它的都一样,从上面的分析来看,还是使用link标签比较好。 […]