CSS 基礎入門教程 2026 | 零基礎小白學樣式

HTML 搭好了網頁骨架，但頁面看起來光禿禿的——沒顏色、沒字體、沒排版。CSS 就是來給網頁「化妝」的！這篇教程用大白話帶你從零掌握 CSS 的核心基礎。

---

一、CSS 是什麼？

1.1 通俗理解

想象一個人：

• HTML = 人的身體骨架（頭、手、腳）
• CSS = 人的衣服、髮型、化妝（好不好看全靠它）

一句話總結：CSS 就是給網頁「穿衣服、化妝」的語言。

1.2 CSS 長什麼樣？

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

逐行解讀：

• h1 = 選擇器：我要給誰化妝？（這裡是所有 <h1> 標籤）
• { } = 花括號：化妝的詳細內容寫在這裡面
• color: red; = 屬性: 值;：把文字顏色設成紅色
• font-size: 32px; = 把字體大小設成 32 像素
• 每條規則結尾必須有分號 ;

1.3 怎麼把 CSS 用到 HTML 上？

有三種方式（推薦程度從高到低）：

方式 1：外部文件（最推薦）

<!-- HTML 文件 -->
<link rel="stylesheet" href="style.css">

/* style.css 文件 */
h1 {
  color: red;
}

💡 實際開發都用這種：CSS 單獨寫在 .css 文件裡，HTML 用 <link> 引入。

方式 2：<style> 標籤

<style>
  h1 {
    color: red;
  }
</style>

方式 3：行內樣式（不推薦）

<h1 style="color: red;">標題</h1>

💡 新手記住：用方式 1（外部文件），CSS 和 HTML 分開寫，代碼最清晰。

---

二、選擇器（給誰化妝？）

選擇器是 CSS 的核心——它決定「這條樣式作用於誰」。

2.1 標籤選擇器

直接寫標籤名，作用於所有該標籤：

p {
  color: #333;        /* 所有段落文字變深灰色 */
  line-height: 1.6;   /* 行高 1.6 倍 */
}

a {
  color: blue;        /* 所有鏈接變藍色 */
  text-decoration: none;  /* 去掉下劃線 */
}

2.2 class 選擇器（最常用！）

用 . 加類名，作用於所有帶有該 class 的元素：

<p class="highlight">這段是高亮的</p>
<p>這段是普通的</p>
<div class="highlight">這個也是高亮的</div>

.highlight {
  background-color: yellow;
  font-weight: bold;
}

💡 class 的特點：

• 同一個 class 可以給多個元素用
• 一個元素可以有多個 class（用空格分隔）：class="box card active"
• class 名用駝峰命名或短橫線命名：userCard 或 user-card

2.3 id 選擇器

用 # 加 id 名，作用於唯一一個元素：

<div id="header">頁頭</div>

#header {
  background: #1a1a2e;
  color: white;
  height: 60px;
}

💡 id vs class：

• id 像身份證號：全國唯一，一個人只能有一個
• class 像職業：可以很多人都是「老師」，一個人可以同時是「老師」和「作家」
• 優先級：#id > .class > 標籤名
• 日常開發默認用 class，只在需要唯一標識時用 id

2.4 組合選擇器

/* 後代選擇器：div 裡面所有的 p */
div p {
  color: gray;
}

/* 直接子元素選擇器：div 的直接子級 p（不包含更深層） */
div > p {
  color: red;
}

/* 同時給多個選擇器相同的樣式（用逗號分隔） */
h1, h2, h3 {
  color: #333;
}

/* 既是 .box 又是 .active 的元素 */
.box.active {
  border-color: green;
}

/* 緊跟在 h1 後面的 p */
h1 + p {
  font-size: 18px;
}

2.5 偽類選擇器

偽類用 : 表示元素的某種狀態：

/* 鼠標懸停時 */
a:hover {
  color: red;
}

/* 輸入框獲得焦點時 */
input:focus {
  border-color: blue;
  outline: none;
}

/* 第一個子元素 */
li:first-child {
  font-weight: bold;
}

/* 最後一個子元素 */
li:last-child {
  border-bottom: none;
}

/* 第 n 個子元素 */
li:nth-child(2) {
  color: blue;
}

/* 偶數行（隔行變色） */
tr:nth-child(even) {
  background: #f5f5f5;
}

💡 最常用的偽類：

• :hover — 鼠標放上去時（按鈕變色、菜單展開）
• :focus — 輸入框被點擊時（高亮邊框）
• :nth-child(even) / :nth-child(odd) — 表格隔行變色

2.6 選擇器速查表

選擇器	例子	含義
標籤	p	所有 <p> 標籤
class	.box	所有 class="box" 的元素
id	#header	id="header" 的元素
後代	div p	<div> 裡面的所有 <p>
子元素	div > p	<div> 的直接子級 <p>
多選	h1, h2	同時選 <h1> 和 <h2>
偽類	a:hover	鼠標懸停時的 <a>

---

三、顏色和字體

3.1 顏色的寫法

CSS 裡有多種表示顏色的方式：

/* 1. 顏色名（簡單但選擇有限） */
color: red;
color: blue;
color: transparent;  /* 透明 */

/* 2. 十六進制（最常用！） */
color: #333333;   /* 深灰色 */
color: #ff0000;   /* 紅色 */
color: #f00;      /* 紅色簡寫（每位重複可縮寫） */
color: #4a90d9;   /* 藍色 */

/* 3. RGB */
color: rgb(255, 0, 0);        /* 紅色 */
color: rgb(74, 144, 217);     /* 藍色 */

/* 4. RGBA（帶透明度，A=Alpha 0~1） */
color: rgba(0, 0, 0, 0.5);    /* 半透明黑色 */
background: rgba(255, 255, 255, 0.8);  /* 半透明白色背景 */

/* 5. HSL（色相、飽和度、亮度） */
color: hsl(210, 65%, 55%);  /* 藍色 */
color: hsla(0, 100%, 50%, 0.3);  /* 半透明紅色 */

💡 新手記住：

• 日常用十六進制 #4a90d9 最多
• 需要透明度時用 rgba()
• #333 是深灰色，#666 中灰色，#999 淺灰色，#fff 白色，#000 黑色

3.2 字體屬性

p {
  /* 字體大小 */
  font-size: 16px;          /* 像素（最常用） */
  font-size: 1.2rem;        /* 相對於根元素字體大小 */
  font-size: 1em;           /* 相對於父元素字體大小 */

  /* 字體粗細 */
  font-weight: normal;      /* 正常（400） */
  font-weight: bold;        /* 加粗（700） */
  font-weight: 300;         /* 更細 */
  font-weight: 600;         /* 中等粗 */

  /* 字體族（字體類型） */
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;

  /* 字體樣式 */
  font-style: italic;       /* 斜體 */
  font-style: normal;       /* 正常 */

  /* 行高（行間距） */
  line-height: 1.6;         /* 1.6 倍字體大小（推薦） */
  line-height: 24px;        /* 固定 24px */

  /* 文字對齊 */
  text-align: left;         /* 左對齊（默認） */
  text-align: center;       /* 居中 */
  text-align: right;        /* 右對齊 */

  /* 文字修飾 */
  text-decoration: none;         /* 去掉下劃線 */
  text-decoration: underline;    /* 加下劃線 */
  text-decoration: line-through; /* 刪除線 */

  /* 字母間距 */
  letter-spacing: 2px;      /* 字母間距 2px */
  word-spacing: 4px;        /* 單詞間距 4px */
}

💡 中文字體推薦：

font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;

這樣寫 Mac 用蘋方、Windows 用微軟雅黑，兼容性最好。

3.3 文字溢出處理

/* 單行省略號（超出一行顯示...） */
.ellipsis {
  white-space: nowrap;       /* 不換行 */
  overflow: hidden;          /* 超出隱藏 */
  text-overflow: ellipsis;   /* 顯示省略號 */
}

/* 多行省略號（比如最多 2 行） */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;     /* 最多 2 行 */
  overflow: hidden;
}

💡 這兩個是超常用的！任何卡片標題、列表項描述都可能用到。

---

四、盒模型（CSS 最重要的概念！）

4.1 什麼是盒模型？

每個 HTML 元素都是一個「盒子」，由 4 層組成：

┌─────────────────────────────────┐
│           margin（外邊距）        │  ← 和其他盒子的距離
│  ┌───────────────────────────┐  │
│  │       border（邊框）        │  │  ← 盒子的邊框線
│  │  ┌─────────────────────┐  │  │
│  │  │   padding（內邊距）   │  │  │  ← 內容到邊框的距離
│  │  │  ┌───────────────┐  │  │  │
│  │  │  │   content      │  │  │  │  ← 實際內容（文字/圖片）
│  │  │  │   （內容區）     │  │  │  │
│  │  │  └───────────────┘  │  │  │
│  │  └─────────────────────┘  │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘

大白話：

• content = 盒子裡面裝的東西
• padding = 盒子裡的泡沫墊（東西到盒子壁的距離）
• border = 盒子的牆壁厚度
• margin = 這個盒子和其他盒子之間的距離

4.2 寬度和高度

.box {
  width: 300px;       /* 內容區寬度 */
  height: 200px;      /* 內容區高度 */

  /* 也可以用百分比（相對於父元素） */
  width: 50%;
  width: 100%;

  /* 最小/最大寬度（響應式常用） */
  max-width: 1200px;  /* 最大不超過 1200px */
  min-width: 320px;   /* 最小不低於 320px */
}

4.3 內邊距 padding

.box {
  /* 四個方向一樣 */
  padding: 20px;

  /* 上下 10px，左右 20px */
  padding: 10px 20px;

  /* 上 10px，右 20px，下 30px，左 40px（順時針！） */
  padding: 10px 20px 30px 40px;

  /* 單獨設置某個方向 */
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

💡 順時針記憶法：padding: 上 右 下 左;（從上面開始順時針轉一圈）

4.4 外邊距 margin

語法和 padding 完全一樣：

.box {
  margin: 20px;              /* 四周 20px */
  margin: 10px 20px;         /* 上下 10px，左右 20px */
  margin: 10px 20px 30px 40px;  /* 上 右 下 左 */

  /* 水平居中（經典！） */
  margin: 0 auto;            /* 上下 0，左右自動（居中） */

  /* 單獨設置 */
  margin-top: 20px;
  margin-bottom: 30px;
}

💡 塊級元素水平居中：margin: 0 auto; + 必須有 width。這是最經典的居中方式之一。

4.5 邊框 border

.box {
  /* 完整寫法：寬度 樣式 顏色 */
  border: 1px solid #ddd;       /* 1像素實線灰色邊框 */

  /* 單獨設置某一邊 */
  border-bottom: 2px solid red;  /* 只有底部邊框 */
  border-top: none;              /* 去掉頂部邊框 */

  /* 邊框樣式 */
  border: 1px solid #333;    /* 實線 */
  border: 1px dashed #333;   /* 虛線 */
  border: 1px dotted #333;   /* 點線 */
  border: 3px double #333;   /* 雙線 */
}

/* 圓角 */
.card {
  border-radius: 8px;         /* 四個角都是 8px 圓角 */
  border-radius: 50%;         /* 圓形（如果是正方形） */
  border-radius: 10px 5px;    /* 左上右下 10px，右上左下 5px */
}

4.6 box-sizing（必設！）

默認情況下，設置了 width 後再加 padding 和 border，盒子會變得更大：

/* 默認（content-box）：實際寬度 = width + padding + border */
.box {
  width: 300px;
  padding: 20px;       /* 左右各加 20px */
  border: 1px;         /* 左右各加 1px */
  /* 實際寬度變成了 342px！ */
}

這會讓佈局計算變得很痛苦。解決方案：

/* 改成 border-box：width 包含 padding 和 border */
.box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 1px;
  /* 實際寬度還是 300px！ */
}

/* 全局設置（每個項目都要加！） */
* {
  box-sizing: border-box;
}

💡 新手鐵律：每個項目的第一行 CSS 都應該寫 * { box-sizing: border-box; }。這能省掉無數佈局計算的麻煩。

4.7 margin 塌陷問題

/* 問題：兩個上下相鄰的元素，上面的 margin-bottom 和下面的 margin-top 會合並 */
.box-a {
  margin-bottom: 30px;
}
.box-b {
  margin-top: 20px;
}
/* 兩個盒子之間的間距是 30px，不是 50px！（取較大值） */

/* 解決方案：只寫一個方向的 margin */
.box-a {
  margin-bottom: 30px;
}
.box-b {
  margin-top: 0;  /* 不寫 margin-top */
}

💡 新手注意：上下 margin 會合並，左右不會。如果間距不對，先檢查是不是 margin 塌陷了。

---

五、背景

5.1 背景色

.box {
  background-color: #f5f5f5;     /* 淺灰色背景 */
  background-color: rgba(0,0,0,0.5);  /* 半透明黑色 */
}

5.2 背景圖

.banner {
  /* 背景圖 */
  background-image: url('banner.jpg');

  /* 不重複 */
  background-repeat: no-repeat;

  /* 覆蓋整個容器（最常用） */
  background-size: cover;

  /* 圖片居中 */
  background-position: center;

  /* 固定背景（滾動時不動） */
  background-attachment: fixed;
}

/* 簡寫（推薦） */
.banner {
  background: url('banner.jpg') no-repeat center / cover;
}

💡 background-size 常用值：

• cover：圖片等比放大，填滿容器（可能裁切）
• contain：圖片完整顯示，可能留白
• 100% 100%：拉伸填滿（可能變形）

5.3 漸變背景

/* 線性漸變 */
.gradient-box {
  background: linear-gradient(to right, #667eea, #764ba2);
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  background: linear-gradient(to bottom, #4facfe 0%, #00f2fe 100%);
}

/* 徑向漸變（從中心向外） */
.radial-box {
  background: radial-gradient(circle, #ff9a9e, #fad0c4);
}

---

六、顯示與隱藏

6.1 display

/* 隱藏元素（完全消失，不佔空間） */
.hidden {
  display: none;
}

/* 塊級元素（獨佔一行） */
.block {
  display: block;
}

/* 行內元素（不換行） */
.inline {
  display: inline;
}

/* 行內塊（不換行，但可以設寬高） */
.inline-block {
  display: inline-block;
}

display 值	是否獨佔一行	能否設寬高	代表標籤
block	是	可以	div, p, h1
inline	否	不可以	span, a, strong
inline-block	否	可以	img, input
none	消失	—	—

6.2 visibility vs display

/* display: none — 完全消失，不佔空間 */
.removed {
  display: none;
}

/* visibility: hidden — 隱藏，但佔空間（像隱身了） */
.invisible {
  visibility: hidden;
}

💡 區別：

• display: none = 人走了，座位也沒了
• visibility: hidden = 人隱身了，座位還在

6.3 opacity 透明度

.box {
  opacity: 1;     /* 完全不透明（默認） */
  opacity: 0.5;   /* 半透明 */
  opacity: 0;     /* 完全透明（還在，但看不見） */
}

💡 opacity: 0 和 visibility: hidden 類似，但 opacity 可以做動畫過渡。

---

七、溢出處理

當內容超出容器時怎麼辦？

.box {
  width: 300px;
  height: 200px;

  /* 可見（默認，超出部分照常顯示） */
  overflow: visible;

  /* 隱藏（超出部分被裁掉） */
  overflow: hidden;

  /* 滾動（始終顯示滾動條） */
  overflow: scroll;

  /* 自動（超出時才顯示滾動條，最常用） */
  overflow: auto;

  /* 分別設置 x 和 y 方向 */
  overflow-x: hidden;   /* 橫向不滾動 */
  overflow-y: auto;     /* 縱向自動滾動 */
}

💡 常見用法：

• overflow: hidden — 裁切超出內容、清除浮動
• overflow: auto — 內容區可滾動（聊天窗口、長列表）

---

八、光標與用戶交互

/* 鼠標光標樣式 */
.link { cursor: pointer; }       /* 手指（可點擊） */
.text { cursor: text; }          /* 文字光標 */
.disabled { cursor: not-allowed; } /* 禁止符號 */

/* 禁止用戶選中文字 */
.no-select {
  user-select: none;
}

 /* 禁止用戶調整文本域大小 */
textarea {
  resize: none;
}

---

九、CSS 優先級（為什麼我的樣式不生效？）

9.1 優先級規則

當多條 CSS 規則作用於同一元素時，誰的優先級高誰生效：

!important > 行內 style > #id > .class > 標籤名
   10000      1000      100    10       1

/* 優先級低 */
p { color: black; }              /* 1 分 */

/* 優先級中 */
.text { color: blue; }           /* 10 分 */

/* 優先級高 */
#main-text { color: green; }     /* 100 分 */

/* 優先級最高（別濫用！） */
#main-text { color: red !important; }  /* 10000 分 */

9.2 優先級計算

/* 後代選擇器優先級 = 各選擇器分值之和 */
div p { }               /* 1 + 1 = 2 分 */
.box .title { }         /* 10 + 10 = 20 分 */
#header .nav a { }      /* 100 + 10 + 1 = 111 分 */

9.3 同優先級時

/* 後寫的覆蓋先寫的 */
.text { color: red; }
.text { color: blue; }   /* ← 生效！藍色 */

💡 新手建議：

1. 優先用 class 選擇器，少用 id，絕不用 !important
2. 樣式不生效時，打開 F12 → Elements → Styles 看被劃掉的就是被覆蓋了
3. !important 是最後手段，不是首選

---

十、實戰練習

10.1 練習一：美化按鈕

<button class="btn">點擊我</button>
<button class="btn btn-primary">主要按鈕</button>
<button class="btn btn-danger">危險按鈕</button>

/* 按鈕基礎樣式 */
.btn {
  padding: 8px 24px;          /* 上下 8px，左右 24px */
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: white;
  color: #333;
  cursor: pointer;            /* 鼠標變手指 */
  transition: all 0.2s;       /* 過渡動畫 */
}

/* 鼠標懸停效果 */
.btn:hover {
  background: #f5f5f5;
}

/* 主要按鈕 */
.btn-primary {
  background: #4a90d9;
  color: white;
  border-color: #4a90d9;
}

.btn-primary:hover {
  background: #357abd;
}

/* 危險按鈕 */
.btn-danger {
  background: #e74c3c;
  color: white;
  border-color: #e74c3c;
}

.btn-danger:hover {
  background: #c0392b;
}

10.2 練習二：卡片組件

<div class="card">
  <img src="photo.jpg" alt="卡片圖片" class="card-img">
  <div class="card-body">
    <h3 class="card-title">卡片標題</h3>
    <p class="card-text">這是卡片的描述文字，可以放一段簡短的介紹。</p>
    <a href="#" class="card-link">瞭解更多 →</a>
  </div>
</div>

/* 全局重置 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 卡片容器 */
.card {
  width: 320px;
  background: white;
  border-radius: 12px;
  overflow: hidden;           /* 圖片圓角跟著卡片 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);  /* 陰影 */
  transition: box-shadow 0.3s;
}

.card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);  /* 懸停陰影變大 */
}

/* 卡片圖片 */
.card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;          /* 圖片等比裁切填滿 */
  display: block;
}

/* 卡片內容區 */
.card-body {
  padding: 20px;
}

/* 卡片標題 */
.card-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;

  /* 單行省略號 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 卡片描述 */
.card-text {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 12px;

  /* 兩行省略號 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 卡片鏈接 */
.card-link {
  color: #4a90d9;
  text-decoration: none;
  font-size: 14px;
}

.card-link:hover {
  color: #357abd;
}

10.3 練習三：簡單的導航欄

<nav class="navbar">
  <div class="logo">我的網站</div>
  <ul class="nav-menu">
    <li><a href="#">首頁</a></li>
    <li><a href="#">產品</a></li>
    <li><a href="#">關於</a></li>
    <li><a href="#">聯繫</a></li>
  </ul>
</nav>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.navbar {
  background: #1a1a2e;
  padding: 0 24px;
  height: 60px;
  display: flex;              /* 用 Flexbox 排列 */
  align-items: center;        /* 垂直居中 */
  justify-content: space-between;  /* 兩端對齊 */
}

.logo {
  color: white;
  font-size: 20px;
  font-weight: bold;
}

/* 去掉列表默認樣式 */
.nav-menu {
  list-style: none;           /* 去掉小圓點 */
  display: flex;              /* 水平排列 */
  gap: 24px;                  /* 菜單項間距 */
}

/* 菜單鏈接 */
.nav-menu a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}

.nav-menu a:hover {
  color: white;               /* 懸停變白色 */
}

---

十一、常見問題

11.1 為什麼我的樣式不生效？

按這個順序檢查：

1. CSS 文件引入了嗎？ — F12 → Elements → Styles 看有沒有你的 CSS
2. 選擇器寫對了嗎？ — class 名有沒有拼寫錯誤
3. 被覆蓋了嗎？ — Styles 裡看你的樣式有沒有被劃掉
4. 優先級夠嗎？ — 被覆蓋了就提高優先級（加 class、加父級選擇器）
5. 語法對嗎？ — 屬性名拼寫、冒號分號有沒有少

11.2 margin 和 padding 該用哪個？

• 要控制元素和元素之間的距離 → 用 margin
• 要控制內容到邊框之間的距離 → 用 padding

11.3 width 100% 為什麼超出了父容器？

因為默認 box-sizing: content-box，width 只算內容區，加上 padding 和 border 就超出了。加一行 box-sizing: border-box; 就好了。

---

十二、CSS 基礎速查表

12.1 常用屬性速查

屬性	作用	常用值
color	文字顏色	#333 / red
font-size	字體大小	16px / 1.2rem
font-weight	字體粗細	normal / bold
background	背景	#f5f5f5 / url(...)
width / height	寬高	300px / 100%
padding	內邊距	20px / 10px 20px
margin	外邊距	0 auto / 20px
border	邊框	1px solid #ddd
border-radius	圓角	8px / 50%
display	顯示方式	block / flex / none
overflow	溢出處理	hidden / auto
text-align	文字對齊	center / left
line-height	行高	1.6
box-shadow	陰影	0 2px 8px rgba(0,0,0,0.1)
transition	過渡動畫	all 0.3s
cursor	鼠標光標	pointer
opacity	透明度	0.5

12.2 選擇器優先級

!important  >  行內 style  >  #id  >  .class  >  標籤名
  10000        1000           100     10         1

---

十三、總結

回顧本教程的要點：

1. CSS 就是給網頁化妝：選擇器選目標，屬性設樣式
2. 選擇器：標籤、.class（最常用）、#id、後代 div p、偽類 :hover
3. 顏色：日常用十六進制 #4a90d9，透明用 rgba()
4. 字體：font-size、font-weight、font-family、line-height
5. 盒模型：content → padding → border → margin（由內到外）
6. box-sizing: border-box 每個項目必加
7. margin: 0 auto 實現塊級元素水平居中
8. overflow: hidden 裁切超出內容
9. 優先級：class 優先，不用 !important
10. 調試：F12 → Elements → Styles 看樣式是否被覆蓋

掌握了這些基礎，再加上 Flexbox 和 Grid，你就能應對日常 90% 的 CSS 需求了！

---

相關閱讀：

• CSS Flexbox 彈性佈局從零到精通
• CSS Grid 網格佈局從入門到實戰
• HTML5 基礎入門教程
• JavaScript 基礎入門教程
• Chrome DevTools 前端調試完全指南
• Tailwind CSS v4.0 實戰指南