Progress: 0%
Chapter 1 第一章

Styling Web Pages
with CSS 使用 CSS
設計網頁樣式

An interactive study guide covering CSS basics, selectors, style properties, specificity, and stylesheets. 涵蓋 CSS 基礎、選擇器、樣式屬性、優先級及樣式表的互動式學習指南。

🎯
Understand CSS syntax: selectors & declaration blocks 理解 CSS 語法：選擇器與聲明區塊
🔧
Apply common style properties for fonts and layout 應用字體和版面相關的常用樣式屬性
⚖️
Understand specificity rules for multiple selectors 理解多個選擇器的優先級規則
📁
Distinguish internal vs external style sheets 區分內部與外部樣式表的差異
🌐 What is CSS? 🌐 什麼是 CSS？

CSS (Cascading Style Sheet) is a stylesheet language used to control the appearance and presentation of HTML elements. It allows you to apply styles (such as colours, fonts, spacing, and layout) to HTML elements, separating the presentation from the content. CSS（層疊樣式表）是一種樣式表語言，用於控制 HTML 元素的外觀和呈現方式。它讓你可以為 HTML 元素套用樣式（如顏色、字型、間距和版面），將呈現與內容分離。

💡
HTML defines structure and content. CSS defines visual appearance. They work as a team! HTML 定義結構和內容，CSS 定義視覺外觀，兩者相輔相成！
⚠️ Limitations of Inline Styles ⚠️ 內嵌樣式的限制

Inline styles place style code directly inside an HTML element's style attribute. While convenient, they have major drawbacks:

內嵌樣式是將樣式代碼直接放在 HTML 元素的 style 屬性中。雖然方便，但有主要缺點：

<!-- Inline Style Example -->
<p style="colour:blue; text-align:centre">
  Lily thinks it's wonderful to fly.
</p>
1. Lack of Reusability 1. 缺乏可重用性
Style only applies to one specific element — hard to reuse. 樣式只適用於某一特定元素，難以重複使用。
2. Reduced Maintainability 2. 維護困難
A simple change requires editing many elements one by one. 簡單的修改需要逐一編輯多個元素。
3. Entangled Code 3. 代碼混雜
Style code mixed with HTML makes structure hard to read. 樣式代碼與 HTML 混合，使結構難以閱讀。
🏗️ CSS Box Model 🏗️ CSS 盒子模型

Every HTML element is rendered as an invisible "box" on the web page. The box has four key regions that can be styled: 每個 HTML 元素都以不可見的「盒子」形式呈現在網頁上。盒子有四個可樣式化的關鍵區域：

margin (outside space) margin（外邊距）
border border（邊框）
padding (inside space) padding（內邊距）
content content（內容）
📝 CSS Syntax 📝 CSS 語法

A CSS rule consists of a selector and a declaration block.

CSS 規則由選擇器和聲明區塊組成。

h1 {
  /* ← selector targets all <h1> elements */
  background-colour: coral;
  text-decoration: underline;
  /* ↑ declarations: property: value; */
}
Selector 選擇器
Specifies which element(s) the styling should be applied to. 指定樣式應套用到哪些元素。
Declaration Block 聲明區塊
Contains property-value pairs enclosed in { }. Separate each with a semicolon. 包含在 { } 中的屬性-值對，每個用分號分隔。
🎯 Three Types of Selectors 🎯 三種選擇器類型
1. Element-Wise Selector (Type Selector) 1. 元素選擇器（類型選擇器）

Targets every element of that type in the HTML document. No special character prefix needed.

針對 HTML 文件中所有該類型的元素。無需特殊前綴字符。

p {
  colour: purple;
  text-decoration: underline;
}
/* Applies to ALL <p> elements */
📌
Valid examples: p, h1, ul, li, table, tr, img 有效範例：p、h1、ul、li、table、tr、img
2. ID Selector 2. ID 選擇器

Targets a specific single element with a unique id attribute. Uses a # prefix.

針對具有唯一 id 屬性的特定單一元素，使用 # 前綴。

/* CSS */
#name {
  background-colour: coral;
  colour: white;
}

/* HTML */
<h1 id="name">Lily's Bio</h1>

Lily's Bio

⚠️ The id attribute must be unique within the same HTML document. No two elements can share the same ID. ⚠️ 同一 HTML 文件中，id 屬性必須是唯一的。不能有兩個元素共用相同的 ID。
3. Class Selector 3. 類別選擇器

Targets any element with that class name. Uses a . (dot) prefix. Multiple classes can be added to one element.

針對所有具有該類別名稱的元素，使用 .（點）前綴。一個元素可以添加多個類別。

/* CSS */
.girl { colour: pink; }
.senior { text-decoration: underline; }

/* HTML — multiple classes separated by space */
<li class="girl senior">Sandy Huang</li>
/* ↑ gets BOTH pink colour AND underline */
Selector Type選擇器類型 Prefix前綴 Targets目標
p, h1, li… None無 All elements of that type所有該類型的元素
#myID # One specific unique element一個特定唯一元素
.myClass . Any element with that class所有具有該類別的元素
🔤 Font-Related Properties 🔤 字體相關屬性
Property屬性 What it controls控制內容 Example values範例值
colour Text colour文字顏色 red, #ff8c42, rgb(144,3,20)
font-family Font face字體類型 Arial, Georgia, "Courier New"
font-weight Boldness粗體程度 bold, normal, 400, 700
font-size Text size文字大小 12px, smaller, larger
text-decoration Decorative lines裝飾線條 underline, none, line-through
📐 Layout-Related Properties 📐 版面相關屬性
Property屬性 What it controls控制內容 Example values範例值
text-align Horizontal text alignment水平文字對齊 left, right, centre, justify
background-colour Background colour背景顏色 coral, #ffb804, rgb(80,135,6)
border Element border appearance元素邊框外觀 solid, dashed, solid red 2px
padding Space between content and border內容與邊框之間的空間 padding-top: 20px
margin Space between elements (or page edge)元素之間（或頁面邊緣）的空間 margin-left: 10px
height / width Element dimensions元素尺寸 height: 50px, width: 150px
🎨 Live Property Demo 🎨 即時屬性示範

Adjust the controls to see CSS properties in action: 調整控制項以查看 CSS 屬性的效果：

Hello World! This is a CSS demo paragraph.
⚖️ What is Specificity? ⚖️ 什麼是優先級？

Specificity determines which CSS declaration wins when two selectors both target the same element and try to set the same style property with different values. 優先級決定當兩個選擇器都針對同一元素，並試圖用不同值設置相同樣式屬性時，哪個 CSS 聲明勝出。

🏆 Specificity Hierarchy 🏆 優先級層次

Higher = wins when there's a conflict 越高 = 衝突時獲勝

🔥 Inline Styles (highest)內嵌樣式（最高）
# ID Selector (#name, #intro)ID 選擇器（#name, #intro）
. Class Selector (.girl, .senior)類別選擇器（.girl, .senior）
🌿 Element-Wise Selector (p, h1, tr) — lowest元素選擇器（p, h1, tr）— 最低
📋 Key Rules 📋 關鍵規則
Rule 1: Inline always beats CSS selectors 規則一：內嵌樣式總是優先於 CSS 選擇器
When a property is set in both inline style and CSS, the inline value wins. Only conflicting properties are overridden — others still apply. 當屬性同時在內嵌樣式和 CSS 中設定時，內嵌值勝出。只有衝突的屬性被覆蓋，其他屬性仍會套用。
Rule 2: ID > Class > Element 規則二：ID > 類別 > 元素
When two different selector types conflict, the one with higher specificity wins. Non-conflicting declarations still apply. 當兩種不同類型的選擇器衝突時，優先級較高的獲勝。不衝突的聲明仍會套用。
Rule 3: Same specificity → order in document matters 規則三：相同優先級 → 文件中的順序決定勝負
When two class selectors both target the same element with the same property, the one defined later in the CSS wins. The order of class names in HTML has NO effect. 當兩個類別選擇器都針對同一元素的相同屬性時，CSS 中後定義的獲勝。HTML 中類別名稱的順序沒有影響。
🔍 Specificity Example 🔍 優先級範例
/* Which colour wins? */
#intro { colour: red; }    ← ID (higher)
.highlight { colour: blue; } ← Class (lower)

<h1 id="intro" class="highlight">Hello</h1>
✅
Answer: Red — the ID selector #intro has higher specificity than the class selector .highlight. 答案：紅色 — ID 選擇器 #intro 的優先級高於類別選擇器 .highlight。
🃏 Key Terms Flashcards 🃏 關鍵術語記憶卡

Click the card to reveal the definition. Use the arrows to navigate. 點擊卡片查看定義，使用箭頭切換卡片。

Click to flip 點擊翻轉
CSS
Click to flip back 點擊翻回
1 / 12
✏️ Knowledge Check ✏️ 知識測驗
📋 CSS Quick Reference 📋 CSS 速查表
Selectors選擇器
p { }All <p> elements所有 <p> 元素
#myId { }Element with id="myId"id="myId" 的元素
.myClass { }Elements with class="myClass"class="myClass" 的元素
Text / Font文字 / 字體
colour: red;Text colour文字顏色
font-family: Arial;Font type字體類型
font-size: 16px;Text size文字大小
font-weight: bold;Bold text粗體文字
text-decoration: underline;Underline底線
text-align: centre;Horizontal align水平對齊
Box Model盒子模型
border: solid;Visible border可見邊框
padding-top: 20px;Inner spacing (top)內部間距（上）
margin-left: 10px;Outer spacing (left)外部間距（左）
width: 200px;Element width元素寬度
height: 100px;Element height元素高度
background-colour: blue;Background colour背景顏色
Colour Formats顏色格式
redName colour顏色名稱
#ff8833Hex RGB value十六進制 RGB 值
rgb(255,136,51)Three-part RGB三部分 RGB
Specificity Order優先級順序
style="…"① Highest: Inline① 最高：內嵌
#id② ID selector② ID 選擇器
.class③ Class selector③ 類別選擇器
element④ Lowest: Element④ 最低：元素
Stylesheets樣式表
<style> … </style>Internal stylesheet (in <head>)內部樣式表（在 <head> 中）
<link href="x.css">External stylesheet外部樣式表
href="style.css"Relative path相對路徑
href="https://…"Absolute path絕對路徑