歡迎來到 CSS 的世界！
在上一章中，你已經學會如何利用 HTML 建構網站的「骨架」。現在，是時候搖身一變，成為一名數位室內設計師了！階層式樣式表（Cascading Style Sheets，簡稱 CSS）就是我們用來讓網站看起來既美觀、又有條理且專業的語言。
你可以把 HTML 想像成房子的結構（牆壁和門），而 CSS 就是房子的裝飾（油漆、家具，以及窗戶擺放的位置）。在本章中，你將學習如何控制網頁佈局、靈活運用色彩，甚至為網頁加入動畫效果。
8.1 編寫 CSS：規則手冊
在開始美化網頁之前，我們需要先了解 CSS 的運作原理，以及如何將它與 HTML 連結起來。
8.1.1 CSS 的用途
為什麼我們要用 CSS，而不直接在 HTML 裡面設定樣式呢？
- 控制頁面佈局： CSS 讓你能夠精準地將網頁元素放置在想要的位置。
- 保持設計一致： 你只需要修改一個 CSS 檔案，就能一次更新 100 個網頁的字體！
8.1.2 將 CSS 連結到 HTML
將 CSS 加入專案的方法有三種。如果覺得眼花撩亂也不用擔心，外部樣式表 (External) 才是專業開發者最常用的方法！
- 內聯樣式 (Inline Styles)： 使用 style 屬性直接加在 HTML 標籤內。
範例： <p style="color: red;"> - 內部樣式表 (Internal Style Sheets)： 寫在 HTML <head> 裡面的 <style> 標籤中。
- 外部樣式表 (External Style Sheets)： 這是建立一個獨立的檔案（副檔名為 .css），然後連結到你的 HTML。
- 資料夾結構： 請將你的 CSS 檔案放在專屬資料夾中（通常命名為 css 或 styles）。
- 相對路徑： 你需要告知 HTML 該檔案相對於 HTML 檔案的位置。
範例： href="css/style.css"
8.1.3 如何編寫 CSS 規則
一條 CSS 規則包含三個部分：
1. 選擇器 (Selector)： 我們要設定哪個 HTML 元素？（例如：h1）
2. 屬性 (Property)： 我們要修改什麼？（例如：color）
3. 值 (Value)： 新的設定是什麼？（例如：blue）
語法： selector { property: value; }
8.1.4 理解選擇器（「目標定位」系統）
要設定某個東西的樣式，你必須先「選中」它。以下是最常用的方式：
- 標籤選擇器 (Type Selector)： 選中所有同名的元素（例如：p 會選中所有段落）。
- 類別選擇器 (Class Selector)： 選中具有特定 class 的元素。開頭必須加一個點 (.)。（例如：.main-text）。
- ID 選擇器 (ID Selector)： 選中唯一的一個元素。開頭必須加一個井字號 (#)。（例如：#header-unique）。
- 通用選擇器 (Universal Selector)： 即 * 符號。它會選中頁面上所有元素。
- 後代選擇器 (Descendant Selector)： 選中另一個元素內部的某個元素（例如：div p 會選中位於 div 裡面的段落）。
快速複習：記憶小撇步
Class = 像學校的班級（很多學生都可以屬於同一個班）。使用 .
ID = 像身分證（每個人都只有一張，具備唯一性）。使用 #
8.1.5 效率：階層 (Cascade) 與繼承 (Inheritance)
階層 (Cascade)： 如果兩條規則衝突，通常寫在後面（檔案越下方）的規則會勝出。
繼承 (Inheritance)： 某些樣式（例如字體顏色）會從「父層」傳遞給「子層」。如果你設定 <body> 的文字顏色為藍色，除非你特別指定，否則裡面所有的段落也會自動變成藍色！
重點總結： CSS 透過將「外觀」與「內容」分開，大幅提升了網頁設計的效率。在大型專案中，請務必使用外部樣式表！
8.2 設計網頁：打造美觀頁面
現在進入有趣的部分——加入顏色、字體和圖片！
8.2.1 設定顏色
電腦透過幾種方式來理解顏色：
- 顏色名稱： 簡單的字詞，如 red（紅）、blue（藍）或 hotpink（亮粉紅）。
- 十六進位 (Hex)： 以 # 開頭的 6 位數代碼。（例如：#FF5733）。
- RGB： 代表紅 (Red)、綠 (Green) 和藍 (Blue)。
公式： \( rgb(255, 87, 51) \)
8.2.2 操控顏色與效果
- 透明度 (Opacity)： 控制元素的通透程度（0.0 為完全透明，1.0 為完全不透明）。
- 漸層 (Gradients)： 兩種或多種顏色之間的平滑過渡。
- HSL： 代表色相 (Hue)、飽和度 (Saturation) 和亮度 (Lightness)。
8.2.3 長度與尺寸
設定寬度或字體大小時，你有兩種選擇：
1. 絕對長度： 不會改變的固定大小（例如：用於像素的 px，或用於公分的 cm）。
2. 相對長度： 根據螢幕大小而變動的尺寸（例如：% 或 em）。提示：使用這些單位可以讓你的網站在手機上也運作順暢！
8.2.4 設定特定元素的樣式
你可以用 CSS 修改幾乎任何東西：
- 字體： 修改 font-family（字型）、font-size（大小）和 font-weight（粗細）。
- 清單： 修改項目符號的樣式，或是將其完全移除。
- 表格與表單： 加入內距 (padding) 和美觀的邊框，讓資料更易讀。
重點總結： 盡可能使用 相對長度 (%)，這樣你的網站無論是在巨大的電腦螢幕，還是迷你的智慧型手機上，看起來都很棒。
8.3 CSS 盒模型與定位
這是 CSS 中最重要的概念！每一個 HTML 元素實際上都是一個矩形盒子。
8.3.1 盒模型的組成部分
想像牆上的一幅裝框相片：
- 內容 (Content)： 相片本身（文字或圖片）。
- 內距 (Padding)： 相片與框框之間的空白區域（盒子內部）。
- 邊框 (Border)： 木質的框框本身。
- 外距 (Margin)： 你的相框與牆上下一張相片之間的空白區域（盒子外部）。
8.3.2 定位內容
我們該如何移動這些盒子呢？
- 一般流 (Normal Flow)： 元素按照 HTML 撰寫的順序，一個接一個地出現。
- 相對定位 (Relative)： 相對於元素原本的位置進行小幅位移。
- 絕對定位 (Absolute)： 將元素放置在頁面上的特定座標。
- 固定定位 (Fixed)： 元素會「黏」在螢幕上，即使捲動頁面也不會移動（例如導覽列）。
- 浮動 (Floating)： 將元素推向左側或右側，讓文字繞著它排列。
8.3.3 為不同螢幕設計（響應式設計）
由於大家會使用手機、平板和電腦，我們需要響應式設計 (Responsive Design)：
- 液態佈局 (Liquid Layouts)： 使用百分比 (%) 而非固定的像素，讓元素能夠伸縮。
- 佈局格線 (Layout Grids)： 一套隱形的欄位系統，用來協助對齊內容。
- CSS 框架 (CSS Frameworks)： 預先寫好的 CSS（例如 Bootstrap），能幫助你更快建立佈局。
重點總結： 掌握 盒模型 (Margin, Border, Padding) 是解決 90% 佈局問題的關鍵！
8.4 CSS 動畫：讓網頁活起來
CSS 不只是靜態的，它也可以動起來！
8.4.1 轉場 (Transitions) 與變形 (Transforms)
- 轉場 (Transitions)： 允許屬性在幾秒鐘內平滑地改變（例如：當滑鼠懸停在按鈕上時，顏色緩慢地變化）。
- 變形 (Transforms)： 改變元素的形狀或位置（例如：旋轉、縮放，或在 3D 空間中移動）。
- 貝茲曲線 (Cubic-bezier)： 一種數學方法，用來定義動畫的速度（例如：起步慢，接著變快）。
你知道嗎？
你可以完全使用 CSS 製作複雜的動畫，而不需要用到半行 JavaScript！這對你電腦的電池續航力和效能都更有利。
重點總結： 動畫要適度使用。一點點點綴會讓網站質感提升，但過多則會讓人分心！
常見錯誤，務必避開
- 忘記分號： 每一行 CSS 屬性結尾必須加上 ;，否則底下的程式碼會崩潰。
- 搞混內距與外距： 記住：Padding (內距) 是在邊框裡面，Margin (外距) 是在邊框外面。
- 遺漏點號/井字號： 如果你要設定 class，必須加上 .（例如 .myClass）。如果你忘記了，CSS 會以為你在尋找一個名為 <myClass> 的 HTML 標籤。
如果起初覺得這些內容很棘手也不要擔心！學習 CSS 最好的方法就是在編輯器中嘗試修改數值，並觀察螢幕上的變化。祝你玩得開心，設計出超棒的網頁！