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。