CSS學習筆記：從偽類到響應式設計，打造漂亮且好用的網頁
終於來到 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 的三篇系列文的結束，如果我有實際作出網頁再跟大家分享（不知道要何年何月了哈哈）
- 7. pseudo-class（偽類，如 :hover）
- 8. cursor (pointer)
- 9. absolute units 和 relative units (em, rem, vw, vh)
- 絕對單位（absolute units）：
- 相對單位（relative units）：
- 1. em（父層元素字體大小的倍數）
- 2. rem（根元素字體大小的倍數）
- 3. vw 和 vh（螢幕寬高比例）
- 11. display: none vs visibility: hidden vs opacity: 0
- 12. Flexbox
- 13. RWD + Media Query
- 14. Bootstrap vs Tailwind
11會員
57內容數
雙重身份：越南放大鏡 X 下班資工系
政大東南亞語言學系是我接觸越南語的起點，畢業後找越南外派工作的生活跟資訊時，發現幾乎都是清單式的分享，很難身歷其境。所以我希望「越南放大鏡」可以帶讀者看到更多細節和深入的觀察。
-
下班資工系則是自學資工系的課程內容，記錄實際操作的過程，學習理論的過程。希望可以跟讀者一起成長。
留言
留言分享你的想法！
你可能也想看
Google News 追蹤
靈感用盡、鍵盤不再響，盯著喜歡、分享、留言的數字，心跳跟著小鈴鐺七上八下⋯⋯vocus 2025 年 4 月限定新商品，要為創作者打氣！
🚨「創作者打氣包」 最懂創作者的vocus，為創作者打造
✨ 打氣包，包什麼？！四件道具挺創作者
一、【打氣復活卷】
專屬你的打氣小語，成功登記免費
全新 vocus 挑戰活動「方格人氣王」來啦～四大挑戰任你選，留言 / 愛心 / 瀏覽數大 PK，還有新手專屬挑戰！無論你是 vocus 上活躍創作者或剛加入的新手，都有機會被更多人看見，獲得站上版位曝光＆豐富獎勵！🏆
在本章節中，我們介紹了 CSS 偽元素的基本概念和常見用法，通過一些示例，我們展示了如何使用這些偽元素來樣式化文檔中的特定部分。此外，我們還探討了一些高級用法，如創建自定義引號和實現複雜的圖形效果。這些內容應該能夠幫助你更好地理解和應用 CSS 偽元素。
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
CSS 的繼承性是開發網頁樣式時的一個重要概念，它使得樣式設計更加靈活和高效，有助於提高程式碼的可讀性、一致性和可重用性，並加快開發速度，從而提供更好的開發體驗。
這是一篇關於CSS Battle系列的文章，介紹瞭如何通過CSS來處理特定圖案的切版與前端工程技術。文章分享了使用grid和radial-gradient()方法來處理特定圖案的解法以及相關技術總結。
前言
今天課程要來學習，在 .css 設計樣式後，怎麼透過選擇器，讓 .html 可以有所配對，經過這一步後，便可以開始學習，如何正式設計 .css 了。
選擇器
介紹
還記得上次課程，我們在 .css 檔案中，撰寫的程式碼嗎？讓我們來複習看看：
.highlight {
co
前言
終於要到這個振奮人心的章節了，我們終於要來學習，如何讓自己的網頁更加美觀。
但在這之前，我們肯定得先學習，如何將我們的 CSS 檔案，連接到 HTML 當中。
連結分類
首先，我們在連結 CSS 的方法中，有分為三種：
內聯連結
在 .html 當中，任一標籤的裡面，用屬性 s
您對前端有興趣，對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程，瀏覽器私有前綴及處理，開發者對新特性漸進增強，優雅降級處理，Web標準定義、作用等。
靈感用盡、鍵盤不再響，盯著喜歡、分享、留言的數字，心跳跟著小鈴鐺七上八下⋯⋯vocus 2025 年 4 月限定新商品，要為創作者打氣！
🚨「創作者打氣包」 最懂創作者的vocus，為創作者打造
✨ 打氣包，包什麼？！四件道具挺創作者
一、【打氣復活卷】
專屬你的打氣小語，成功登記免費
全新 vocus 挑戰活動「方格人氣王」來啦～四大挑戰任你選，留言 / 愛心 / 瀏覽數大 PK，還有新手專屬挑戰！無論你是 vocus 上活躍創作者或剛加入的新手，都有機會被更多人看見，獲得站上版位曝光＆豐富獎勵！🏆
在本章節中，我們介紹了 CSS 偽元素的基本概念和常見用法，通過一些示例，我們展示了如何使用這些偽元素來樣式化文檔中的特定部分。此外，我們還探討了一些高級用法，如創建自定義引號和實現複雜的圖形效果。這些內容應該能夠幫助你更好地理解和應用 CSS 偽元素。
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
CSS 的繼承性是開發網頁樣式時的一個重要概念，它使得樣式設計更加靈活和高效，有助於提高程式碼的可讀性、一致性和可重用性，並加快開發速度，從而提供更好的開發體驗。
這是一篇關於CSS Battle系列的文章，介紹瞭如何通過CSS來處理特定圖案的切版與前端工程技術。文章分享了使用grid和radial-gradient()方法來處理特定圖案的解法以及相關技術總結。
前言
今天課程要來學習，在 .css 設計樣式後，怎麼透過選擇器，讓 .html 可以有所配對，經過這一步後，便可以開始學習，如何正式設計 .css 了。
選擇器
介紹
還記得上次課程，我們在 .css 檔案中，撰寫的程式碼嗎？讓我們來複習看看：
.highlight {
co
前言
終於要到這個振奮人心的章節了，我們終於要來學習，如何讓自己的網頁更加美觀。
但在這之前，我們肯定得先學習，如何將我們的 CSS 檔案，連接到 HTML 當中。
連結分類
首先，我們在連結 CSS 的方法中，有分為三種：
內聯連結
在 .html 當中，任一標籤的裡面，用屬性 s
您對前端有興趣，對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程，瀏覽器私有前綴及處理，開發者對新特性漸進增強，優雅降級處理，Web標準定義、作用等。