css教學入門：從選擇器與基本語法學會網頁顏色、字型和版面設定

CSS 是什麼？它在網頁裡負責什麼

CSS 是控制 HTML 外觀與版面的樣式表語言，負責顏色、字型、間距、背景、邊框與元素排列。HTML 放內容，CSS 決定這些內容在瀏覽器裡長什麼樣子。

做網站時，很多新手會先把焦點放在「怎麼寫出畫面」，但實務上要先分清楚每一種技術的工作。CSS 不負責儲存資料，也不負責表單送出邏輯，它的核心工作是把原本只有結構的 HTML 變成可閱讀、可瀏覽、可操作的畫面。

CSS 和 HTML、JavaScript 差在哪

技術	主要負責	例子
HTML	內容與結構	標題、段落、連結、表單欄位
CSS	外觀與版面	顏色、字型、寬度、間距、排列方式
JavaScript	互動與邏輯	點擊後展開選單、送出表單、切換狀態

CSS 可以控制哪些畫面效果

• 文字顏色，例如把段落改成深灰色。
• 背景顏色，例如替區塊加上淺色背景。
• 字型與字級，例如設定中文字型與 18px 內文字級。
• 行高與段落間距，例如讓文章更好閱讀。
• 邊框與圓角，例如做出卡片或按鈕外觀。
• 區塊寬度與留白，例如控制內容不要貼齊視窗邊緣。
• 元素排列，例如用 Flexbox 排導覽列或按鈕群組。

哪些事情不該用 CSS 解決

CSS 不適合處理表單送出、會員登入、購物車計算、資料儲存或伺服器邏輯。這些工作通常需要 JavaScript、後端程式或資料庫支援。把 CSS 的邊界抓清楚，學習時會少走很多彎路。

第一個 CSS 範例：把段落文字變紅

第一個 CSS 範例可以從改變段落顏色開始：先在 HTML 放一個 p 元素，再用 CSS 寫下 p { color: red; }，瀏覽器就會把段落文字顯示成紅色。

這個範例雖然小，但它包含 CSS 基本語法裡最重要的三件事：選到元素、設定屬性、給出屬性值。初學者先看見結果，比背一堆名詞更有效。

HTML 範例

<p>這是一段會被 CSS 改變顏色的文字。</p>

這段 HTML 只有一個段落元素。畫面原本會使用瀏覽器預設樣式，通常是黑色文字、正常大小、沒有特別設計。

CSS 規則範例

p {
  color: red;
}

結果會看到段落文字變成紅色。這裡的 p 是 selector，代表要選到所有 p 標籤；color 是 property，代表要設定文字顏色；red 是 value，代表顏色值。

{}、:、; 分別代表什麼

符號	用途	在範例中的位置
{}	包住這個選擇器要套用的樣式宣告	p { ... }
:	分隔屬性與屬性值	color: red
;	結束一個宣告	color: red;

CSS 基本語法：選擇器、屬性、屬性值、宣告

CSS 基本語法由選擇器和一組宣告組成。選擇器決定樣式要套用到誰，宣告由屬性與屬性值組成，負責描述要改變的樣式。

.title {
  color: #1f2937;
  font-size: 32px;
}

以上範例中，.title 是選擇器，color: #1f2937; 和 font-size: 32px; 是宣告。我的建議是先把這個結構看熟，再去記屬性名稱，順序會比較穩。

selector 選擇器

selector 用來選到 HTML 元素。入門階段先掌握元素選擇器、class 選擇器和 id 選擇器就夠用。

選擇器	寫法	用途
元素選擇器	p	選到所有 p 標籤
class 選擇器	.card	選到 class 為 card 的元素，可重複使用
id 選擇器	#main	選到 id 為 main 的唯一元素

property 屬性與 value 屬性值

property 是你想改的樣式項目，value 是你指定的結果。它們通常成對出現。

body {
  color: #333333;
  background-color: #f7f7f7;
  font-size: 18px;
}

color 控制文字顏色，background-color 控制背景色，font-size 控制字級。初學時不用一次背完整清單，先從常改的屬性開始。

declaration 宣告與 ruleset 規則集

一個 declaration 是一組屬性和屬性值；一個 ruleset 是選擇器加上大括號裡的所有宣告。

.notice {
  color: #b45309;          /* 一個 declaration */
  background-color: #fffbeb;
}

這整段就是一個 ruleset。實務上讀 CSS 時，可以先看 selector 知道它影響誰，再看每一行 declaration 知道它改了什麼。

CSS 要寫在哪裡？inline、style 標籤、外部 CSS 檔案怎麼選

CSS 可以寫在 HTML 元素上、HTML 文件內的 <style> 標籤中，也可以放在獨立的外部 CSS 檔案。正式網站通常以外部 CSS 檔案為主。

寫法	適合情境	維護性
inline style	臨時測試單一元素	低
<style> 標籤	單頁範例或小型測試	中
外部 CSS 檔案	正式網站、可重複管理樣式	高

inline style 什麼時候用

inline style 是把樣式直接寫在 HTML attribute 裡，適合很快測試一個元素的外觀。

<p style="color: red;">這段文字會變紅。</p>

缺點是難維護。當同樣樣式出現在十幾個元素上，以後要改顏色就得一個一個找。網站進入正式製作後，我很少建議把主要樣式寫成 inline style。

<style> 標籤適合什麼情境

<style> 標籤通常放在 <head> 裡，適合單頁測試或教學範例。

<style>
  p {
    color: #2563eb;
  }
</style>

這種寫法比 inline style 好管理，但當頁面變多時，樣式仍會分散在不同 HTML 檔案裡。

外部 CSS 檔案是正式網站的主要做法

外部 CSS 檔案把樣式集中在獨立檔案，例如 styles.css，再由 HTML 用 <link> 載入。

<head>
  <link rel="stylesheet" href="/styles.css">
</head>

正式網站使用這種方式最清楚，因為版面、按鈕、文章樣式和導覽列樣式都能集中管理。當網站規模變大，這個差異會非常明顯。

新手決策表：現在該用哪一種

情境	推薦做法	原因
只想測一行文字顏色	inline style	最快看到效果
練習一個 HTML 範例	<style> 標籤	檔案少，方便練習
製作正式頁面	外部 CSS 檔案	可重複使用，也較好維護

CSS 選擇器怎麼選到 HTML 元素

CSS 選擇器決定樣式要套用到哪些 HTML 元素。入門最常用的是元素、class、id、後代與群組選擇器。

先看同一段 HTML，再用不同選擇器套用樣式：

<article class="card" id="intro-card">
  <h2>網站製作筆記</h2>
  <p>這是一段介紹文字。</p>
  <a href="/posts/css-tutorial">閱讀文章</a>
</article>

元素選擇器：直接選標籤

元素選擇器會選到同一種 HTML 標籤。

p {
  line-height: 1.8;
}

這會讓所有 p 段落的行高變成 1.8。它適合設定全站基礎文字樣式，但如果只想改某一區，就要改用 class。

class 選擇器：最常用的可重複樣式

class 選擇器用 . 開頭，同一個 class 可以放在多個元素上，是實務切版最常用的選法。

.card {
  padding: 24px;
  border: 1px solid #dddddd;
}

像卡片、按鈕、提示訊息這類可重複元件，通常會用 class 管理。這樣 HTML 結構清楚，CSS 也容易延伸。

id 選擇器：唯一元素，不建議濫用

id 選擇器用 # 開頭，通常對應頁面中的唯一元素。

#intro-card {
  background-color: #f8fafc;
}

id 的權重比 class 高，初學者若大量使用 id，後面很容易遇到樣式覆蓋不掉的問題。我的做法是：版面樣式優先用 class，id 留給需要唯一識別的地方。

後代與群組選擇器

後代選擇器可以選到某個範圍裡的元素，群組選擇器可以讓多個選擇器共用同一組樣式。

.card a {
  color: #2563eb;
}
h1,
h2 {
line-height: 1.3;
}

.card a 代表只選到 card 裡面的連結；h1, h2 代表 h1 和 h2 共用行高設定。入門階段保持選擇器可讀，比寫得很炫更重要。

用 CSS 設定顏色、字型與文字樣式

CSS 可以用 color、background-color、font-family、font-size、font-weight 和 line-height 設定文字與背景呈現。

這些屬性是做網站最常碰到的基礎。只要能穩定控制顏色、字級、行高和按鈕外觀，就已經能把一個純 HTML 頁面整理成可閱讀的網頁。

設定文字顏色與背景色

color 控制文字顏色，background-color 控制背景色。色碼可以用英文色名、hex 或 rgb，正式製作時常用 hex。

.intro {
  color: #1f2937;
  background-color: #f9fafb;
  padding: 20px;
}

畫面上會看到這個區塊有淺灰背景，文字是深灰色，閱讀起來比純黑字更柔和。

設定字型、字級、粗細與行高

中文字型要考慮不同作業系統的支援。台灣網站常見做法是設定一組 fallback，讓 Windows、macOS 和手機都有合理顯示。

body {
  font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.8;
}

font-size 影響文字大小，font-weight 影響粗細，line-height 影響每行之間的距離。文章型網站的行高不要太擠，否則內容再好也會難讀。

連結與按鈕的基本樣式

連結和按鈕是網站裡最常被點擊的元素，入門樣式先處理顏色、內距、邊框和 hover 狀態即可。

a {
  color: #2563eb;
}
.button {
display: inline-block;
padding: 10px 16px;
border-radius: 6px;
background-color: #111827;
color: #ffffff;
text-decoration: none;
}
.button:hover {
background-color: #374151;
}

這段 CSS 會讓一般連結變藍色，讓 .button 看起來像可點擊的按鈕。想再深入按鈕設計，可以延伸看 CTA 按鈕設計。

Box Model 與基礎版面：margin、padding、border、width

Box Model 是理解 CSS 版面的基礎。每個元素都可以看成一個盒子，由內容、內距、邊框和外距組成。

很多版面問題不是 Flexbox 不會用，而是 margin、padding、width 的關係沒有先理解。這一段先建立空間感，後面學切版會順很多。

Box Model 是什麼

層級	CSS 屬性	作用
內容	width、height	元素內容本身的寬高
內距	padding	內容和邊框之間的距離
邊框	border	盒子的邊線
外距	margin	元素和其他元素之間的距離

margin 和 padding 差在哪

padding 是元素內部的留白，margin 是元素外部的距離。兩者都會影響版面，但感覺完全不同。

屬性	位置	常見用途
padding	邊框以內	讓卡片內容不要貼邊
margin	邊框以外	讓兩個區塊分開

.card {
  padding: 24px;
  border: 1px solid #dddddd;
}

這會讓卡片內容和邊框之間有空間。

.card {
  margin-bottom: 32px;
}

這會讓這張卡片和下一個元素之間有距離。

display 影響元素排列方式

display 決定元素在頁面上的排列方式。入門先認識 block、inline 和 inline-block。

值	畫面表現	常見元素
block	通常會佔滿一整行	div、p、h2
inline	跟文字排在同一行	a、span
inline-block	可排在同一行，也能設定寬高與內距	常用於按鈕

Flexbox 先學最小可用版

Flexbox 適合處理一排元素的排列，例如導覽列、卡片列、按鈕群組。先學 display: flex、gap、justify-content 和 align-items 就能做很多基礎版面。

.nav {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}

這段 CSS 會讓導覽列中的項目水平排列，項目之間有間距，並在垂直方向置中。

Grid、RWD、Container Queries 先列為下一階段

CSS Grid、media query 和 container query 都很有用，但不需要在第一天全部學完。先用 Box Model 和 Flexbox 做出穩定版面，再進入 RWD 和更複雜的排版工具，學習負擔會小很多。

CSS 為什麼沒有效果？新手排查流程

CSS 沒生效通常來自四個原因：檔案沒有載入、選擇器沒有選到元素、樣式被後面的規則覆蓋，或瀏覽器快取還留著舊檔案。

排查時不要一開始就亂加 !important。先照順序檢查，通常幾分鐘內就能定位問題。

先確認 CSS 檔案有沒有成功載入

外部 CSS 最常見錯誤是 href 路徑寫錯、檔名大小寫不同，或少了 rel="stylesheet"。

<!-- 錯誤：檔名不一致 -->
<link rel="stylesheet" href="/style.css">
<!— 正確：確認檔案真的叫 styles.css —>
<link rel=“stylesheet” href=“/styles.css”>

如果你用 VS Code 練習，可以先確認 HTML 檔案和 CSS 檔案的位置，再決定要寫相對路徑或根目錄路徑。

再確認選擇器有沒有選到元素

CSS 有載入，不代表選擇器一定正確。class 拼錯、id 拼錯、HTML 結構改過，都會讓樣式套不上去。

• HTML 寫 class="button"，CSS 卻寫 .btn。
• HTML 寫 id="main"，CSS 卻寫 #content。
• CSS 寫 .card a，但連結其實不在 .card 裡。
• 選擇器前面少了 . 或 #。

最後檢查權重、繼承與覆蓋順序

CSS 會受到 specificity、cascade 和 inheritance 影響。白話看，可以先記三個規則。

概念	意思	排查方向
權重	某些選擇器比較強，例如 id 通常比 class 強	看是否被更高權重規則蓋過
覆蓋順序	同權重時，後面出現的規則通常會生效	看 CSS 檔案中哪一段寫在後面
繼承	某些文字相關屬性會從父元素傳到子元素	看樣式是否來自外層元素

不要一開始就用 !important

!important 可以暫時提高宣告優先度，但它會讓後續維護更混亂。比較好的做法是找出真正覆蓋你的規則，調整選擇器、順序或樣式結構。!important 可以拿來臨時排查，不適合當成正式解法。

用 Chrome DevTools 即時檢查 CSS

Chrome DevTools 可以檢查某個元素套用了哪些 CSS、樣式來自哪個檔案，以及最後真正生效的屬性值。

這是初學 CSS 很快進步的工具。只靠猜很容易浪費時間，DevTools 可以直接告訴你瀏覽器目前看到了什麼。

右鍵檢查元素，看 Styles 面板

1. 在 Chrome 開啟網頁。
2. 對想檢查的文字、按鈕或區塊按右鍵。
3. 選擇「檢查」。
4. 在 Elements 面板確認選到的 HTML 元素。
5. 在 Styles 面板看它套用了哪些 CSS。

Styles 面板通常會顯示樣式來源的檔案與行數。看到被刪除線劃掉的屬性，代表它被其他規則覆蓋了。

暫時修改 CSS 看效果

DevTools 裡的 Styles 面板可以直接改數值，例如把 font-size 從 16px 改成 20px，畫面會立刻更新。

這個改動只存在瀏覽器裡，重新整理後不會保存。實務上我常先在 DevTools 試出適合的數值，再回到 CSS 檔案裡正式修改。

用 Computed 確認最後生效的值

Computed 面板會顯示元素最後計算出的樣式值。當你不確定目前到底是哪個 margin、color 或 font-size 生效時，可以直接看 Computed。

它很適合搭配排錯流程使用：先確認檔案有載入，再看 Styles 找來源，最後用 Computed 確認最終值。

CSS 學習路線圖：先學哪些，哪些可以晚點學

CSS 入門應先學基本語法、選擇器、顏色與文字，再學 Box Model、Flexbox 和 RWD。Grid、變數、動畫與框架可以放到後面。

階段	優先學習	練習目標
第一階段	CSS 基本語法、選擇器、顏色、文字	能修改文章和按鈕樣式
第二階段	Box Model、Flexbox、RWD	能做出一頁簡單切版
第三階段	Grid、CSS variables、animation、Tailwind CSS	能處理更完整的版面與維護需求

第一階段：語法、選擇器、顏色、文字

第一階段目標是看懂 CSS 規則，知道 selector、property、value 的位置，並能改顏色、背景、字級和行高。每天練一點，通常一週內就能完成基本操作。

第二階段：Box Model、Flexbox、RWD

第二階段開始進入切版。先理解 margin、padding、border、width，再用 Flexbox 做水平排列，最後用 media query 處理手機和桌機的版面差異。這時可以做一頁個人介紹或作品集首頁。

第三階段：Grid、變數、動畫、框架

第三階段再碰 Grid、CSS variables、動畫和 Tailwind CSS。這些工具能提升效率，但前提是你已經看得懂 CSS 基礎。若想建立更一致的元件規則，可以延伸看 設計系統。

學完這篇後，可以怎麼繼續練習

學完 CSS 基礎後，練習要從小而完整的頁面開始。先做個人介紹卡片、導覽列和文章版面，比零散改屬性更能建立實戰手感。

練習時請把 HTML 和 CSS 拆開，使用外部 CSS 檔案，並用 Chrome DevTools 檢查樣式。這會更接近正式網站製作流程。

練習一：做一張個人介紹卡片

建立一張包含姓名、簡介、連結和按鈕的卡片。練習重點放在 color、font-family、padding、border 和 border-radius。

.profile-card {
  max-width: 360px;
  padding: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background-color: #ffffff;
}

練習二：做一個導覽列

建立一個包含網站名稱和三個連結的導覽列。練習重點放在 display: flex、gap、justify-content 和 align-items。

.site-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 16px 0;
}

如果導覽列在不同裝置上造成跳動，也可以延伸閱讀 Core Web Vitals 和 Cumulative Layout Shift 修正。

站內延伸閱讀

• 設計系統：整理顏色、字型、按鈕和元件規則。
• CTA 按鈕設計：學會按鈕在網頁中的視覺層級。
• Core Web Vitals：理解網站體驗與速度指標。
• Cumulative Layout Shift 修正：避免版面載入時突然跳動。

CSS 是什麼？

CSS 是控制 HTML 外觀與版面的樣式表語言，可設定文字顏色、背景、字型、間距、邊框與元素排列方式。

CSS 跟 HTML 差在哪？

HTML 負責內容結構，例如標題、段落和連結；CSS 負責視覺呈現，例如顏色、字型、寬度和版面。

CSS 跟 JavaScript 差在哪？

CSS 負責外觀與版面，JavaScript 負責互動與邏輯。例如按鈕顏色通常用 CSS 控制，點擊後開啟選單通常用 JavaScript 處理。

CSS 檔案怎麼連到 HTML？

把 <link rel="stylesheet" href="styles.css"> 放在 HTML 的 <head> 裡，並確認 href 路徑和檔名正確。

為什麼我的 CSS 沒有效果？

先檢查 CSS 檔案是否成功載入，再檢查 selector 是否選到元素，最後看權重、覆蓋順序、繼承和瀏覽器快取。

class 和 id 差在哪？

class 可以重複使用，適合卡片、按鈕、提示訊息等樣式；id 應對應唯一元素，權重較高，不建議用來管理大量版面樣式。

CSS 要學多久才會切版？

基礎語法和常見屬性通常可在 1 到 2 週內上手，但要穩定切版，需要持續做小作品，熟悉 Box Model、Flexbox 和 RWD。

先學 Flexbox 還是 Grid？

建議先學 Flexbox，再學 Grid。Flexbox 適合處理一排元素的排列，較容易用在導覽列、卡片列和按鈕群組；Grid 適合更完整的二維版面。

Tailwind CSS 可以取代 CSS 嗎？

Tailwind CSS 可以提升寫樣式的效率，但初學者仍應先理解 CSS 基本語法、選擇器、Box Model 和版面概念，否則使用框架時也很難排錯。

CSS 需要會英文嗎？

不必英文很好，但要熟悉常見屬性名稱，例如 color、font-size、margin、padding 和 display。這些詞看久就會變成操作習慣。

CSS 可以做動畫嗎？

CSS 可以做動畫，例如 hover 效果、淡入淡出和位移動畫。不過入門階段應先把顏色、文字、間距和版面學穩，再進入動畫。