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