1.內聯CSS
內聯CSS也可稱為行內CSS或者行級CSS，它直接在標簽內部引入，顯著的優點是十分的便捷、高效；但是同時也造成了不能夠重用樣式的缺點，如果代碼行數到達一定長度不建議采用。通常內聯CSS作為測試使用，可以查找代碼中bug。
1 <body> 2 <div style="width: 65px;height: 20px;border: 1px solid;">測試元素</div> 3 </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文件中，在頁面調用時，一般加載第三方的樣式會使用到，並且需要放置在頁面的底部，不會影響自己的網站。