🎨
CSS 入門教學
學習如何讓網頁變得漂亮又有型！
什麼是 CSS？
CSS 的全名是 Cascading Style Sheets（層疊樣式表）， 是用來美化網頁的語言。
💡 用房子來比喻
如果 HTML 是房子的結構（牆壁、地板、天花板），
那 CSS 就是房子的裝潢（油漆顏色、地毯、窗簾）！
沒有 CSS 的網頁就像沒有裝潢的毛胚屋，有了 CSS 才會變得漂亮！🏠✨
CSS 可以控制網頁的：
- 🎨 顏色：文字顏色、背景色
- 📏 大小：字體大小、元素寬高
- 📍 位置：元素的排列方式
- ✨ 特效：陰影、動畫、漸層
CSS 基本語法
CSS 的語法非常簡單，只要記住這個公式：
選擇器 { 屬性: 值; }
↑ 這就是 CSS 的基本結構！
舉個例子 🌰
假設我們想要「把標題變成藍色」：
h1 {
color: blue;
}
/* 翻譯成中文就是：
選擇 h1 標籤 {
把顏色改成藍色;
}
*/
語法說明 📝
- 選擇器（Selector）：告訴 CSS 要選哪個元素（如 h1、p、div）
- 大括號 { }：把樣式包起來
- 屬性（Property）：要改什麼（如 color、font-size）
- 值（Value）：要改成什麼（如 blue、20px）
- 冒號 :：分隔屬性和值
- 分號 ;：每條規則的結尾（很重要！）
CSS 三種連結方式
CSS 可以用三種方式加到 HTML 中：
1️⃣ 行內樣式
直接寫在 HTML 標籤裡面
<h1 style="color: blue;">標題</h1>
2️⃣ 內部樣式
寫在 <style> 標籤裡
<style>
h1 { color: blue; }
</style>
3️⃣ 外部樣式 推薦！
寫在獨立的 .css 檔案
<link rel="stylesheet" href="style.css">
💡 為什麼推薦外部樣式？
就像把衣服放在衣櫃裡一樣，外部樣式把 CSS 集中管理，
修改一個檔案就能改變整個網站的外觀，超方便！👕
常用 CSS 屬性
| 屬性 | 功能 | 範例 |
|---|---|---|
color |
文字顏色 | color: red; |
background-color |
背景顏色 | background-color: yellow; |
font-size |
文字大小 | font-size: 20px; |
border |
邊框 | border: 2px solid black; |
padding |
內距（內容到邊框） | padding: 10px; |
margin |
外距（元素之間） | margin: 20px; |
border-radius |
圓角 | border-radius: 10px; |
box-shadow |
陰影 | box-shadow: 0 5px 15px rgba(0,0,0,0.2); |
互動體驗
滑鼠移到下面的方塊上，看看 CSS 的效果！
🎨 顏色變化
hover 會改變顏色和背景
📏 大小變化
hover 會變大
🔲 邊框變化
hover 會出現邊框和圓角
✨ 陰影變化
hover 會浮起來並有陰影