還記得嗎？CSS 是網頁的「裝潢」！

CSS 就像在下指令 🎯

上一課我們學到，CSS 可以改變網頁的顏色、大小、邊框...等等。

但是，要怎麼告訴電腦「我想要把標題變成紅色」呢？

這就像你跟朋友說話一樣，需要有一定的說法，對方才聽得懂！

今天我們就來學習 CSS 的「說話方式」—— 也就是 CSS 語法！

2

CSS 語法長什麼樣子？

h1 { color : red ; }

選擇器（誰）

屬性（什麼部分）

值（變成什麼）

👆

選擇器（Selector）

「誰」要被打扮？

就是你要選擇哪個 HTML 標籤

h1、p、button

🎯

屬性（Property）

要改變「什麼部分」？

顏色？大小？背景？

color、font-size

✨

值（Value）

要變成「什麼樣子」？

紅色？20px？粗體？

red、20px、bold

3

用中文來理解 CSS 語法

中文 ↔ CSS 對照表

📖 中文說法

把標題的顏色改成紅色

➡️

💻 CSS 寫法

h1 { color: red; }

📖 中文說法

把段落的字體大小改成 20px

➡️

💻 CSS 寫法

p { font-size: 20px; }

📖 中文說法

把按鈕的背景顏色改成藍色

➡️

💻 CSS 寫法

button { background-color: blue; }

4

記住這些重要符號！

{ }

大括號

像一個「盒子」

把所有樣式包起來

h1 { ... }

:

冒號

像「等於」的意思

連接屬性和值

color: red

;

分號

像「句號」一樣

表示這行結束了

color: red;

⚠️ 小心！常見錯誤

❌ 忘記寫 分號 ; → 後面的樣式會失效！
❌ 忘記寫 大括號 { } → 電腦看不懂！
❌ 冒號 : 寫成 等號 = → 這不是 CSS 的寫法喔！

5

常用的 CSS 屬性（先記這幾個就好！）

🏷️ 屬性名稱	📖 意思	✍️ 範例
color	文字顏色	color: red;
background-color	背景顏色	background-color: yellow;
font-size	字體大小	font-size: 20px;
font-weight	字體粗細	font-weight: bold;
border	邊框	border: 2px solid black;
border-radius	圓角	border-radius: 10px;
padding	內距（內容到邊框的距離）	padding: 15px;
margin	外距（跟其他東西的距離）	margin: 10px;

6

來看完整的範例！

style.css

              /* 這是一個完整的 CSS 範例 */
              
              /* 設定標題的樣式 */
              h1
                {
              
                color:
                #E91E63;
                /* 粉紅色文字 */
              
                font-size:
                32px;
                /* 字體大小 32px */
              
                text-align:
                center;
                /* 文字置中 */
              }
              
              /* 設定段落的樣式 */
              p
                {
              
                background-color:
                #E3F2FD;
                /* 淺藍色背景 */
              
                padding:
                20px;
                /* 內距 20px */
              
                border-radius:
                10px;
                /* 圓角 10px */
              }
              
              /* 設定按鈕的樣式 */
              button
                {
              
                background-color:
                #FF6B6B;
                /* 橘紅色背景 */
              
                color:
                white;
                /* 白色文字 */
              
                padding:
                15px 40px;
                /* 內距 */
              
                border:
                none;
                /* 無邊框 */
              
                border-radius:
                50px;
                /* 圓角 50px（膠囊形狀）*/
              
                font-size:
                18px;
                /* 字體大小 */
              }
            

👇 上面的 CSS 套用後的效果：

我是漂亮的標題！

我是有背景色和圓角的段落文字～

來玩個小遊戲！

🎯 第一題：把「標題」的「文字顏色」改成「藍色」

? { color: ?; }

🎯 第二題：把「段落」的「字體大小」改成「24px」

? { ?: 24px; }

今天學到的重點

CSS 語法結構：選擇器 { 屬性: 值; }
選擇器 = 「誰」要被打扮（h1、p、button...）
屬性 = 要改變「什麼」（color、font-size...）
值 = 要變成「什麼樣子」（red、20px...）
記得三個重要符號：{ } 大括號、: 冒號、; 分號
可以用 /* 註解 */ 來寫說明文字