CSS 樣式美化
基礎CSS 格式：選擇器 { 屬性: 值; }。標籤 p{}、類別 .highlight{}、ID #title{}。盒子模型由內至外：content → padding → border → margin。響應式用 @media (max-width: 600px) 在手機螢幕縮排版。
- CSS 管外觀，HTML 管內容；外部 .css 檔一處改、全站生效。
- 格式：選擇器 { 屬性: 值; }；每條宣告以分號結尾。
- 三種選擇器：標籤 p、類別 .highlight（可重用）、ID #title（全頁唯一）。
文體小知識：編程教學課每個概念都配一段可以親手試的代碼例子，照住輸入、改一改，最快學會。
§課文原文 Passage
1HTML 管內容，CSS（Cascading Style Sheets，層疊樣式表）管外觀：顏色、字體、間距、排版全部由它管。接入方法有三種：寫在標籤上的 style 屬性（行內）、寫在 ＜style＞ 區塊內（頁內）、寫成獨立的 .css 檔再用 ＜link＞ 引入（外部）— 外部最好，因為幾十頁可以共用同一份樣式，改一處全站生效。
2CSS 的基本格式是「選擇器 { 屬性: 值; }」。三種常用選擇器：標籤選擇器 p { } 影響所有段落；類別選擇器 .highlight { } 影響標了 class="highlight" 的元素；ID 選擇器 #title { } 只影響那一個 id="title" 的元素。例如 p { color: #23634f; font-size: 18px; } 令全部段落變墨綠色、字大 18 像素。
3每個元素其實是一個盒子，這就是盒子模型（Box Model）：最內是內容（content），向外依次是內邊距 padding（內容與邊框之間的空間）、邊框 border、外邊距 margin（與其他元素之間的空間）。例如 .card { padding: 16px; border: 2px solid black; margin: 10px; } — 內鬆、有框、盒與盒之間留距離。
4色彩可以用英文名（red）或十六進制碼（#f07f2e 橙色）；字體用 font-family、大小用 font-size、行距用 line-height。還有簡單響應式（Responsive）概念：@media (max-width: 600px) { body { font-size: 14px; } } 的意思是「螢幕闊度不足 600 像素（手機）時，字體縮到 14px」— 同一頁在電腦和手機都看得舒服。
1重點摘要 Summary
CSS 格式：選擇器 { 屬性: 值; }。標籤 p{}、類別 .highlight{}、ID #title{}。盒子模型由內至外：content → padding → border → margin。響應式用 @media (max-width: 600px) 在手機螢幕縮排版。
2生字卡 Vocabulary
描述網頁外觀的語言，管理顏色、字體、間距和排版。
指定樣式套用到哪些元素的開頭部分，例如 p、.highlight、#title。
以點號開頭（.highlight），套用於所有標了該 class 的元素，可重複使用。
以井號開頭（#title），只套用於該頁唯一一個對應 id 的元素。
樣式宣告的兩半：屬性講改什麼（color），值講改成什麼（red），以分號結尾。
每個元素都是盒：內容、內邊距 padding、邊框 border、外邊距 margin 由內至外四層。
padding 是內容與邊框之間的空間；margin 是元素與其他元素之間的空間。
以 # 開頭的六位顏色代碼，例如 #f07f2e 是橙色、#ffffff 是白色。
@media (max-width: 600px) { ... } 令樣式只在特定螢幕闊度下生效，是響應式設計的基礎。
3逐步講解 Steps
- 第一句 CSS 與基本格式CSS 管網頁外觀，HTML 管內容。第一句例子：在 ＜style＞ 區塊內寫 p { color: red; }，頁面所有段落立即變紅色。基本格式是「選擇器 { 屬性: 值; }」：p 是選擇器，指定作用對象；color: red 是一條樣式規則；行尾分號不可少，多條規則並列時靠它分隔。例如再添 font-size: 18px; 便同時改變字體大小。這種「一處規則、全頁生效」的模式，是 CSS 高效率的根源。
- 三種選擇器三種常用選擇器：標籤選擇器 p { } 作用於所有段落；類別選擇器 .highlight { } 作用於標了 class='highlight' 的元素，一個類別可同時用在多個元素，適合「重點段落」這類重複樣式；ID 選擇器 #title { } 只作用於 id='title' 的那一個元素，全頁唯一，適合點名主標題。選用原則：全體統一用標籤選擇器，部分共享用類別，單一特別用 ID，層次分明便不易混亂。
- 盒子模型每個元素都是一個盒子，由內至外四層：內容（文字與圖片）、內邊距 padding（內容與邊框之間的空間）、邊框 border、外邊距 margin（與其他元素之間的空間）。例子：.card { padding: 16px; border: 2px solid black; margin: 10px; }，文字與框之間鬆 16px，框為 2px 黑實線，卡片與四周元素隔 10px。改任何一層都立即見效；網頁排版的微調，本質上就是調整這四層的尺寸。
- 字體、行距與色彩字體與閱讀體驗：body { font-family: Arial, sans-serif; font-size: 16px; line-height: 1.8; } 一口氣設定全站字體、16 像素字大與 1.8 倍行距，長文立即易讀，行距 1.5 至 1.8 是公認舒適範圍。色彩兩種寫法：color: red 與 color: #ff0000 效果相同；十六進制碼三組兩位數字分別控制紅、綠、藍的份量，#000000 全黑、#ffffff 全白、#f07f2e 是橙色。網站宜全站統一配色，通常先定一個主色再延伸。
- 響應式設計入門響應式設計讓同一頁在手機與電腦都好看。入門工具是媒體查詢：@media (max-width: 600px) { body { font-size: 14px; } } 的意思是「螢幕闊度不足 600 像素（手機）時，字體縮至 14px」，桌面仍維持 16px。一行代碼，兩種裝置各自舒適；進一步可為手機版收窄邊距、隱藏側欄。現時過半網站流量來自手機，響應式設計已是網頁的基本要求，而非額外的加分項。
- 三種接入方式CSS 接入 HTML 有三種：行內樣式寫在標籤的 style 屬性上，只影響該元素，優先級最高但難以重用；頁內樣式寫在 ＜style＞ 區塊內，影響本頁全部元素；外部樣式表寫成獨立的 .css 檔，再用 ＜link rel='stylesheet' href='css/style.css'＞ 引入，幾十頁共用一份，改一處全站生效。正式專案一律採用外部樣式表，行內樣式只作臨時微調，這是業界通行做法。
- 卡片樣式實戰綜合練習：為介紹文字設計「卡片」。樣式：.card { background-color: #ffffff; border: 2px solid #000000; border-radius: 14px; padding: 16px; margin: 10px; }，即白底、黑框、14px 圓角、16px 內邊距。HTML 端在段落標上 class='card'：＜p class='card'＞這是卡片內的文字。＜/p＞。套用之後網頁出現圓角白卡，文字與邊框之間留白舒適。這個「類別定義樣式、HTML 掛上類別」的流程，是日常 CSS 工作的基本節奏。
4圖解 Diagrams
5例題示範 Example
例題：為一段介紹文字設計「卡片」樣式 — 白底、黑邊框、圓角、內邊距足夠，並套用到 HTML 上。
- 寫選擇器：.card { } — 用類別，因為多段文字都要用同一款卡。
- 設底色和邊框：background-color: #ffffff; border: 2px solid #000000; — 白底配 2px 黑實線框。
- 加圓角和內邊距：border-radius: 14px; padding: 16px; — 角位圓滑，文字與框之間留 16px 空間。
- 套用到 HTML：＜p class="card">這是卡片內的文字。＜/p＞ — 網頁上即見白底黑框圓角的卡片效果。
- 答案：.card { background-color: #ffffff; border: 2px solid #000000; border-radius: 14px; padding: 16px; } 配合 ＜p class="card">...＜/p＞ 使用。
6常見錯誤 Mistakes
75 題快測 Quick check
Q1.highlight { background-color: yellow; } 中的 .highlight 是什麼？
Q2盒子模型由內至外的四層次序是什麼？
Q3哪個屬性控制文字與邊框之間的空間？A. margin B. padding C. border
Q4#ffffff 是什麼顏色？#000000 又是什麼？
Q5@media (max-width: 600px) { body { font-size: 14px; } } 的作用是什麼？
8重點回顧 Recap
- CSS 管外觀，HTML 管內容；外部 .css 檔一處改、全站生效。
- 格式：選擇器 { 屬性: 值; }；每條宣告以分號結尾。
- 三種選擇器：標籤 p、類別 .highlight（可重用）、ID #title（全頁唯一）。
- 盒子模型：content → padding（內） → border（框） → margin（外）。
- @media (max-width: 600px) 令同一頁在手機與電腦都好看 — 響應式的第一步。