Day 18 - CSS 入門：顏色與文字樣式 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2025 iThome 鐵人賽

DAY 18

Modern Web

程式煉金術：Bug退散！前端驅魔記系列第 18 篇

Day 18 - CSS 入門：顏色與文字樣式

17th鐵人賽 30dayshtml

joanna2005823

團隊nutc imac

2025-10-02 13:50:25

23 瀏覽

分享至

學習目標

理解 CSS 的三種引入方式：行內樣式、內部樣式、外部樣式
學會使用選擇器鎖定元素
熟悉顏色的表示法（名稱、HEX、RGB、HSL）
認識文字相關屬性（font-family、font-size、font-weight、line-height、text-align）

重點觀念（讓文字開口說話）

三種引入方式
- 行內樣式（inline style）：直接寫在元素的 style 屬性裡。
- 內部樣式（internal CSS）：寫在 <style> 標籤中。
- 外部樣式（external CSS）：寫在 .css 檔案再用 <link> 引入（最佳實務）。
顏色表達
- 名稱：red、blue
- HEX：#ff0000
- RGB：rgb(255, 0, 0)
- HSL：hsl(0, 100%, 50%)
文字控制
- font-family：設定字體，建議多個備選。
- font-size：字體大小（px、em、rem）。
- font-weight：粗細（normal、bold、100–900）。
- line-height：行高，讓段落更好讀。
- text-align：文字對齊方式。

CSS 入門示範

<body>
  <h1>我的第一個 CSS 樣式</h1>
  <p>這是一段普通文字，已經套上了 CSS 樣式。</p>
  <p class="highlight">這是一段特別強調的文字。</p>
</body>

h1 {
  color: darkblue;
  font-family: "Microsoft JhengHei", sans-serif;
  text-align: center;
}

p {
  font-size: 18px;
  line-height: 1.6;
  color: #333;
}

.highlight {
  background-color: yellow;
  font-weight: bold;
}