CSS 美化魔法 — 第 2 單元完整閉環
2-1 選擇器與顏色 → 2-3 盒子模型 → 2-5 指揮官(AI 實作)→ 2-6 偵探(抓蟲)→ 2-7 實戰練習(Canvas 彩虹名片)。
👆 本堂重點,一眼看完
🗺️ 本堂流程(共約 2 小時)
2-2 文字樣式、2-4 CSS 裝修移到回家自學(網站有整頁漫畫)。
🎲 本堂小活動一覽
- 口訣遊戲:「誰{改什麼:變成怎樣;}」全班唸三次
- 幫小屋上色:換色實驗 — h1 改 p,誰變色?先猜再改
- 我的森林名片:圓角 20→50 先猜再改、padding 歸零體驗「好擠」
- 🏅 指揮官:命令奇奇美化名片(淺綠背景、圓角、置中)
- 🔍 偵探抓蟲:colr 拼錯 — CSS 不報錯只裝沒聽到
- 🤖 Canvas:彩虹漸層名片(檢查文字看不看得清楚)→ 發佈到作品集
🎯 這一堂特別注意
共通守則(學習循環、指揮官/偵探帶法、星星制度、個資紅線、開課前機器準備)集中在 🏠 首頁 — 開課前讀一次就好,這裡只列這一堂特別要注意的。
- CSS 三大常見錯:少分號、冒號打成等號、大括號沒關 — 畫面沒變先查這三個。
- 顏色會玩瘋:孩子容易一直換色不做事,講好「先換兩個地方,做完關卡再自由配色」。
開場:快問快答複習上一堂
搶答規矩同前。搶答發星星:最大的標題標籤是誰?結束標籤多了什麼?圓點清單和編號清單各是誰?
轉場口白
「上堂課我們把小屋蓋好了 — 但牆壁灰灰的!今天請出森林裡的化妝師:CSS。HTML 負責蓋房子,CSS 負責把房子變漂亮。」
2-1 CSS 化妝師:選擇器與顏色
故事第一關課文口白
「CSS 的句子只有一種寫法:先說要幫誰化妝(選擇器),再說要改什麼,最後說變成怎樣。中間是冒號、結尾要有分號 — 少一個,化妝師就聽不懂。」
h1 {
color: seagreen;
}
body {
background-color: lightyellow;
}第一關:幫小屋上色
- 把
seagreen換成喜歡的顏色(orange、hotpink、royalblue…) - 背景換成別的淺色
2-3 盒子模型:做一張名片卡
故事第二關課文口白
「每個東西在網頁上都是一個箱子:padding 是箱子裡的泡泡紙、border 是外框、border-radius 磨圓尖角、box-shadow 讓箱子浮起來 — 四招合體就是一張漂亮名片!」
.card {
background: #dcedc8;
border: 3px solid #8bc34a;
border-radius: 20px;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
padding: 20px;
}第二關:我的森林名片
- 文字改成自己的暱稱和一句介紹
border-radius: 20px改50px— 先猜會怎樣?padding改 0 — 字貼到邊邊,好擠!泡泡紙的意義立現
🏅 2-5 指揮官:命令奇奇美化名片
AI 實作(課程網站)任務:指揮奇奇做一張「森林居民名片」— 淺綠色背景、圓角、置中的名字和一句自我介紹。課文有示範成果圖。
指揮官三步驟
- 驗收卡:「背景要是淺綠色」「名片要有圓角」
- 下指令:「請做一張森林居民的名片:淺綠色背景、圓角、整張置中,上面有名字和一句介紹」
- 親手驗收:逐卡核對,全過蓋章!
🔍 2-6 偵探:不聽話的綠色文字
抓蟲(課程網站)案情
「奇奇說『歡迎詞我調成森林綠了!』結果文字倔強地維持黑色 — CSS 竟然默默不理牠。」
<style>
.welcome {
colr: green;
font-size: 24px;
}
</style>
<p class="welcome">歡迎來到啟思創客!</p>藏了 1 隻蟲:CSS 屬性拼錯不會報錯,只會裝沒聽到 — 檢查 color 這個單字。CSS 偵探最重要的一課:沒有紅字不代表沒有蟲!
🤖 2-7 實戰練習:彩虹漸層名片
★ Canvas 壓軸老師開場
「複習:不能跟 AI 說什麼?這單元的 CSS 魔法 — 顏色、圓角、陰影、hover。讓 AI 做一張名片,驗收它的美化功力,還要檢查文字看不看得清楚!」
流程:課程網站 2-7 實戰練習 → 「📋 一鍵複製」提示詞 → Gemini 選 Canvas → 驗收 → 迭代。
📋 官方提示詞(課文內建一鍵複製)
做一張「彩虹名片」:置中圓角卡片、彩虹漸層背景、暱稱(假名)+一句座右銘,滑鼠移上去輕輕放大並出現陰影。
✅ 驗收清單(課文同款)
- 卡片有圓角和彩虹漸層
- 滑鼠移上去有放大或陰影變化
- 文字在漸層背景上看得清楚(看不清楚就叫 AI 改顏色)
🛡️ 巡場重點:暱稱用假名;一律用課前登好的大人/學校帳號。