引入CSS的兩種方式：link和@import的區(qū)別

引入css外部文件的兩種方法為在html頁(yè)面通過(guò)link，src屬性（注意空鏈接時(shí)的陷阱！），再者是通過(guò)CSS文件本身通過(guò)@import url()引入，雖然這兩種方式都可以加載進(jìn)來(lái)CSS文件，可是link和@import也存在著細(xì)微的差別。

隸屬上的差別

link屬于XHTML標(biāo)簽，而@import完全是CSS提供的一種方式。link標(biāo)簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，@import就只能加載CSS了。此處注意瀏覽器的link src為空時(shí)候時(shí)會(huì)導(dǎo)致頁(yè)面加載次數(shù)增多。

@import次數(shù)限制

傳聞在IE6下，@import只能引入31次css文件，可是可以通過(guò)在css文件中再次import來(lái)垂直擴(kuò)展，斷橋殘雪沒(méi)有測(cè)試過(guò)，不過(guò)如果出現(xiàn)這樣的情況，說(shuō)明這個(gè)寫(xiě)代碼的人也挺變態(tài)的。

加載順序的不同

當(dāng)一個(gè)頁(yè)面被加載的時(shí)候（就是被瀏覽者瀏覽的時(shí)候），link引用的CSS文件會(huì)同時(shí)被加載，而@import引用的CSS 會(huì)等到頁(yè)面全部被下載完再被加載。所以有時(shí)候?yàn)g覽@import加載CSS的頁(yè)面時(shí)開(kāi)始會(huì)沒(méi)有樣式，然后突然樣式會(huì)出現(xiàn)，網(wǎng)速慢的時(shí)候還挺明顯，@import這點(diǎn)跟把CSS文件放在頁(yè)面結(jié)尾效果相同，不過(guò)如果我們一些樣式開(kāi)始頁(yè)面并不會(huì)出現(xiàn)，而是在交互時(shí)才出現(xiàn)的CSS樣式，可以通過(guò)這個(gè)方法引入，時(shí)間上錯(cuò)開(kāi)。例如：Ajax的html，交互時(shí)的彈出框，彈出div等

兼容性上的差別

由于@import是CSS2.1提出的，@import只有在IE5以上的才能識(shí)別，而link標(biāo)簽無(wú)此問(wèn)題（似乎影響不大~）。

使用DOM控制樣式時(shí)的差別

當(dāng)使用javascript控制DOM(document.styleSheets)去改變樣式的時(shí)候，只能使用link標(biāo)簽，因?yàn)锧import不是dom可以控制的。

所以，無(wú)特殊情況推薦使用link來(lái)引入樣式，盡量避免使用@import，而如果進(jìn)行Ajax或者交互的樣式，則可以通過(guò)@import引入。

出處：http://www.js8.in/554.html

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)