

## 分離讀寫








本質上,這兩種方式都是為了加載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不識別