怎麼用這一頁？ 先看目錄，點你想學的屬性就能跳到那一節。每一節都有「用途 → 語法 → 小示範 → 練習」，快速建立印象。
工具建議：多使用開發者工具（F12）與「裝置模擬」檢視響應式效果。
目錄（點即可跳轉）
- 1. color
- 2. background-color
- 3. background-image
- 4. background-size
- 5. background-position
- 6. background-repeat
- 7. border
- 8. border-radius
- 9. box-shadow
- 10. margin
- 11. padding
- 12. width
- 13. height
- 14. max-width
- 15. display
- 16. position (+ top/right/bottom/left)
- 17. z-index
- 18. overflow
- 19. object-fit
- 20. text-align
- 21. font-size
- 22. font-weight
- 23. line-height
- 24. letter-spacing
- 25. text-decoration
- 26. white-space
- 27. cursor
- 28. opacity
- 29. transition
- 30. transform
1. color
設定文字顏色。支援色碼、RGB/HSL、色名。
p { color: #1f2937; }Demo
小練習：在瀏覽器按 F12，嘗試即時修改本節 CSS，觀察 Demo 變化。例如：把程式碼中的數值各改 2 倍，或改成其他顏色 / 單位。
2. background-color
設定元素背景色。常用來做色塊或強調。
.card { background-color: #f8fafc; }Demo
小練習：在瀏覽器按 F12，嘗試即時修改本節 CSS，觀察 Demo 變化。例如：把程式碼中的數值各改 2 倍，或改成其他顏色 / 單位。
3. background-image
設定背景圖（可多層）。
body { background-image: url(bg.png); }小練習：在瀏覽器按 F12，嘗試即時修改本節 CSS，觀察 Demo 變化。例如：把程式碼中的數值各改 2 倍，或改成其他顏色 / 單位。
4. background-size
控制背景圖縮放。cover 充滿、contain 全部可見。
header { background-size: cover; }小練習：在瀏覽器按 F12，嘗試即時修改本節 CSS，觀察 Demo 變化。例如：把程式碼中的數值各改 2 倍，或改成其他顏色 / 單位。
5. background-position
調整背景圖的位置（如 center, top right）。
header { background-position: center; }小練習：在瀏覽器按 F12，嘗試即時修改本節 CSS，觀察 Demo 變化。例如：把程式碼中的數值各改 2 倍，或改成其他顏色 / 單位。
6. background-repeat
是否重複平鋪背景圖。
header { background-repeat: no-repeat; }小練習：在瀏覽器按 F12，嘗試即時修改本節 CSS，觀察 Demo 變化。例如：把程式碼中的數值各改 2 倍，或改成其他顏色 / 單位。
7. border
外框線（粗細、線型、顏色）。
.box { border: 1px solid #e5e7eb; }Demo
小練習：在瀏覽器按 F12，嘗試即時修改本節 CSS，觀察 Demo 變化。例如：把程式碼中的數值各改 2 倍，或改成其他顏色 / 單位。
8. border-radius
圓角。可做膠囊、圓形頭像。
img.avatar { border-radius: 50%; }Demo
小練習：在瀏覽器按 F12，嘗試即時修改本節 CSS，觀察 Demo 變化。例如：把程式碼中的數值各改 2 倍，或改成其他顏色 / 單位。
9. box-shadow
外陰影。增加立體感。
.card { box-shadow: 0 10px 24px rgba(0,0,0,.06); }Demo
小練習：在瀏覽器按 F12，嘗試即時修改本節 CSS，觀察 Demo 變化。例如：把程式碼中的數值各改 2 倍，或改成其他顏色 / 單位。
10. margin
外距，與其他元素的距離。
h2 { margin: 16px 0; }Demo
小練習：在瀏覽器按 F12，嘗試即時修改本節 CSS，觀察 Demo 變化。例如：把程式碼中的數值各改 2 倍，或改成其他顏色 / 單位。
11. padding
內距，內容與邊框間距離。
.card { padding: 16px; }Demo
小練習：在瀏覽器按 F12，嘗試即時修改本節 CSS，觀察 Demo 變化。例如：把程式碼中的數值各改 2 倍，或改成其他顏色 / 單位。
12. width
寬度，常搭配百分比或 px。
.sidebar { width: 280px; }Demo
小練習：在瀏覽器按 F12，嘗試即時修改本節 CSS，觀察 Demo 變化。例如：把程式碼中的數值各改 2 倍，或改成其他顏色 / 單位。
13. height
高度。通常用在固定高元件或圖像。
.banner { height: 120px; }Demo
小練習：在瀏覽器按 F12，嘗試即時修改本節 CSS，觀察 Demo 變化。例如：把程式碼中的數值各改 2 倍，或改成其他顏色 / 單位。
14. max-width
最大寬度，適合做響應式版面。
main { max-width: 1100px; }Demo
小練習：在瀏覽器按 F12，嘗試即時修改本節 CSS，觀察 Demo 變化。例如：把程式碼中的數值各改 2 倍，或改成其他顏色 / 單位。
15. display
顯示模式：block/inline/inline-block/flex/grid。
.nav { display: flex; }Demo
小練習：在瀏覽器按 F12，嘗試即時修改本節 CSS，觀察 Demo 變化。例如：把程式碼中的數值各改 2 倍，或改成其他顏色 / 單位。
16. position (+ top/right/bottom/left)
定位方式：static/relative/absolute/fixed/sticky，搭配偏移屬性控制位置。
.badge { position: absolute; top: 6px; right: 6px; }小練習：在瀏覽器按 F12，嘗試即時修改本節 CSS，觀察 Demo 變化。例如：把程式碼中的數值各改 2 倍，或改成其他顏色 / 單位。
17. z-index
堆疊順序（數字愈大愈在上層）。需配合定位使用。
.modal { position: fixed; z-index: 1000; }Demo
小練習：在瀏覽器按 F12，嘗試即時修改本節 CSS，觀察 Demo 變化。例如：把程式碼中的數值各改 2 倍，或改成其他顏色 / 單位。
18. overflow
內容超出時的行為：visible/hidden/auto/scroll。
.scroll { overflow: auto; max-height: 200px; }小練習：在瀏覽器按 F12，嘗試即時修改本節 CSS，觀察 Demo 變化。例如：把程式碼中的數值各改 2 倍，或改成其他顏色 / 單位。
19. object-fit
控制 /
img.cover { width:100%; height:240px; object-fit: cover; }Demo
小練習：在瀏覽器按 F12，嘗試即時修改本節 CSS，觀察 Demo 變化。例如：把程式碼中的數值各改 2 倍，或改成其他顏色 / 單位。
20. text-align
文字水平對齊：left/center/right/justify。
h1 { text-align: center; }小練習：在瀏覽器按 F12，嘗試即時修改本節 CSS，觀察 Demo 變化。例如：把程式碼中的數值各改 2 倍，或改成其他顏色 / 單位。
21. font-size
字體大小（px、rem、em）。建議用 rem 做響應式。
p { font-size: 1rem; }Demo
小練習：在瀏覽器按 F12，嘗試即時修改本節 CSS，觀察 Demo 變化。例如：把程式碼中的數值各改 2 倍，或改成其他顏色 / 單位。
22. font-weight
字重：400 正常、700 粗體等。
strong { font-weight: 700; }Demo
小練習：在瀏覽器按 F12，嘗試即時修改本節 CSS，觀察 Demo 變化。例如：把程式碼中的數值各改 2 倍，或改成其他顏色 / 單位。
23. line-height
行高，改善可讀性。常用 1.5~1.8。
p { line-height: 1.75; }Demo
小練習：在瀏覽器按 F12，嘗試即時修改本節 CSS，觀察 Demo 變化。例如：把程式碼中的數值各改 2 倍，或改成其他顏色 / 單位。
24. letter-spacing
字距，標題或英文常用。
h1 { letter-spacing: .5px; }Demo
小練習：在瀏覽器按 F12，嘗試即時修改本節 CSS，觀察 Demo 變化。例如：把程式碼中的數值各改 2 倍，或改成其他顏色 / 單位。
25. text-decoration
底線、刪除線等。
a { text-decoration: none; }小練習：在瀏覽器按 F12，嘗試即時修改本節 CSS，觀察 Demo 變化。例如：把程式碼中的數值各改 2 倍，或改成其他顏色 / 單位。
26. white-space
空白處理：nowrap 不換行、pre 保留空白。
.nowrap { white-space: nowrap; }小練習：在瀏覽器按 F12，嘗試即時修改本節 CSS，觀察 Demo 變化。例如：把程式碼中的數值各改 2 倍，或改成其他顏色 / 單位。
27. cursor
滑鼠指標形狀：pointer 等。
button { cursor: pointer; }Demo
小練習：在瀏覽器按 F12，嘗試即時修改本節 CSS，觀察 Demo 變化。例如：把程式碼中的數值各改 2 倍，或改成其他顏色 / 單位。
28. opacity
透明度（0~1）。
.dim { opacity: .7; }Demo
小練習：在瀏覽器按 F12，嘗試即時修改本節 CSS，觀察 Demo 變化。例如：把程式碼中的數值各改 2 倍，或改成其他顏色 / 單位。
29. transition
過渡動畫（屬性、時間、曲線）。
.btn { transition: transform .2s ease; }小練習：在瀏覽器按 F12，嘗試即時修改本節 CSS，觀察 Demo 變化。例如：把程式碼中的數值各改 2 倍，或改成其他顏色 / 單位。
30. transform
2D/3D 變形：translate/scale/rotate。
.btn:hover { transform: translateY(-2px) scale(1.02); }Demo
小練習：在瀏覽器按 F12，嘗試即時修改本節 CSS，觀察 Demo 變化。例如：把程式碼中的數值各改 2 倍，或改成其他顏色 / 單位。
完成 1–30 節後，建議前往 Flex / Grid 版面入門（31–35） 進行版面練習。