【內容】認識 CSS 是什麼：網站外觀怎麼控制？基礎知識完整說明！

在網頁設計的世界中，層疊樣式表（Cascading Style Sheets，簡稱 CSS） 是不可或缺的核心技術之一。
如果說 HTML 負責「內容結構」，那麼 CSS 就是掌控網站外觀與視覺呈現的關鍵角色。
從字體大小、顏色配置、版面排列，到不同裝置上的響應式設計，幾乎所有「你看到的網站樣子」，都與 CSS 息息相關。
本文將帶你完整認識 CSS 是什麼、如何運作，以及實務上最重要的基礎概念與應用方式，適合初學者、網站經營者與行銷人員閱讀。

延伸閱讀：
HTML 基礎知識介紹
HTML5 常用標籤與語法
HTML 架構教學
 

CSS 是什麼？定義與工作原理

CSS（層疊樣式表）是一種樣式語言（Style Language），主要用途是用來定義 HTML 或 XML 文件在瀏覽器中的「呈現方式」，包含：

• 文字樣式（字型、大小、顏色、行距）
• 排版配置（寬高、邊距、對齊、版型）
• 視覺效果（背景、陰影、動畫、轉場）
• 響應式設計（不同裝置尺寸的顯示方式）

簡單來說：
HTML 負責內容結構，CSS 負責外觀與設計。

如果把網站比喻成一本書：
HTML 是書的「文字內容與章節結構」
CSS 則是「字體、排版、封面設計與印刷風格」
 

CSS 的運作流程

1. 瀏覽器讀取 HTML 結構
2. 解析 CSS 規則
3. 計算每個元素的最終樣式
4. 建立 Render Tree 並繪製畫面

 

CSS 與 HTML 的關係

HTML 與 CSS 是互補但分工明確的兩種語言：

技術	主要功能
HTML	定義網站的內容與結構，例如標題、段落、圖片、連結等， 是所有網頁的基礎骨架。
CSS	控制網站的外觀與排版， 包含顏色、字型、間距、版面配置與響應式設計。

HTML 決定「這是標題、這是段落」，
CSS 則決定「標題要多大、什麼顏色、置中或靠左」。
透過 CSS，設計師可以在不改動 HTML 結構的情況下，全面調整網站風格。
 

CSS 核心理念：內容與外觀分離

CSS 的設計核心理念是 將「內容（Content）」與「外觀（Presentation）」分離。
這代表：

• HTML 專注於語意與結構（標題、段落、清單、表單）
• CSS 專注於視覺與互動（顏色、間距、動畫、版面）

 

為什麼這個理念很重要？

在沒有 CSS 的早期網頁中，樣式常直接寫在 HTML 標籤裡，導致：

• 程式碼混亂
• 修改樣式要逐頁調整
• 不利於維護與擴充

CSS 出現後，可以做到：

• 一次修改樣式，整站同步更新
• HTML 更乾淨、語意更清楚
• 設計與開發可以分工合作

 

CSS 語法結構說明

CSS 的基本語法由三個部分組成：

selector {
  property: value;
}

 

三大元素說明

• 選擇器（Selector）：指定要套用樣式的元素
• 屬性（Property）：要調整的樣式項目
• 值（Value）：實際設定的內容

 

範例

h1 {
  color: blue;
  font-size: 32px;
}

代表：所有 h1 標題文字顯示為藍色，字體大小為 32px。
 

核心 CSS 功能解析

CSS 的核心功能可以大致分為三個層面：
版面配置、視覺設計、互動效果。
這三者共同決定了一個網站「怎麼排、怎麼看、怎麼動」。
 

一、版面配置（Layout）

版面配置是 CSS 最重要的基礎之一，負責決定「元素要放在哪裡、佔多大空間」。
 

1. 盒模型（Box Model）

盒模型是所有 HTML 元素在 CSS 中的基本結構，每一個元素本質上都是一個「盒子」。
盒模型由四個部分組成：

• Content（內容）：實際文字或圖片
• Padding（內距）：內容與邊框之間的空間
• Border（邊框）：元素的外框
• Margin（外距）：元素與其他元素之間的距離

理解盒模型可以幫助你：

• 精準控制元素尺寸
• 避免版面跑版
• 正確使用 box-sizing 處理寬高計算問題

幾乎所有排版問題，最後都會回到盒模型。
 

2. Flexbox（彈性盒模型）

Flexbox 是一種一維排版系統，適合用來處理「橫向或直向排列」。
它特別擅長解決：

• 水平或垂直置中
• 元素平均分配空間
• 元素順序調整
• 響應式排列需求

Flexbox 的核心概念包括：

• 主軸（Main Axis）與交叉軸（Cross Axis）
• 對齊方式（對齊、分散、靠邊）

非常適合導覽列、卡片列表、按鈕群組等結構。
 

3. Grid System（網格系統）

Grid 是一種二維排版系統，同時控制「列（row）」與「欄（column）」。
Grid 的特色在於：

• 能建立複雜且穩定的版型
• 精準控制每個區塊的位置與比例
• 非常適合整體頁面結構規劃

常見應用場景包括：

• 首頁整體版型
• 文章內容＋側欄布局
• 後台系統或儀表板畫面

Flexbox 解決「排列」，Grid 解決「版型」。
 

二、視覺設計（Visual Design）

視覺設計讓網站不只是能用，而是「好看、好讀、好理解」。
 

1. 字體與顏色

CSS 可以完整控制文字呈現方式，包括：

• 字型（font-family）
• 字體大小與行距
• 粗細與字距
• 文字顏色與對比

良好的字體與配色設計能：

• 提升閱讀舒適度
• 強化品牌識別
• 引導使用者視線層級

在 SEO 與 UX 上，清楚的文字層級非常重要。
 

2. 背景與邊框

背景與邊框用來建立區塊感與視覺分隔。
可應用於：

• 區塊底色區分內容層次
• 邊框提示互動或狀態
• 圓角設計提升親和感

合理使用背景與邊框能：

• 提高內容辨識度
• 減少視覺混亂
• 強化版面結構感

 

3. 陰影與動畫效果

陰影與動畫是提升「立體感與動態感」的重要工具。
陰影常用於：

• 按鈕、卡片的層次感
• 浮動視覺效果

動畫與轉場效果可以：

• 提供操作回饋
• 讓畫面切換更自然
• 提升整體使用體驗

好的動畫是「輔助」，不是干擾。
 

三、互動效果（Interaction）

互動效果讓網站「對使用者有反應」，提升操作直覺性。
 

1. 偽類（Pseudo-classes）

偽類用來描述元素在「特定狀態」下的樣式變化，例如：

• 滑鼠移上
• 被點擊
• 取得焦點

常見應用包括：

• 按鈕滑過變色
• 表單欄位聚焦提示
• 連結狀態區分

讓使用者知道「現在可以做什麼」。
 

2. 偽元素（Pseudo-elements）

偽元素可以在不修改 HTML 的情況下，加入額外的視覺元素。
常見用途：

• 裝飾線條
• Icon 樣式
• 標題前後裝飾

偽元素的優點是：

• HTML 更乾淨
• 樣式與內容分離
• 更容易維護與調整

CSS 選擇器（Selector）的功能是：
告訴瀏覽器「哪些 HTML 元素要套用這些樣式」。
選擇器用得好，CSS 會：

• 好讀
• 好維護
• 不容易壞

用得不好，就會：

• 樣式互相打架
• 不敢改、不敢刪
• 越寫越亂

 

CSS 選擇器的類型與用途

一、元素選擇器（Type Selector）

範例：

p {}
h1 {}

 

是什麼？

直接指定 HTML 標籤名稱，套用樣式給「所有該類型元素」。
 

適合用途

• 設定全站的「基礎樣式」
• 文字的預設行距、字型
• 標題層級的共通外觀

 

實務觀念

• 適合用在「全站共用規則」
• 不適合用來做細部設計

常見用法：Reset、Base Style
 

二、類別選擇器（Class Selector）

範例：

.card {}
.btn-primary {}

 

是什麼？

透過 class 屬性指定樣式，可重複使用。
 

適合用途

• 元件樣式（卡片、按鈕、區塊）
• 可重複使用的 UI 組件
• 現代前端設計的主力選擇器

 

實務觀念

• 最推薦、最常用
• 命名要有語意（用途導向）
• 避免只為了外觀命名（如 .red-box）

幾乎 80% 的 CSS 都應該用 class 來寫。
 

三、ID 選擇器（ID Selector）

範例：

#header {}
#footer {}

 

是什麼？

透過 id 屬性指定樣式，一個頁面只能出現一次。
 

適合用途

特定唯一區塊
搭配 JavaScript 操作 DOM
 

實務觀念（⚠️ 很重要）

• 不建議大量使用在 CSS
• 權重（Specificity）太高，難以覆蓋
• 容易造成樣式鎖死、不好維護

在 CSS 中，class 通常比 ID 更安全。
 

四、屬性選擇器（Attribute Selector）

範例：

input[type="text"] {}
a[target="_blank"] {}

 

是什麼？

根據元素的「屬性與屬性值」來選取。
 

適合用途

• 表單樣式控制
• 不方便加 class 的情境
• 提升語意與可讀性

 

 

實務觀念

• 精準但不要濫用
• 搭配表單時非常實用
• 效能略低於 class（但現代瀏覽器影響不大）

 

五、偽類（Pseudo-classes）

範例：

a:hover {}
input:focus {}
button:disabled {}

 

是什麼？

用來描述元素「狀態」的選擇器。
 

常見應用

• 滑鼠移入效果
• 表單聚焦提示
• 禁用、已選取狀態

 

實務觀念

• 提升互動回饋
• 對 UX 與 Accessibility 非常重要
• 不只是裝飾，而是「操作提示」

 

六、偽元素（Pseudo-elements）

範例：

.card::before {}
.title::after {}

 

是什麼？

用 CSS 產生「不存在於 HTML 的視覺元素」。

常見用途

裝飾線條
Icon、標記
標題前後裝飾
 

實務觀念

• 保持 HTML 結構乾淨
• 非語意內容才用偽元素
• 不要放關鍵資訊（SEO / 無障礙）

 

為什麼良好的 CSS 選擇器設計很重要？

提高效能

• 瀏覽器解析選擇器是有順序的
• 簡單、明確的選擇器效率較高
• 避免過度巢狀、複雜選擇器

. class > attribute > # ID > 複雜結構
 

降低維護成本

• 好命名的 class，一看就懂用途
• 不需要「猜」這段 CSS 在控制什麼
• 新人接手也能快速理解

CSS 寫給「未來的自己與同事」看。
 

避免樣式衝突

• 避免權重過高的選擇器
• 降低 !important 的使用
• 不讓樣式互相覆蓋、打架

樣式穩定 = 專案穩定。
 

樣式繼承與層疊規則

CSS 的「Cascading（層疊）」是其核心特色之一。

決定樣式優先順序的三大因素

1. 重要性（!important）
2. 選擇器權重（Specificity）
3. 程式碼出現順序

理解層疊規則能有效解決「樣式為什麼沒生效」的問題。
 

響應式設計的實現方式

響應式網頁設計（RWD）讓網站能適應不同裝置尺寸。

關鍵技術包含

• 媒體查詢（Media Queries）
• 相對單位（%、rem、vw）
• Flexbox / Grid
• 響應式圖片

 

響應式必備：媒體查詢（Media Queries）應用

@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

媒體查詢能根據：

• 螢幕寬度
• 裝置方向
• 解析度

動態調整樣式，是 RWD 的核心技術。
之後我們會針對響應式設計，撰寫另一篇 CSS 教戰文章。
 

實戰技巧：CSS 版面配置策略

在實務開發中，CSS 版面配置不只是「把東西排好」，而是關係到可維護性、擴充性與專案穩定度。
以下是實戰中非常推薦遵循的版面配置原則。
 

1. 先規劃 HTML 結構，再設計 CSS

在寫 CSS 之前，永遠先把 HTML 結構想清楚。
 

為什麼要先想結構？

• CSS 是「依附在 HTML 結構上的」
• 結構亂，CSS 只會越補越亂
• 好結構能減少 CSS 數量與複雜度

 

實務建議

• 用語意化標籤（header / nav / main / section / article / footer）
• 一個區塊只負責一件事
• 不要為了排版多包無意義的 div

HTML 決定骨架，CSS 只是幫骨架穿衣服。
 

2. 一維排列用 Flexbox

只要你的需求是「同一排或同一列的排列」，Flexbox 幾乎都是第一選擇。
 

適合使用 Flexbox 的情境

1. 導覽列（Logo＋選單＋按鈕）
2. 按鈕群組（平均分配、靠右）
3. 卡片列表（橫向排列、自動換行）
4. 表單欄位的 label＋input 排列

能用 Flexbox 解決的，就不要用 position 硬排。
 

3. 二維版面用 Grid

當你需要同時控制「橫向＋直向」時，Grid 是最穩定的解法。

適合使用 Grid 的情境

• 整體頁面布局（Header / Content / Sidebar / Footer）
• 多欄文章結構
• 儀表板（Dashboard）
• 複雜卡片拼接版型

 

Grid 的實戰優勢

• 清楚定義「欄位系統」
• 版型穩定、不易跑版
• 不需要依賴浮動或大量 margin

Grid 是「版型設計工具」，不是只是排列工具。
 

4. Flexbox 與 Grid 的正確搭配方式

Flexbox 與 Grid 不是競爭關係，而是互補關係。

常見實戰搭配方式

• 外層用 Grid：規劃整個頁面區塊
• 內層用 Flexbox：控制區塊內元素排列

 

範例思維

• Grid 決定「這一塊在左還右、佔幾欄」
• Flexbox 決定「裡面的東西怎麼排、怎麼對齊」

想清楚「層級」，排版就會變得很穩。
 

5. 避免過度使用 position 與 z-index

position 與 z-index 是必要工具，但絕對不是版面配置的首選。

常見錯誤用法

• 為了排版大量使用 absolute
• 到處加 z-index: 9999
• 樣式一改就整頁壞掉

 

position 適合的情境

• 彈窗（Modal）
• Tooltip
• 浮動按鈕
• 固定導覽列（fixed / sticky）

 

實務原則

• 能用 Flow（正常文流）就不要脫離
• position 用來「特殊效果」，不是「基本排版」
• z-index 要有規範與層級表

position 是手術刀，不是膠帶。
 

重點：實戰版面配置的思考流程

在實際開發時，可以用這個流程快速判斷：

• 這是整體版型還是區塊內排列？
• 是否需要同時控制列與欄？
• 是否能保持在正常文流中？
• 是否未來會擴充或改版？

對應選擇：

• 一維 → Flexbox
• 二維 → Grid
• 特殊效果 → position（謹慎）

 

定位（Position）與層疊上下文

在 CSS 中，position 用來控制元素「如何脫離或遵循正常文件流（normal flow）」，而 z-index 與層疊上下文（Stacking Context）則負責決定「誰在上面、誰在下面」。
這一組概念非常強大，但如果使用不當，往往也是造成版面混亂與難以維護的主要原因。
 

1. CSS 的 position 屬性種類與用途

1. static（預設值）

• 所有元素的預設定位方式
• 遵循正常文件流
• 不接受 top / right / bottom / left
• 無法使用 z-index

適合情境

• 一般內容區塊
• 不需要特殊定位的元素

多數元素其實都應該保持 static。
 

2. relative（相對定位）

• 仍然保留在正常文件流中
• 可以用 top / left 等微調位置
• 常作為 absolute 的參考父層

適合情境

• 小幅度位置調整
• 作為子元素 absolute 的定位基準

⚠️ 注意
relative 位移只影響視覺位置，不會影響其他元素的排列。
 

3. absolute（絕對定位）

• 脫離正常文件流
• 以最近的「有定位（非 static）」祖先元素為參考
• 若找不到，則以 body / html 為基準

適合情境

• Icon 疊加
• Tooltip
• 下拉選單
• 裝飾性元素

⚠️ 常見錯誤
用 absolute 來做整體版面排版，會讓結構難以維護。
 

4. fixed（固定定位）

• 以「瀏覽器視窗」為參考
• 捲動頁面時位置不變
• 脫離正常文件流

適合情境

• 固定導覽列
• 浮動客服按鈕
• 返回頂端按鈕

⚠️ 注意
在行動裝置上，fixed 需特別測試瀏覽器相容性。
 

5. sticky（黏性定位）

• 結合 relative 與 fixed 的特性
• 在特定區間內固定，超出後恢復正常
• 必須搭配 top（或其他方向）才會生效

適合情境

• 表格標題列
• 側欄導覽
• 章節目錄

⚠️ 注意
父層若有 overflow: hidden / auto，可能會讓 sticky 失效。
 

2. z-index 與層疊上下文（Stacking Context）

什麼是 z-index？

z-index 用來控制元素在「Z 軸」上的前後順序，數字越大，層級越前。
⚠️ 重要前提：
z-index 只對「有定位的元素」生效
（position ≠ static）
 

什麼是層疊上下文（Stacking Context）？

層疊上下文可以理解為「一個獨立的疊層世界」。
一旦元素建立了新的層疊上下文：

• 其子元素的 z-index 只在該上下文內比較
• 無法與外部元素直接比較層級

 

常見會建立層疊上下文的情況

• position 為 relative / absolute / fixed / sticky，且有設定 z-index
• opacity 小於 1
• transform、filter、perspective
• will-change
• isolation: isolate

這是「為什麼 z-index 設再大也蓋不過去」的常見原因。
 

3. 實務中 z-index 失效的常見原因

1. 元素沒有設定 position
2. 父層建立了新的層疊上下文
3. 在不同層疊上下文中比較 z-index
4. 無規範地亂設 z-index 數字

 

4. 實戰建議與避雷原則（非常重要）

✅ 建議做法

• 優先使用 Flexbox / Grid 排版
• position 用於「浮動、疊加、特殊效果」
• 建立清楚的 z-index 層級規範（例如：modal > overlay > header）

❌ 避免做法

• 為排版大量使用 absolute
• 到處寫 z-index: 9999
• 不理解層疊上下文就硬調數字
• z-index 問題，通常不是數字不夠大，而是上下文不對。

position 與 z-index 是 CSS 中最有威力、也最容易出問題的工具之一。

• 用得好，它讓介面更直覺；
• 用不好，它讓專案變成地雷場。

記住一句話就好：

• 排版 → Flexbox / Grid
• 疊加 → position + z-index（謹慎）

 

CSS 預處理器

當專案規模變大、CSS 檔案越寫越多時，單純的 CSS 會開始出現以下問題：

• 重複樣式難以管理
• 顏色、間距改動需要全站搜尋取代
• 檔案過長、不易閱讀
• 多人協作時容易衝突

CSS 預處理器（CSS Preprocessor）正是為了解決這些問題而誕生的工具。
 

什麼是 CSS 預處理器？

CSS 預處理器是一種「在 CSS 之上的語法工具」，
允許你用更進階的寫法（變數、巢狀、函式）來撰寫樣式，
再由工具「編譯（compile）」成瀏覽器能讀懂的標準 CSS。
瀏覽器不直接讀預處理器語法，而是讀編譯後的 CSS。
 

常見 CSS 預處理器

1. Sass（最主流）

• 目前最廣泛使用的 CSS 預處理器
• 社群資源多、文件完整
• 多數現代前端框架預設支援

 

特色

• 支援變數、巢狀、Mixins、Functions
• 檔案可模組化拆分
• 適合中大型專案與團隊開發

實務上最推薦學習與使用的預處理器。
 

2. LESS

• 語法接近原生 CSS
• 學習曲線較平緩
• 早期在 Bootstrap 等專案中常見

適合情境

• 已熟悉 CSS，想快速進入預處理器世界
• 舊專案維護

 

3. Stylus

• 語法最自由（甚至可省略大括號與分號）
• 彈性高，但可讀性因人而異
• 社群規模較小

適合情境

• 個人專案
• 對語法自由度要求高的開發者

 

CSS 預處理器提供的核心功能

1. 變數（Variables）

可以將顏色、字型、間距等常用值集中管理。

好處

• 修改一次，全站同步更新
• 避免魔法數字（magic numbers）
• 建立設計系統基礎

👉 非常適合品牌色、字體尺寸、間距系統。
 

2. 巢狀結構（Nesting）

允許依照 HTML 結構巢狀撰寫 CSS。

好處

• 結構更直覺
• 關係更清楚
• 可讀性提升

⚠️ 實務提醒
避免巢狀過深，否則會產生權重過高、難以覆蓋的問題。
 

3. Mixins（混入）

將一組可重複使用的樣式封裝起來，像函式一樣呼叫。

好處

• 減少重複程式碼
• 統一常見樣式（例如按鈕、卡片）
• 可帶參數，彈性高

非常適合處理跨瀏覽器前綴、常用 UI 元件。
 

4. 函式化管理樣式（Functions）

可以對數值、顏色進行計算與處理。
好處

• 動態計算尺寸
• 建立可調整的設計邏輯
• 強化樣式一致性

 

為什麼 CSS 預處理器能提升可維護性？

在大型專案中，CSS 預處理器可以做到：

• 集中管理設計規則
• 模組化拆分檔案
• 降低重複與錯誤
• 讓多人協作更有規範

簡單來說：
CSS 預處理器讓樣式從「寫給瀏覽器」變成「寫給人看」。
 

實務建議：什麼時候該用預處理器？

適合使用的情境

• 中大型網站
• 多頁式專案
• 團隊協作開發
• 需要長期維護的產品

 

不一定需要的情境

• 單頁小型專案
• Demo 或短期活動頁
• 極簡樣式需求

工具不是越多越好，而是「剛好夠用」。
 

CSS 學習資源與延伸閱讀

CSS 的世界非常廣泛，不是一篇文章就可以完整說完的。
未來我們會持續更新教學文章，在那之前，底下是我們常使用的外部教學資源，可當作參考使用學習：）

• MDN Web Docs
• W3Schools CSS Tutorial
• CSS-Tricks

 

常見問答（FAQ）

Q1. CSS 和 HTML 有什麼差別？一定要一起用嗎？

HTML 負責「內容與結構」，例如標題、段落、清單、圖片；CSS 負責「外觀與排版」，例如字體大小、顏色、間距、版面布局。
雖然不寫 CSS 網站仍能顯示，但外觀會非常陽春，也難以做出一致的品牌風格與良好的使用者體驗。實務上幾乎所有網站都會搭配 CSS 使用。
 

Q2. 為什麼我寫的 CSS 沒有效果？最常見原因是什麼？

最常見的原因通常有 4 類：

1. CSS 沒有正確載入（路徑錯誤或檔案沒連到）
2. 選擇器選不到元素（class / id 名稱拼錯、層級不同）
3. 被其他樣式覆蓋（層疊規則、權重更高、出現順序較後）
4. 快取影響（改了但瀏覽器仍讀舊檔，可嘗試硬重新整理）

建議用瀏覽器 DevTools（檢查/Inspect）看該元素最後套用到哪一段 CSS，最快定位問題。
 

Q3. CSS 權重（Specificity）是什麼？為什麼不建議常用 !important？

權重（Specificity）是 CSS 決定「哪個樣式優先」的規則之一。通常權重越高越容易覆蓋其他樣式，例如 ID 選擇器通常比 class 更難被蓋掉。
!important 會直接提高優先權，雖然能快速解決「樣式沒生效」，但容易造成：

• 後續維護困難（變成用 !important 互打）
• CSS 結構失控（不容易追根究底）
• 改一個樣式牽一髮動全身

實務上建議先用「更合理的選擇器設計」與「良好的 CSS 架構」解決，!important 只在必要情境（例如第三方套件覆蓋、工具類框架）才使用。
 

Q4. Flexbox 和 Grid 有什麼差別？我應該先學哪個？

Flexbox 是「一維布局」（一行或一列），Grid 是「二維布局」（同時控制列與欄）。
簡單判斷方式：

• 導覽列、按鈕群組、卡片橫向排列 → 用 Flexbox
• 整頁版型、主欄＋側欄、複雜區塊排版 → 用 Grid

如果你是初學者，通常建議先學 Flexbox，因為更直覺、使用場景多；熟悉後再學 Grid 來做完整版型會更順。
 

Q5. RWD 響應式設計一定要用媒體查詢（Media Queries）嗎？

多數情況下仍需要媒體查詢，但「不一定所有地方都要靠它」。現代響應式設計常搭配：

• 相對單位（%、rem、vw/vh）讓尺寸自然縮放
• Flexbox / Grid 讓布局更有彈性
• 媒體查詢 用來處理「斷點」：例如手機改單欄、桌機改雙欄

也就是：
媒體查詢通常是響應式設計的核心工具之一，但搭配彈性布局與相對單位，才能做到更穩、更好維護的 RWD。