終於來到 CSS 系列的最後一篇，其實CSS要學的內容量真的很多！我只是學到一個段落就先暫時休息，探索其他有興趣的主題。
7. pseudo-class（偽類，如 :hover）
偽類像魔法咒語，對 HTML 元素施展法術：
- 按鈕：強調可點擊效果。
- 導覽列連結：滑鼠移上去時讓文字或背景顏色改變。
- 圖片或產品卡片：滑鼠移過去就顯示更多資訊或加陰影效果。
我們來看個例子:
<a href="https://www.google.com">點擊到Google</a> /* 當滑鼠移到這個超連結，變黃色 */
a:hover {
background-color: yellow;
font-size: 18px;
}
8. cursor (pointer)
游標樣式：通常用在按鈕或連結，滑鼠移上去會變手指頭、問號、箭頭等形狀。
截圖截不到鼠標，建議可以自己玩玩看。
9. absolute units 和 relative units (em, rem, vw, vh)
CSS 的單位分兩派：絕對單位跟相對單位。舉例來說：
絕對單位（absolute units）：
最常用的是 px（pixel）像素，例如：
font-size: 16px;
width: 300px;
- 特點：不論螢幕大小如何改變，設定的大小永遠固定不變。
- 適合用在：圖片、圖示、需要絕對固定尺寸的情況。所以你會發現在平板看網路漫畫沒有那麼清楚哈哈
相對單位（relative units）：
相對單位會依據某個參考基準而改變，最常用的有：
1. em（父層元素字體大小的倍數）
/* 假設父元素 font-size 為 16px */
font-size: 2em; /* 就是 16px x 2 = 32px */
- 特點：根據父層元素的字體大小來決定大小。
- 適合用在：文字或排版需要根據父層元素做相對調整的狀況。
<body style="font-size: 16px;">
<div style="font-size: 18px;">
<p style="font-size: 2em;">文字大小是多少？</p>
</div>
</body>
答案是18*2=36，因為他參考上一層的大小。
2. rem（根元素字體大小的倍數）
/* 假設根元素（html）font-size 為 16px */
font-size: 1.5rem; /* 就是 16px x 1.5 = 24px */
- 特點：永遠根據HTML 根元素的字體大小。
- 適合用在：統一全站文字大小時，因為不會因父層影響而混亂。
3. vw 和 vh（螢幕寬高比例）
vw（view width）：螢幕寬度的百分比。vh（view height）：螢幕高度的百分比。
width: 50vw; /* 佔整個螢幕寬度的 50% */
height: 30vh; /* 佔整個螢幕高度的 30% */
- 特點：隨著瀏覽器視窗大小變化而變動。
- 適合用在：全屏幕設計、響應式設計（Responsive Design）。
11. display: none vs visibility: hidden vs opacity: 0
情境：做互動介面時，需要「隱藏元素」
- display: none : ❌ 不佔空間❌ 無法互動❌ 看不到
用在：點擊「展開／收合」的選單、彈出視窗關掉後完全不見 範例： - 使用者點「顯示更多」→ 原本被 display: none 的區塊變成 display: block 顯示內容。
- 導覽列的三條線的漢堡選單(?)收起來時就 display: none。
- visibility: hidden ✅ 佔空間❌ 無法互動❌ 看不到
用在：要保留排版空間，但不讓人看到 範例： - 做表格時，讓某一欄不顯示，但整齊度要維持。
- 過渡動畫中，元素先隱形但位置固定。
- opacity: 0✅ 佔空間✅ 可互動❌ 看不到
用在：動畫漸漸出現、hover 效果、透明點擊區 範例： - 滑鼠移上圖片時，文字從透明變成不透明（opacity: 0 → 1）。
- 表單錯誤提示先隱藏透明（還能點），填錯才顯示。
<div style="display: none;">我已經完全消失，空間也讓出來了！</div>
<div style="visibility: hidden;">我在這，但你看不到我，也不能點我。</div>
<div style="opacity: 0;">我是透明人，看不到但還能點我喔！</div>
12. Flexbox
情境：讓網頁區塊自動排列、對齊對得好看
- 做橫向選單：用
justify-content: space-between把選單項目平均排開。 - 做卡片區塊：多張卡片等寬排列，隨畫面寬度自動換行。
- 做登入表單置中：父容器加上
display: flex; justify-content: center; align-items: center;，整個內容就乖乖跑去中間。
CSS Flexbox Layout Guide 的格式不同
13. RWD + Media Query
情境：一個網站跑在手機/平板/電腦都好看好用
- 手機版選單變成「漢堡選單」，電腦版則是橫排。
- 手機畫面字體要變大、按鈕要變寬，避免手指點不到。
- 圖片大小要根據裝置調整，避免破版。
📱 現代網站幾乎都一定要做 RWD，不然在手機上看起來會「很痛苦」。
14. Bootstrap vs Tailwind
情境：快速開發網站、UI 設計、開發內部系統或商業頁面
- Bootstrap 適合：
- 專案時程趕，要快速做出看得過去的 UI。
- 團隊開發，有共通語言（.btn, .container 等）。
- 後台管理介面、公司內部系統。
- Tailwind 適合：
- 想要打造自己獨特的 UI。
- 注重設計一致性，喜歡 BEM 太麻煩。
- 搭配框架（Vue/React）時，component 裡直接用 class 很方便。
小總結
這些工具與技巧，就是讓「你設計的畫面」可以：
- 漂漂亮亮地排好位置（Flexbox）
- 該出現就出現，該消失就消失（display, visibility）
- 在不同螢幕上都看起來順眼又好用（RWD）
- 用現成工具快速開發 UI（Bootstrap, Tailwind）
以上就是 CSS 的三篇系列文的結束，如果我有實際作出網頁再跟大家分享（不知道要何年何月了哈哈）
