CSS 的link
和@import
都是用來引入外部樣式表的方法,但兩者在使用方式和效果上有所不同。
link
是 HTML 中的一個標簽,通常寫在<head>
里,用來引入 CSS 文件:
<head> <link rel="stylesheet" href="style.css"> </head>
@import
是 CSS 的一個規則,通常寫在樣式表中,用來引入另一個 CSS 文件:
@import url("style.css");
link
和@import
的主要區別有:
link
可以定義媒體類型,根據不同的媒體類型加載不同的樣式表,而@import
不支持定義媒體類型。link
會在頁面開始加載時同時加載,而@import
會在頁面加載完畢后再加載。- 使用 JavaScript 動態修改
link
的href
屬性可以實現動態切換樣式表的效果,而@import
不支持。 - 搜索引擎對
link
的權重高于@import
,也就是說,用link
引用的樣式表會被搜索引擎爬取,而用@import
引用的樣式表則會被忽略。
在實際開發中,一般使用link
,而@import
則較少使用。如果遇到在一個樣式文件中引用另一個樣式文件的情況,可以使用@import
;但如果需要在<head>
中加載多個樣式文件,最好使用link
。