您是否曾花了幾小時寫好 HTML，打開瀏覽器卻像 90 年代的純文字文件，毫無美感？用手機一開，版面整個跑掉，讓人想直接關掉視窗。別擔心，您只是還沒幫網頁「穿上衣服」。CSS（Cascading Style Sheets，階層式樣式表）正是負責網頁外觀的核心技術——從字體顏色到版面排版，全由它掌控。本文從語法基礎到響應式設計，帶您一次打通前端開發最關鍵的地基。
一、CSS 是什麼？網頁外觀設計的幕後推手
CSS 是控制網頁視覺呈現的語言，沒有它，網站就只是一堆黑白文字加預設藍色連結。如果把製作網頁比喻成蓋房子，HTML 是鋼筋水泥（結構），而 CSS 就是裝潢與油漆（樣式）。CSS 負責控制字體大小、顏色、背景，以及最讓新手頭痛的「排版位置」。
CSS 語法的黃金三要素
要寫出第一行 CSS，只需記住三個核心概念：
-
1
選擇器（Selector）
指定要改變哪個元素。例如：
h1代表「所有大標題」。 -
2
屬性（Property）
指定要改變什麼特性。例如：
color代表「文字顏色」。 -
3
值（Value）
指定要改成什麼效果。例如：
red代表「紅色」。
/* 範例：讓所有 h1 標題變成紅色 */
h1 {
color: red;
}
這聽起來很簡單，但這正是前端開發入門必經的第一個門檻。許多初學者在此卡關，往往不是因為語法太難，而是因為不理解這三者如何交互作用。一旦弄懂了這個邏輯，您就擁有了一把鑰匙，可以開啟網頁設計的無限可能。
CSS 有三種套用方式
- 外部樣式表（External CSS）：用
<link>引入獨立的.css檔案，最推薦，方便維護與重複使用。 - 內部樣式（Internal CSS）：寫在 HTML
<head>內的<style>標籤，適合單頁文件。 - 行內樣式（Inline CSS）：直接寫在 HTML 標籤的
style屬性，優先度最高但最難維護，非必要應避免。
二、掌握 CSS 核心地基：盒模型（Box Model）
在 CSS 的世界裡，請永遠記住：所有 HTML 元素都是一個盒子。無論是標題、圖片還是段落，瀏覽器都會把它們視為一個個長方形的盒子，這就是所謂的 CSS 盒模型（Box Model）。不懂這個概念，網頁排版保證亂七八糟。
盒子的四層結構
想像您在打包一個包裹，這個盒子由內而外包含四個部分：
-
1
內容（Content）
盒子裡真正的物品，例如文字或圖片。用
width與height控制尺寸。 -
2
內距（Padding）
物品與箱子邊緣的緩衝氣泡紙（內部留白）。背景色會延伸到此區域。
-
3
邊框（Border）
箱子的厚紙板外殼（線條）。可設定寬度、樣式與顏色。
-
4
外距（Margin）
箱子與其他箱子之間的距離（外部留白）。背景色不延伸到此。
新手最容易踩的「尺寸陷阱」
這是連資深工程師在新手時期都曾崩潰過的問題：假設您設定一個盒子 width: 200px，再加上 padding: 20px 與 border: 5px，直覺會認為這個盒子寬度還是 200px，對吧？
一行程式碼解決尺寸計算問題
為了避免這種數學災難，現代網頁開發者通常會在 CSS 最開頭加上這段代碼：
/* 讓寬度包含 padding 與 border，不再自動膨脹 */
* {
box-sizing: border-box;
}
加上這行後，設定 width: 200px，瀏覽器就會自動扣除內距與邊框，確保盒子總寬度鎖死在 200px。這是寫 CSS 的第一條軍規，也是台灣前端開發者普遍採用的起手式。
三、精準控制樣式：必學的 CSS 選擇器（Selectors）
CSS 選擇器的功能就像是點名，您必須精確告訴瀏覽器「我要改變這個，不要動那個」。選錯了，樣式就會亂套。
三大基礎選擇器
雖然 CSS 有幾十種選擇器，但實戰中 90% 的時間只用到這三種：
-
1
標籤選擇器（Type Selector）
語法：
p { color: blue; }
效果：網頁裡「所有的」段落都變藍色。範圍最大，但也最粗糙。 -
2
類別選擇器（Class Selector）— 最推薦使用
語法：
.highlight { background: yellow; }
效果：只有 HTML 裡寫了class="highlight"的元素才會變黃，可以靈活重複使用。 -
3
ID 選擇器（ID Selector）
語法：
#logo { width: 100px; }
效果：只有寫了id="logo"的那一個元素受影響。每個頁面每個 ID 只能出現一次。
為什麼 CSS 沒反應？權重戰爭
這是新手最常崩潰的時刻：明明寫了 color: red，文字還是黑的。這通常是「權重（Specificity）」問題。瀏覽器在決定樣式時，有一套嚴格的計分標準：
- ID 選擇器：100 分（權力最大）
- Class 選擇器：10 分
- 標籤選擇器：1 分
/* 標籤選擇器 (1 分) */
p { color: blue; }
/* Class 選擇器 (10 分) — 勝出！文字會是紅色 */
.text-red { color: red; }
四、告別傳統排版：Flexbox 與 Grid 網格系統
現代 CSS 提供了 Flexbox 與 Grid 兩大排版神器，徹底取代了過去用 float 硬湊版面的惡夢。早期製作網頁排版被迫使用 table 表格或 float 浮動屬性，那些方法不僅語法難記，還容易因為內容長度改變而「破版」。
Flexbox：一維排版的救星
Flexbox 彈性排版是專為「單一軸線」（橫向或縱向）設計的佈局模式，最強大的功能在於「對齊」與「空間分配」。您是否有過「想把文字垂直置中」卻怎麼試都不成功的痛苦？在 Flexbox 出現前，這幾乎是世紀難題。現在只需要這三行：
.container {
display: flex;
justify-content: center; /* 水平置中 */
align-items: center; /* 垂直置中 — 終於辦到了！ */
}
Flexbox 非常適合用來製作導航列（Navbar）、按鈕群組，或是卡片式的並排清單。
Grid：二維排版的霸主
如果需要同時處理「行」與「列」，打造像雜誌一樣複雜的版型，CSS Grid 就是最佳選擇。Grid 讓您能在容器上直接畫出隱形的網格線，然後指定元素要佔據哪幾個格子。這給了設計師極大的自由度，甚至可以輕易實現「圖文交錯」的複雜設計，不需要巢狀包覆一堆 div。
Flexbox vs. Grid 怎麼選？
很多新手問：「我該學哪一個？」答案是：兩個都要學，因為它們是互補的。
| 比較項目 | Flexbox（彈性盒） | Grid（網格） |
|---|---|---|
| 維度 | 一維（1D）：處理單行或單列 | 二維（2D）：同時處理行與列 |
| 核心邏輯 | 內容優先：依照內容大小推擠空間 | 佈局優先：先畫好格子，再把內容塞進去 |
| 最強功能 | 元素的對齊、分配剩餘空間 | 精準控制版面結構、重疊元素 |
| 典型場景 | 選單、置中、工具列、卡片列 | 整個網站骨架、相簿牆、雜誌版型 |
五、RWD 響應式網頁設計：讓網站在手機上也完美呈現
超過 60% 的用戶透過手機瀏覽網站，RWD 響應式設計已是基本配備，不是加分項目。如果網頁在手機上還需要「雙指放大」才能看清文字，使用者絕對會立刻跳出。RWD（Responsive Web Design）讓同一份 HTML，能夠自動偵測螢幕寬度，根據不同尺寸（手機、平板、桌機）切換不同的 CSS 樣式。
關鍵第一步：Viewport 設定
很多新手寫了半天 RWD 語法卻沒反應，通常是因為忘了在 HTML 的 <head> 裡加上這行「通關密語」：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
這行程式碼告訴手機瀏覽器：「請用螢幕的實際寬度來渲染網頁，不要把電腦版的畫面硬塞進來縮小。」沒有它，RWD 根本不會啟動。
核心語法：媒體查詢（Media Queries）
CSS 透過 @media 偵測裝置條件，這就像設下一個條件判斷句：
/* 預設樣式（手機優先 Mobile First） */
body {
font-size: 16px;
background: white;
}
/* 當螢幕寬度「至少」有 768px 時（平板以上） */
@media (min-width: 768px) {
body {
font-size: 18px; /* 字變大 */
background: #f0f0f0; /* 背景變灰 */
}
}
斷點該怎麼切？
「斷點（Breakpoints）」就是網頁版型改變的那個寬度臨界點。新手常犯的錯是為「特定手機型號」（如 iPhone SE 的 320px）寫樣式。
根據實戰經驗，只需關注以下三個通用斷點，即可涵蓋絕大多數裝置：
- 768px：平板直立與大手機的分界。
- 1024px：平板橫放與小筆電的分界。
- 1200px：標準桌機螢幕。
六、提升使用者體驗：網頁視覺階層與美學
學會排版技術後，最後一哩路是美感——而美感是可以學習的。為什麼有些網站看起來很專業，有些卻像詐騙網站？關鍵往往不在程式碼的難度，而在於視覺階層（Visual Hierarchy）的掌握。您必須利用 CSS 引導讀者的眼睛，讓他們第一眼就能看到最重要的資訊。
建立視覺階層的三個手段
-
1
大小（Size）
最重要的東西越大。H1 標題通常是內文的 2 倍以上，讓讀者的視線自然落在重點上。
-
2
顏色（Color）
利用對比色突顯重點。例如在白色背景上，使用鮮豔的品牌色按鈕，讓 CTA 按鈕一眼就能看到。
-
3
位置（Position）
遵循 F 型閱讀動線，將關鍵訊息放在左上方，因為眼睛習慣從左到右、從上到下掃描。
留白（White Space）的藝術
新手最常犯的設計錯誤就是「把畫面塞滿」。請記住：留白不是浪費空間，而是讓內容呼吸。適當地增加 margin（外距）與 padding（內距），可以大幅提升閱讀舒適度。台灣許多 B2B 企業官網常見的問題，就是首頁資訊密度過高，用戶看了 3 秒就離開。
- 錯誤做法：文字緊貼著圖片或邊框，密密麻麻讓人喘不過氣。
- 正確做法：給予元素周圍至少 16px–24px 的呼吸空間。
字體與對比（Typography & Contrast）
為了確保可讀性，CSS 中的顏色對比至關重要。根據 WCAG 無障礙設計標準，一般內文的對比度應至少達到 4.5:1。
- 字體顏色：避免使用純黑（
#000000），改用深灰（#333333）讓閱讀更柔和，視覺疲勞感降低。 - 行高（Line-height）：設定
line-height: 1.6以上是黃金標準，避免文字擠在一起，尤其中文字體更需要充足的行距。 - 字體堆疊：中文網站建議使用
font-family: "Microsoft JhengHei", "Noto Sans TC", sans-serif，確保跨平台顯示一致。
常見問答 FAQ
CSS 與 JavaScript 有什麼不同？
CSS 負責外觀樣式，JavaScript 負責互動功能，兩者分工明確、缺一不可。
如果把網頁比喻為一棟房子，HTML 是結構（樑柱），CSS 是裝潢（油漆、壁紙、燈光設計），而 JavaScript 則是水電與智慧家電——負責開關燈、動態效果、表單驗證、API 資料呼叫等需要「計算與互動」的任務。
在 AI 搜尋時代，許多視覺動畫效果（例如漸入效果、滑動展開）其實只需要 CSS 的 transition 與 animation 屬性就能完成，不一定要動用 JavaScript。純 CSS 動畫對瀏覽器效能更友善，也是現代前端開發的趨勢。
實務上，三者通常搭配使用：HTML 決定「有什麼」，CSS 決定「長什麼樣」，JavaScript 決定「能做什麼」。建議按照這個順序學習，打好各自的基礎，才不會在混合使用時搞混職責。
CSS 樣式為什麼會被覆蓋？
CSS 樣式被覆蓋，通常是「權重不足」或「載入順序」這兩個原因造成的。
CSS 遵循兩條核心規則：第一，權重高者優先——ID 選擇器（100 分）永遠壓過 Class（10 分），Class 壓過標籤（1 分）。第二，後寫者優先——權重相同時，寫在程式碼較下方的樣式會覆蓋上方的。
常見的踩坑場景：使用第三方框架（如 Bootstrap）時，框架自帶的樣式若用了 ID 選擇器，您自己寫的 Class 樣式就打不過它，即使寫在後面也沒用。此時有兩個解法：一是用更高權重的選擇器（如 .parent .child 組合），二是適當使用 !important，但後者建議只在無法修改的第三方樣式上使用。
排查被覆蓋的樣式，最有效的方式是按 F12 開啟瀏覽器開發者工具（DevTools），在 Styles 面板中，被劃掉的規則就是輸掉的樣式，一目瞭然。
初學者該先學 Tailwind 還是原生 CSS？
強烈建議先學好原生 CSS，再學 Tailwind 或任何 CSS 框架。
Tailwind CSS 是目前業界非常流行的 Utility-First CSS 框架，它的本質是把常用的 CSS 屬性封裝成短類別（如 flex、text-center、p-4），讓您可以在 HTML 裡直接組合樣式而不需另寫 CSS 檔案。
然而，Tailwind 每個類別背後都是一行 CSS 規則。如果您不懂 display: flex、grid-template-columns 或 box-sizing: border-box 等基礎原理，遇到破版時您根本不知道問題出在哪，更不用說如何排除。這就像不會騎腳踏車就想開摩托車，框架反而會成為阻礙理解的障礙。
建議的學習路線：原生 CSS（盒模型、選擇器、Flexbox、Grid、RWD）打好基礎，至少能做出一個完整的響應式頁面後，再轉向 Tailwind 或 Bootstrap 來加速開發效率。台灣許多求職者的 CSS 能力遠比履歷寫的還薄弱，先把地基打好，對職涯幫助最大。
網頁設計單位該用 px、em 還是 rem？
現代網頁建議優先使用 rem，搭配少量 px，盡量避免 em。
px 是絕對單位，不會隨使用者的瀏覽器設定縮放，對視力不佳或習慣調大字體的使用者不友善，也不利於無障礙設計（Accessibility）。em 是相對於父元素字體大小的單位，在多層巢狀結構中，em 值會不斷疊加（如 1.2em × 1.2em = 1.44em），導致字體大小難以預測，維護起來非常痛苦。
rem（Root EM）則是相對於根元素 <html> 的字體大小，預設為 16px。只要不修改根元素大小，1rem = 16px 是穩定且可預期的。更重要的是，若使用者在瀏覽器設定中調大字體，rem 會等比例縮放，px 卻不會，在 Google Core Web Vitals 的 Accessibility 分數評估上，rem 是更優先的選擇。
實務建議：字體大小、間距、版面寬度用 rem；邊框（border）、細微的 1–2px 效果用 px；盡量不用 em，除非刻意需要跟隨父元素縮放的場景。
寫完 CSS 版面還是跑掉，該怎麼檢查？
版面跑掉時，第一步永遠是按 F12 開啟瀏覽器開發者工具（DevTools），這是工程師最重要的除錯武器。
在網頁上按右鍵選「檢查（Inspect）」或按 F12，進入 DevTools 後有幾個關鍵操作：首先，在「Elements」面板點選跑掉的元素，右側「Styles」面板會顯示所有套用的樣式，被劃掉的規則代表「權重輸了」或「語法錯誤」。其次，在「Box Model」圖示中，可以直接看到元素的 content、padding、border、margin 各層的實際像素大小，哪裡多了空間一目瞭然。
常見的破版原因包括：box-sizing 沒設 border-box 導致寬度超出父容器、float 沒有清除（clearfix）、margin 折疊（collapsing）讓間距消失，或是 position: absolute 的定位參照元素不對。
DevTools 最實用的功能是「即時修改」——在 Styles 面板直接輸入數值，改完立刻看效果，不用一直切換編輯器和瀏覽器。確認修改有效後，再複製回程式碼，大幅提升除錯效率。
