1
先聽一個小故事 📖
蓋房子的故事 🏠
想像一下，你要蓋一棟房子！
首先，工人會用磚塊和水泥把房子的骨架蓋好，有牆壁、有門、有窗戶。但是這時候的房子光禿禿的，就像「毛胚屋」一樣，住起來不太舒服對吧？
接下來，就要找裝潢師傅來幫忙啦！他會幫你：刷上漂亮的油漆、鋪上舒服的地板、掛上美美的窗簾...
網頁的世界也是一樣的！HTML 就像蓋房子，CSS 就像裝潢房子！
2
有 CSS 和沒有 CSS 差多少？
😢 沒有 CSS（毛胚屋）
歡迎來到我的網站
這是一段介紹文字，看起來很普通...
😍 有 CSS（精裝房）
🎉 歡迎來到我的網站
這是一段介紹文字，是不是變得超級漂亮！
3
CSS 可以做什麼？（把滑鼠移過去試試！）
🎨 改變顏色
可以讓文字、背景變成任何顏色！
📐 調整大小
可以把東西變大、變小！
🖼️ 加上邊框
實線、虛線、點點線都可以！
⭕ 變成圓角
方方正正或圓滾滾，你決定！
🌑 加上陰影
讓東西看起來浮起來！
✍️ 文字變化
粗體字
斜體字
底線字
粗體、斜體、底線都行！
親自體驗 CSS 的魔法！
我是一個普通的盒子
把滑鼠移到我身上，看看會發生什麼事？
👆 移動滑鼠試試看！這就是 CSS 的魔法！
今天學到的重點
- CSS 的全名是 Cascading Style Sheets（層疊樣式表）
- HTML 是網頁的「骨架」，CSS 是網頁的「裝潢」
- 沒有 CSS 的網頁就像毛胚屋，有了 CSS 才會變漂亮
- CSS 可以改變：顏色、大小、邊框、圓角、陰影、文字樣式...等等
- CSS 還可以做出動畫效果！（像剛剛滑鼠移過去的變化）