1.內聯CSS
內聯CSS也可稱為行內CSS或者行級CSS，它直接在標簽內部引入，顯著的優點是十分的便捷、高效；但是同時也造成了不能夠重用樣式的缺點，如果代碼行數到達一定長度不建議采用。通常內聯CSS作為測試使用，可以查找代碼中bug。
<body>
<div style="width: 65px;height: 20px;border: 1px solid;">測試元素</div>
</body>
2.頁級CSS
頁級CSS也可稱為內部CSS，整體是放在head標簽里邊的，在style標簽里邊定義樣式，作用范圍和字面意思相同，僅限于本頁面的元素；如果你寫的代碼超過了幾百行，想想每次把代碼頁拉到最上邊都很煩，所以它在可維護性方面較差。
1 <head>
2 <meta charset="utf-8" />
3 <title>測試</title>
4 <style type="text/css">
5 div {
6 width: 65px;
7 height: 20px;
8 border: 1px solid;
9 background: greenyellow;
10 }
11 </style>
12 </head>
3. 外聯CSS
外聯CSS也可稱為外部CSS，在實際的項目中通常使用此種方式，它只在頁面中使用link或者@import引入即可，可維護性好；并且外聯CSS是一個單獨的文件，可以作用于多個頁面，在修改的時候可以針對性地修改某一塊區域，達到多個頁面樣式同時變更，相較于內聯CSS和頁級CSS，省去了到每個頁面修改的步驟，提高了開發效率，同時一定程度提高了性能。
接下來具體說說link和@import的區別：
(1)link:<link rel="stylesheet" type="text/css" href="*.css" />
link語法格式中，rel指的是關聯(relation)，type指的是類型，href指的是鏈接文件路徑。
link的作用主要用來引入CSS和網頁圖標，指示告知搜索引擎，網頁之間的關系等。
(2)@import:<style>@import url("*.css");</style>
@import語法格式務必寫在style標簽中，后直接加文件路徑即可。
@import作用在CSS文件和頁面中，可以在一個CSS文件中引入其他的CSS文件，例如在index.css文件中引入其他CSS文件的樣式，整合在一起后，再在index.html中調用一次即可，在實際項目中經常使用，方便管理和維護。
(3)二者加載順序影響
HTML加載過程：1) 加載HTML-DOM結構
?2)CSS和JS
?3)圖片和多媒體
?4)加載事件觸發
link和@import都沒有放置順序的要求，但是不同的放置位置可能會造成效果顯示的差異。對于link，無論放到哪個位置，都是一邊加載數據，一邊進行優化，視覺感受很好；而對于@import，放置到哪里，才從哪里開始加載CSS樣式，即先加載數據，然后加載樣式，如果網速不佳，可能會造成只有數據出來，而樣式一點點加載的效果。并且在同一個頁面中，調用兩種方式，link永遠比@import優先級高。
在項目中使用的時候，一般在頁面中調用方式為link，并且放在head標簽中；使用@import除了在CSS文件中，在頁面調用時，一般加載第三方的樣式會使用到，并且需要放置在頁面的底部，不會影響自己的網站。
來源于：
https://www.cnblogs.com/ljwk/p/7136384.html?utm_source=itdadao&utm_medium=referral