外部引用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里,而不用外部文件.