原文出處：http://www.divcss5.com/rumen/r431.shtml

這裡link與@import介紹的是html引入css的語法單詞。兩者均是引入css到html的單詞。

一、瞭解基本

1、link語法結構
<link href="CSSurl路徑" rel="stylesheet" type="text/css" />

實際應用截圖：

2、@import語法結構

@import + 空格+ url(CSS檔案路徑地址);

1）、在html中
<style type="text/css">
@import url(CSS檔案路徑地址);
</style>

@import在html中使用截圖

2）、在css中
直接使用
@import url(CSS檔案路徑地址);
import在CSS程式碼或CSS檔案中使用截圖

在css和html中均可以使用@import

二、link與@import區別與選擇

首頁link和import語法結構不同，前者<link>是html標籤，只能放入html原始碼中使用，後者可看作為css樣式，作用是引入css樣式功能。import在html使用時候需要<style type="text/css">標籤，同時可以直接“@import url(CSS檔案路徑地址);”放如css檔案或css程式碼

本質上兩者使用選擇區別不大，但為了軟體中編輯佈局網頁html程式碼，一般使用link較多，也推薦使用link。
 

補充：
       但凡事不能絕對，見《Css小筆記-不要使用@import》的摘抄

不要使用@import

這。。坑爹呢，看了一大堆，結果告訴我不要使用！ 這也只是個建議，因為import的確會帶來一些問題，所以網路上會有各種「抵制@import」的文章，既然設計了@import，總有它的有用之處，不能過於絕對。

使用@import影響頁面效能的地方主要體現在兩個方面： 
    1.  影響瀏覽器的並行下載 
    2.  多個@import導致下載順序紊亂 
    3.  只有程式解析到@import才會解析

在實際專案中，使用css時候，頂部寫了多個@import，同時頁面引入十幾個元件，每個元件都同時又引入css，多個css中都使用類@import。 
最後導致開啟頁面的時候，會出現頁面報錯無法顯示的情況。

解決辦法 
使用scss將多個css合併為一個檔案匯出，或者多次使用import匯入css，由於webpack抽象樹過濾的特性，會自動處理掉相同匯入檔案；