有 4 種方式可以在 HTML 中引入 CSS。
1.內聯方式
內聯方式指的是直接在 HTML 標籤中的 style屬性中添加 CSS。
<div style="background: red"></div>這通常是個很糟糕的書寫方式，它只能改變當前標籤的樣式，如果想要多個 <div>擁有相同的樣式，你不得不重複地為每個<div>添加相同的樣式，如果想要修改一種樣式，又不得不修改所有的 style 中的代碼。很顯然，內聯方式引入 CSS 代碼會導致 HTML 代碼變得冗長，且使得網頁難以維護。
2.嵌入方式
嵌入方式指的是在 HTML 頭部中的 <style>標籤下書寫 CSS 代碼。
<head>
<style> .content {
background: red;
} </style>
</head>
嵌入方式的 CSS 只對當前的網頁有效。因為 CSS 代碼是在 HTML 文件中，所以會使得代碼比較集中，當我們寫模板網頁時這通常比較有利。因為查看模板代碼的人可以一目了然地查看 HTML 結構和 CSS 樣式。因為嵌入的 CSS 只對當前頁面有效，所以當多個頁面需要引入相同的 CSS 代碼時，這樣寫會導致代碼冗餘，也不利於維護。
3.外部CSS連結方式
連結方式指的是使用 HTML 頭部的 <head>標籤引入外部的 CSS 文件。
示例：
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>這是最常見的也是最推薦的引入 CSS 的方式。使用這種方式，所有的 CSS 代碼只存在於單獨的 CSS 文件中，所以具有良好的可維護性。並且所有的 CSS 代碼只存在於 CSS 文件中，CSS 文件會在第一次加載時引入，以後切換頁面時只需加載 HTML 文件即可。
在製作一個超過一頁的網站時，應該使用外部CSS樣式表
- 可以使所有頁面都使用同一個樣式規則(而不是每頁都重複)。
- 將內容和外觀分開。
- 代表你只要修改一個檔案就可以改變所有網頁上的樣式。
最後載入的樣式會蓋過先前載入的樣式
其實這個觀念也是一般使用方式最主要的優先順序
由於外部載入的樣式會放在 <head> 跟 </head> 之中
所以載入頁面時會先讀取
然後才開始讀取到頁面中的樣式
故而在大多數情況下
CSS 優先順序的邏輯可以簡化成
最後設定的樣式將蓋過之前設定的樣式
4.導入方式
導入方式指的是使用 CSS 規則引入外部 CSS 文件。
示例：
<style>
@import url(style.css);
</style>兩者都是外部引用CSS的方式，但是存在一定的區別：
1.link是XHTML標籤，除了加載CSS外，還可以定義RSS等其他事務；@import屬於CSS範疇，只能加載CSS。
2.link引用CSS時，在頁面載入時同時加載；@import需要頁面網頁完全載入以後加載。
3.link是XHTML標籤，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。在IE5以上才能識別
4link支持使用Javascript控制DOM去改變樣式；而@import不支持。
5 .link方式的樣式的權重 高於@import的權重.
5.各樣式表權重
近的 > 遠的 (內嵌樣式 > 內部樣式表 > 外聯樣式表)
內嵌樣式：內嵌在元素中，<span style=”color:red”>span</span>
內部樣式表：在頁面中的樣式，寫在<style></style>中的樣式
外聯樣式表：單獨存在一個css文檔中，通過link引入或import導入的樣式
link方式的樣式的權重 高於@import的權重.
原文網址：https://kknews.cc/zh-tw/other/xvoyzq.html
參考
https://kknews.cc/zh-tw/other/xvoyzq.html
https://hk.saowen.com/a/a541141fa6c20c070e4034aa2abcf48a639f289250dca3f0ce0bf741ec77f806
https://note.artchiu.org/2011/09/21/css%E7%9A%84%E5%84%AA%E5%85%88%E9%A0%86%E5%BA%8F/
