本質上,這兩種方式都是為了加載css文件,但還是存在細微的差別。
差別1:老祖宗的差別,link屬於XHTML標簽,而@import完全是css提供的一種方式。
link標簽除了可以加載css外,還可以做很多其他的事情,比如定義RSS,定義rel連接屬性等,@import只能加載CSS。
差別2:加載順序的差別:當一個頁面被夾在的時候(就是被瀏覽者瀏覽的時候),link引用的CSS會同時被加載,而@import引用的CSS會等到頁面全部被下載完再加載。所以有時候瀏覽@import加載CSS的頁面時會沒有樣式(就是閃爍),網速慢的時候還挺明顯。
差別3:兼容性的差別。由於@import是CSS2.1提出的所以老的瀏覽器不支持,@import只有在IE5以上的才能識別,而link標簽無此問題,完全兼容。
差別4:使用dom控制樣式時的差別。當時用JavaScript控制dom去改變樣式的時候,只能使用link標簽,因為@import不是dom可以控制的(不支持)。
差別5(不推薦):@import可以在css中再次引入其他樣式表,比如創建一個主樣式表,在主樣式表中再引入其他的樣式表,如:
@import “sub1.css”;
@import “sub2.css”;
sub1.css
———————-
p {color:red;}
sub2.css
———————-
.myclass {color:blue}
這樣有利於修改和擴展。
但是:這樣做有一個缺點,會對網站服務器產生過多的HTTP請求,以前是一個文件,而現在確實兩個或更多的文件了,服務器壓力增大,瀏覽量大的網站還是謹慎使用。
@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)最值得推薦。