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。