CSS 是網頁的美化器，我個人覺得概念不難，但是很多細小的功能需要學習。這一篇主要介紹專有名詞。實際上要學會css還是要操作。我原本以為只要一篇文章就可以講完，結果需才寫兩個觀念就超過閱讀時間 5 分鐘... CSS 其實不難，只是很繁雜。
這篇聚焦在 CSS的樣式表、就是「選」HTML 元素的方法、CSS 權重。
學習資源：
課程框架：鬍子科技學院操作模擬器：W3School 練習
IG 技術分享帳號：this.web
1. internal, external, inline CSS
1. Inline CSS（內聯樣式）
想像一下，你今天做了一個便當，結果你在每道菜上面都貼了個小紙條，寫著：
「炒蛋：鹽放一點點，飯糰：鹽巴少許，青菜多放兩朵花椰菜。」
這種方式 （inline） 就是直接在 HTML 元素上設定樣式，就像你直接把調味料標記在每一個菜的旁邊。
<p style="color:red;">這段文字會變紅色</p> <!-- 每一條都要這樣設定 -->
特點：
- 每道菜各自標記，很難統一管理。
- 偶爾急用還行，但要管理大量樣式就崩潰了，而且別人要找也不好找。
2. Internal CSS（內部樣式）
你在便當盒裡放了一張紙條，告訴自己：「今天便當的菜都少鹽少油，白飯多一點」，這個規定就只針對今天這個便當內的所有菜有效。
<head>標籤： 它是 HTML 的「腦袋」，主要放的東西是「設定」或是「樣式規定」，並不是畫面上真正會看到的內容。<style>標籤： 專門放 CSS 程式碼，讓你設定網頁裡元素長什麼樣子。p { color: blue; }： 意思是『選到 HTML 裡的所有<p>元素，並讓它們的字體顏色變藍色』。
<!DOCTYPE html>
<html>
<head>
<style>
p{color:blue;}
</style>
</head>
<body>
<p>這段文字會是藍色的～</p>
<h1>這個標題不會變色喔！</h1>
<p>這段也會是藍色！</p>
</body>
</html>
特點：
- 只對目前這個網頁有效，改一次所有內容就會跟著調整。
- 比較方便統一，但還不夠靈活（其他便當要重寫一次規則）。
2. External CSS（外部樣式）
現在你直接寫了一個便當食譜，每道菜如何調味、要放什麼量、飯菜比例通通規定好。你有好幾個便當盒，每個便當盒都按照這個食譜來做，超級有效率又方便管理！
實際上是，外部樣式 (external CSS) 就是你把所有的CSS規則放到一個獨立的外部檔案裡，然後再從 HTML 文件去連結它。
📖 怎麼用？
你要做兩個步驟：
Step 1：建立外部CSS檔案
比如你建一個叫做 style.css 的檔案：
把HTML 跟CSS Javascript放在一起
p {
color: blue;
font-size: 16px;
}
這邊意思是：
- 所有 HTML 的
<p>段落都會變成藍色、18px 字體大小。
Step 2：HTML 檔案內連結這個CSS檔
接著在 HTML 檔案中，用下面的方式載入它：
href="style.css" 是指來源的檔案。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>這個段落會變藍色，因為有外部樣式！</p>
</body>
</html>
這樣就完成啦～
🔍 實際運作的原理是：
- 當瀏覽器讀到 HTML 中的這句話：
<link rel="stylesheet" href="style.css">
它會馬上跑去打開旁邊的style.css檔案。 - 然後讀到
style.css裡面有一行：
p { color: blue; }
它就知道了：「喔，原來所有的 <p> 都要變成藍色呀！」
📌 外部樣式好處在哪裡？
- 只需要寫一次，就能用在很多網頁上，超省事！
- 之後要修改樣式，改一次
style.css就可以影響到每個頁面，不用一個個頁面修改，省事很多。
✨ 小總結：
- Inline CSS：直接在元素上寫樣式，很難管理。
- Internal CSS：寫在 HTML 中，只適用於這一頁。
- External CSS：獨立一個外部檔案，全部頁面都能用，方便又乾淨。
2 Selectors (class, id, element, universal)
CSS Selector 的作用就是「哪些 HTML 元素要套用特定樣式」
1. Element Selector（元素選擇器）
- 功能：依據 HTML 的元素標籤名稱選取元素。
- 作用：快速、統一地設定特定元素的樣式，例如一次調整所有段落文字 (
<p>) 的外觀。
使用時機：
- 所有文章的內文 (
p) 都用同樣字體大小和顏色 - 所有的標題 (
h1, h2) 統一用特定字型或粗細 - 全站連結 (
a) 都統一樣式
範例：
p {
color: blue;
}
上方表示所有的段落文字都會變成藍色。
2. Class Selector（類別選擇器）
- 功能：選取特定類別（class）的元素，class 可以重複使用。
- 作用：將特定的樣式套用到多個不同種類的元素上。
當你想設定一個可重複用在不同元素或區塊的特殊樣式時會用 Class，例如：
- 設定某些「強調文字」或「按鈕」的特殊樣式
- 讓多個不同元素使用統一的排版樣式（例如產品卡片、文章卡片）
- 樣式會重複用到很多次時使用，方便管理且清晰明瞭。
.highlight {
background-color: yellow;
}
這樣一來，只要 HTML 元素有設定 class="highlight"，它就會自動套用黃色背景。有點像是螢光筆可以到處塗的感覺。
3. ID Selector（身份選擇器）
- 功能：根據 HTML 中獨特的 ID 名稱來選取唯一元素，每個 ID 只能使用一次。
- 作用：精準且唯一地指定某一個元素。
我自己感覺沒那麼好用，可能在頁面的主標題（hero banner）、網站 LOGO、導航欄或重要的互動元素上。
#main-title {
font-size: 32px;
}
這樣，只有 id 為 main-title 的元素會被改成 32px。
4. Universal Selector（通用選擇器）
- 功能：選擇 HTML 文件中所有的元素。
- 作用：快速將一些共用設定（例如重置margin, padding）一次套用到所有元素。小小複習，margin 是你按 F12 會出現的
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
所有元素都會被套用這個規則。
這是方格子編輯器的CSS，可以看到 上一個動作跟下一個動作的樣式都是一樣的
🔑 總結選擇器的用途：
- element 選擇器：適合快速統一調整同類型元素樣式。
- class 選擇器：重複套用相同樣式到不同種類的元素。
- id 選擇器：單獨調整某個特定元素樣式。
- universal 選擇器：快速一次設定所有元素的樣式，通常用來重置或初始化樣式設定。
3. CSS specificity（權重）
CSS 也會搶地盤！權重大小是這樣：
inline > ID > Class > Element
簡單說，越具體的選擇方式越能壓制其他樣式。我們來示範一個例子：
假設你有一個 HTML 段落：
<p id="special" class="highlight">CSS 權重大比拼！</p>
你寫了三種 CSS：
/* 第一種：用 element 選擇器 */
p {
color: blue;
}
/* 第二種，用 class 選擇器 */
.highlight {
color: green;
}
/* 第三種，用 ID 選擇器 */
#special {
color: red;
}
那你猜猜看，最後這個段落的字體顏色會是哪一個？
🔥答案：會是紅色！
為什麼呢？因為 CSS 權重的計算方式是：
ID > Class > Element
#special(id) 權重最高 → 紅色勝利 🎯.highlight(class) 次之p最弱
所以，即使你同時給段落寫了好幾種樣式，瀏覽器會根據權重來決定用哪一個：
inline style > ID (#id) > Class (.class) > Element (p, div)
📌再補充一下 inline style：
假如你又在 HTML 裡面使用 inline style：
<p id="special" class="highlight" style="color: green;">CSS 權重大比拼！</p>
這時候就算你 ID 寫的是紅色，inline 樣式的權重還是最大，結果會是綠色。
