Learning Objectives
- 說明為什麼要把網頁的外觀從 HTML 分出來，交給 CSS
- 分辨 style 屬性、style 標籤與 link 外部樣式表三種寫法，知道各自適合的時機
- 寫出一條完整的 CSS 規則，指出選擇器、宣告、屬性與值，並知道漏掉分號會發生什麼事
- 用顏色名稱、hex、rgb()、hsl() 寫出同一個顏色，並加上透明度
- 分辨 px、em、rem、%、vw、vh 各以什麼為基準，說明 em 在巢狀元素裡為什麼會累乘
內容和外觀分開寫
前面八課你用 HTML 寫出了網頁的內容與結構：哪裡是標題、哪幾行是清單、哪一塊是導覽列。 瀏覽器替每個元素套上預設的樣子（標題大又粗、連結藍色加底線），但顏色、字型、間距、版面都還沒有你的設計。
這一課開始學 CSS（Cascading Style Sheets，層疊樣式表），它專門負責外觀。HTML 和 CSS 分開寫，有幾個實際的好處：
| 分開寫的好處 | 例子 |
|---|---|
| 改一次，整個網站跟著變 | 社團網站有 20 頁，想把主色從藍色換成綠色，只改一個 CSS 檔 |
| 外觀一致 | 每一頁的標題、按鈕都套同一組規則，不會有一頁特別大 |
| HTML 保持乾淨好讀 | 原始碼裡只看得到結構，不會被一堆顏色、字級淹沒 |
| 使用者可以換外觀 | 弱視使用者可以放大字、改高對比配色；列印時可以換一套適合紙張的樣式 |
這一課先學 CSS 的基本語法，再學兩樣幾乎每條規則都會用到的東西：顏色和單位。
把 CSS 放進網頁的三種寫法
1. style 屬性（inline style）：直接寫在標籤上，只影響這一個元素。
<h1 style="color: #3C6F9A;">程式設計社 迎新茶會</h1>
2. <style> 標籤：寫在 <head> 裡，影響這一頁。
<head>
<style>
h1 { color: #3C6F9A; }
</style>
</head>
3. <link> 外部樣式表：CSS 寫成獨立的 .css 檔，每一頁都用 <link> 引用同一個檔。
<head>
<link rel="stylesheet" href="css/style.css">
</head>
| 寫法 | 影響範圍 | 什麼時候用 |
|---|---|---|
| style 屬性 | 一個元素 | 臨時測試；或由程式算出來、每個元素都不一樣的值 |
<style> 標籤 |
這一頁 | 只有一頁的小作品、這一頁專屬的樣式 |
<link> 外部檔 |
引用它的每一頁 | 大多數的網站：多頁共用、瀏覽器下載一次就能快取重複使用 |
style 屬性最直接，但它把外觀又塞回 HTML 裡，等於放棄了「分開寫」的好處；而且它的優先順序很高，之後想用樣式表改它會很麻煩（第 11 課）。
本課的互動練習裡，CSS 分頁的內容就等於一個 <style> 標籤。
一條 CSS 規則的樣子
CSS 由一條一條的規則（rule）組成：
/* 這是註解，瀏覽器會略過 */
.note { /* 選擇器（selector）：選中哪些元素 */
background-color: #fdf6e3; /* 一條宣告（declaration）＝屬性: 值; */
color: #7a5a00; /* 屬性（property）是 color，值（value）是 #7a5a00 */
}
| 名稱 | 說明 |
|---|---|
| 選擇器 | 大括號前面那一段，決定這條規則套用在哪些元素上（h1、.note…，第 10 課細講） |
| 宣告區塊 | 大括號 { } 裡面，可以有很多條宣告 |
| 宣告 | 屬性: 值，每一條用分號 ; 結尾 |
| 註解 | /* … */，可以跨行；CSS 沒有 // 這種單行註解 |
CSS 遇到看不懂的東西不會報錯，只會默默略過：
- 拼錯屬性名稱（
colour: red;）：這一條宣告被忽略，其他照常。 - 漏掉分號：瀏覽器會把下一行也當成同一條宣告的值，例如
background-color: #fdf6e3 color: #7a5a00，這個值不合法，兩條宣告一起失效。 - 選擇器寫錯：整條規則被忽略。
所以樣式「沒出現」的時候，第一件事是檢查分號、大括號和拼字。開發者工具（第 1 課）會把看不懂的宣告標上警告圖示並劃掉。
小測驗：三種寫法與規則語法
下面哪一條 CSS 規則的寫法正確？
.box { color: red background: yellow; }（color 那一條漏了分號），瀏覽器會怎麼處理？
社團網站有 12 頁，每頁的標題、按鈕樣式都一樣。CSS 最適合怎麼放？
顏色的幾種寫法
同一個顏色有好幾種寫法，瀏覽器最後都換算成同一個值：
| 寫法 | 範例 | 說明 |
|---|---|---|
| 顏色名稱 | teal、white、rebeccapurple |
一百多個英文名稱，方便但選擇有限 |
| hex（十六進位） | #3C6F9A、#f80 |
紅綠藍各兩位 16 進位數字（00～ff），三位數是縮寫（#f80＝#ff8800） |
rgb() |
rgb(60 111 154) |
紅綠藍三種光，各 0～255；舊寫法用逗號 rgb(60, 111, 154) |
hsl() |
hsl(207 44% 42%) |
色相（0～360 度的色環）、飽和度、亮度（%）；調深淺時最直覺 |
透明度（alpha）：0 是全透明、1 是不透明。
.overlay { background-color: rgb(0 0 0 / 0.5); } /* 半透明黑色，用斜線隔開 */
.soft { background-color: hsl(207 44% 42% / 30%); }
.tint { background-color: #3C6F9A80; } /* hex 多兩位 = alpha，80 約是 50% */
另外有兩個特別的關鍵字：transparent（完全透明）和 currentColor（等於這個元素的文字顏色，常用在邊框或圖示）。
hsl 的好處是同一個色相換亮度就能做出一組配色：主色 hsl(171 100% 35%)、淺底色 hsl(171 100% 92%)、深色文字 hsl(171 100% 20%)。
用下面的工具試試：輸入任何一種寫法，它會交給瀏覽器解析，再換算成其他寫法。
長度單位：px、em、rem、%、vw、vh
寬度、字級、間距都需要長度。CSS 的單位分成兩類：
| 單位 | 以什麼為基準 | 例子 |
|---|---|---|
px |
固定的 CSS 像素（不一定等於螢幕上的一個實體點） | border: 1px solid |
em |
這個元素的字級；寫在 font-size 上時改以父元素的字級為準 | padding: 1em（字越大，留白跟著變大） |
rem |
根元素 <html> 的字級（瀏覽器預設通常是 16px，使用者可以在設定裡改） |
font-size: 1.5rem |
% |
依屬性而定：width 看父元素的寬度，font-size 看父元素的字級 | width: 80% |
vw／vh |
視窗（viewport）寬度／高度的 1% | height: 50vh（半個螢幕高） |
em 會累乘：em 以父元素為準，而父元素自己也可能用 em。巢狀清單每一層都寫 li { font-size: 1.2em; }，
第一層是 16 × 1.2 = 19.2px，第二層是 19.2 × 1.2 = 23.04px，第三層 27.648px，越來越大。
改用 rem 就不會：每一層都是 16 × 1.2 = 19.2px。
常見的搭配方式：
- 字級用 rem：整站的字跟著根元素一起縮放，使用者在瀏覽器調大字級時也會跟著變大；用 px 寫死的字級不會。
- 元素內的留白用 em：按鈕的
padding: 0.5em 1em讓大按鈕、小按鈕的留白比例一樣。 - 寬度用 % 或 max-width：版面跟著視窗伸縮（第 21 課響應式設計會再用到）。
- 邊框、細線用 px。
回到上面的「顏色與單位實驗室」做單位區的任務：調整根元素、父元素字級和視窗寬度，看瀏覽器把每種單位算成多少 px。
小測驗：顏色與單位
#3C6F9A80 最後的 80 代表什麼？
html 的字級是 16px，父元素 div 的字級是 20px。div 裡的段落寫 font-size: 1.5rem，算出來是多少？
根元素 16px，三層巢狀清單的每一層 li 都寫 font-size: 1.2em。第三層的字級最接近？
把 hsl(207 44% 42%) 改成 hsl(207 44% 90%)，顏色會怎麼變？
重點整理
- HTML 負責內容與結構，CSS 負責外觀；分開寫才能一次改整個網站。
- 三種寫法：style 屬性（一個元素）、
<style>標籤（一頁）、<link>外部檔（多頁共用，大多數網站用這個）。 - 規則＝選擇器＋
{ 屬性: 值; }；註解用/* */。CSS 遇到錯誤不報錯，只會略過；漏掉分號會讓兩條宣告一起失效。 - 顏色：名稱、hex、
rgb()、hsl()都能寫同一個顏色；透明度用/ 0.5或 8 位數 hex；hsl 最方便做同色系的深淺。 - 單位：px 固定；em 看自己（font-size 看父元素）、巢狀時會累乘；rem 看根元素；% 看父元素；vw、vh 看視窗。
下一課講選擇器：除了標籤名稱和 class，還能依屬性、位置、狀態精準選中想要的元素。