正在準備工作環境...
CSS 入門
上一課學了 HTML 標籤，但網頁看起來很陽春。這一課來學 CSS——讓網頁變好看的魔法。
CSS 是什麼？
CSS 全名是 Cascading Style Sheets（層疊樣式表）。它負責控制網頁的外觀：
- 顏色、字型大小
- 背景、邊框
- 排版、間距
- 動畫、特效
如果 HTML 是房子的結構，CSS 就是裝潢。
三種加 CSS 的方式
| 方式 | 寫法 | 適合場景 |
|---|---|---|
| 行內樣式 | style="..." 寫在標籤上 | 快速測試 |
| 內部樣式 | <style> 寫在 <head> 裡 | 單頁使用 |
| 外部檔案 | <link> 引入 .css 檔 | 正式專案 |
這一課先用行內樣式和內部樣式，讓你馬上看到效果。
行內樣式：style 屬性
直接在標籤上用 style 屬性加樣式：
常用 CSS 屬性
color — 文字顏色
顏色可以用英文名（red）、色碼（#FF0000）、或 RGB 值。
font-size — 字型大小
background-color — 背景顏色
text-align — 文字對齊
font-weight 和 font-style — 粗體與斜體
內部樣式：用 <style> 標籤
當你想一次控制很多元素的樣式，用 <style> 搭配 CSS 選擇器會更方便：
.card是 class 選擇器，表示「所有 class 為 card 的元素都套用這個樣式」。
組合技：做一個有風格的公告頁
AI 協作：學了這個，跟 AI 怎麼配合？
AI 生成的 CSS 通常能用，但顏色、字體大小、間距這些視覺細節需要你調整。
你的人類優勢：
- 你有設計眼光：知道按鈕要多大、文字要多粗、間距要多寬
- 你能用瀏覽器 DevTools 即時調 CSS 看效果，再把值告訴 AI
可以這樣跟 AI 說：
這個按鈕太小了，幫我改成：寬度 200px、高度 48px、背景色 #4F46E5、文字白色、圓角 8px。
練習題
互動示範
DEMO 1可以修改程式碼試玩
DEMO 2可以修改程式碼試玩
DEMO 3可以修改程式碼試玩
DEMO 4可以修改程式碼試玩
DEMO 5可以修改程式碼試玩
DEMO 6可以修改程式碼試玩
DEMO 7可以修改程式碼試玩
DEMO 8可以修改程式碼試玩
挑戰任務
Task 1
建立一個「活動公告」：h1 標題置中、紅色文字，底下用 p 段落寫活動內容，段落要有黃色背景和 16px 的 padding
Task 2
用 <style> 標籤建立兩張卡片：每張卡片有白色背景、圓角邊框、padding，卡片裡面各有一個 h3 標題和一段 p 文字
Task 3
做一個通知訊息框：綠色背景（#2ecc71）、白色文字、圓角 8px、padding 16px，內容寫「訂單已成立，感謝購買！」
← BackNext Lesson →