css引入的兩種方法link和@import的區別和用法

link和@import都是HTML中引入CSS的語法單詞。

二者的基本語法

link語法結構

<link href="外部CSS文件的URL路徑" rel="stylesheet" type="text/css" />

link標籤經過URL路徑引入外部的CSS文件到HTML中，是一種HTML標籤，屬於書寫HTML的語法，只能放在HTML源代碼中使用。

@import語法結構

<style type="text/css"> @import + 空格 + url(外部CSS文件URL路徑地址); </style>

@import是在樣式表定義中再引入外部的CSS文件，至關於一種樣式，屬於書寫CSS的語法。

二者的區別

二者都是外部引用CSS的方式，可是存在必定的區別。

區別1：link是XHTML標籤，除了加載CSS外，還能夠定義RSS等其餘事務；@import屬於CSS範疇，只能加載CSS。

區別2：link引用CSS時，在頁面載入時同時加載；@import須要頁面徹底載入後才加載。

區別3：link是XHTML標籤，無兼容問題；@import是在CSS2.1中提出的，低版本的瀏覽器不支持。

區別4：link支持使用JavaScript控制DOM去改變樣式；@import不支持這樣的操做（JavaScript能夠獲取link標籤元素，但獲取不到@import，由於@import只是一種CSS語法）。

本質上，二者使用選擇區別不大，但爲了軟件中編輯佈局網頁HTML代碼，通常使用link較多，也推薦使用link。