昨天我們學到 CSS 就是「幫網頁打扮的設計師」。
今天開始，我們就要從最簡單、最有感的地方下手：顏色、字體、背景。
這三個元素，就像你決定今天要穿什麼衣服、搭什麼鞋子、背什麼包包一樣，馬上就能展現風格。

1. 顏色：讓你的網頁出現色彩

在 CSS 裡設定顏色有幾種方法：

(1) 英文單字

 p {
    color: red;
 }

(2) 十六進位色碼（Hex Code）

p {
  color: #3498db;  /* 藍色 */
}

👉 # 開頭，後面 6 個數字或字母，範圍 0-9、A-F。

(3) RGB / RGBA

p {
  color: rgb(255, 0, 0);      /* 純紅 */
  background: rgba(0, 0, 0, 0.5); /* 黑色半透明背景 */
}

👉 RGBA 的 a = 透明度，0 完全透明，1 完全不透明。

小提醒：
也可以寫好顏色後點進去挑顏色

2. 字體：網頁的易讀性

一個字體可以決定網頁的「個性」，還有讀者的注意力。

• Serif（有襯線）：正式感，例如 Times New Roman

• Sans-serif（無襯線）：現代感，例如 Arial

• Monospace（等寬字體）：程式感，例如 Courier New

(1) 設定字體

body {
  font-family: Arial, sans-serif;
}

👉 通常會設定「字體族群」，避免某些電腦沒有該字體。

(2) 字體大小

h1 {
  font-size: 32px;
}
p {
  font-size: 16px;
}

👉 單位：px（像素）、em（相對字體大小）、rem（相對根字體大小）。

(3) 字體粗細 & 斜體

p {
  font-weight: bold;  /* 粗體字，也可以寫數字 100–900，代表粗細度 */
  font-style: italic; /* 斜體字 */
}

3. 背景：營造氛圍的主角

背景是最能瞬間改變網頁「氣氛」的元素。

(1) 背景顏色

body {
  background-color: #f4f4f4;
}

(2) 背景圖片

body {
  background-image: url('ocean.jpg');
  background-size: cover;      /* 填滿畫面 */
  background-position: center; /* 置中 */
}

(3) 漸層背景

body {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}

👉 漸層背景超常見於按鈕、Banner。

🔥 實戰小挑戰：做一張「網頁海報」

HTML：

< div class="banner" >
  < h1 >Welcome to My World< /h1 >
  < p >設計讓生活更美好< /p >
< /div >

CSS：

body {
  margin: 0;
  font-family: 'Arial', sans-serif;
}

.banner {
  background: linear-gradient(to right, #36d1dc, #5b86e5);
  color: white;
  text-align: center;
  padding: 100px 20px;
}

.banner h1 {
  font-size: 48px;
  margin: 0;
}

.banner p {
  font-size: 20px;
  margin-top: 10px;
}

👉 這樣一個「簡單的首頁大圖」就完成了！

🎯 Day 2 小結

今天我們學到：

• CSS 顏色有多種寫法，還能調透明度
• 字體會影響網頁氣質，要善用 font-family、font-size、font-weight
• 背景可以是純色、圖片或漸層，營造網頁氛圍

明天 Day 3，我們會聊 排版與盒模型（margin, padding, border），這是很多人一開始學 CSS 最頭痛、卻也是最重要的觀念！
謝謝你今天的閱讀，我是Ting，明天一起繼續學習CSS吧~🙌