css link和@import的區(qū)別是什么?

html中引入外部的CSS有2種方式，分別是link標(biāo)和@import兩種方式引入。

link引入形式：

<link href="styles.css" type="text/css" />

@import引用形式：

<style type="text/css">@import url("styles.css");</style>

link和@import的區(qū)別

適用范圍不同

@import可以在網(wǎng)頁頁面中使用，也可以在CSS文件中使用，用來將多個CSS文件引入到一個CSS文件中;而link只能將CSS文件引入到網(wǎng)頁頁面中。

功能范圍不同

link屬于XHTML標(biāo)簽，而@import是CSS提供的一種方式，link標(biāo)簽除了可以加載CSS外，還可以定義RSS，定義rel連接屬性等，@import就只能加載CSS。

加載順序不同

當(dāng)一個頁面被加載的時候，link引用的CSS會同時被加載，而@import引用的CSS會等到頁面全部被下載完再被加載。所以有時候?yàn)g覽@import加載CSS的頁面時開始會沒有樣式(就是閃爍)，網(wǎng)速慢的時候還挺明顯。

兼容性

由于@import是css2.1提出的，所以老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標(biāo)簽無此問題。

控制樣式時的差別

使用link方式可以讓用戶切換CSS樣式.現(xiàn)代瀏覽器如Firefox,Opera,Safari都支持rel=”alternate stylesheet”屬性(即可在瀏覽器上選擇不同的風(fēng)格)，當(dāng)然你還可以使用Javascript使得IE也支持用戶更換樣式。

權(quán)重區(qū)別

link引入的樣式權(quán)重大于@import引入的樣式。

使用DOM控制樣式時的差別

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

猜你喜歡：

怎么用css3畫三角形？css繪制三角形圖文教程

CSS3 box-shadow的用法|box-shadow屬性詳解

JavaScript動畫和CSS3動畫有什么區(qū)別？

CSS3如何設(shè)置顏色不透明度？

傳智教育HTML&JS+前端高手班