CSS 易容術入門核心概念指南 定義選擇器權重、盒子模型與響應式開發的單位規範

什麼是 CSS？

CSS (Cascading Style Sheets, 層疊樣式表) 是一種用於定義 HTML 文件呈現樣式的樣式表語言。它不像 HTML 那樣負責網頁結構，而是專注於網頁的「視覺表現」，包含顏色、字體、佈局、動畫以及在不同裝置上的適應性。CSS 的核心運作依賴於「層疊」機制與「權重 (Specificity)」，讓開發者能精確選取網頁元素並賦予其外觀屬性。它是建構美觀、具備良好使用者體驗（UX）且支援響應式設計（RWD）的現代網頁開發不可或缺的三大核心技術之一。

CSS 層疊樣式表：網頁的易容術

CSS (Cascading Style Sheets) 層疊樣式表，不像 HTML 一樣是標記語言，也不是標準的程式語言，但在 SCSS、CSS in JS、CSS Module 的出現後也可以用程式語言和架構的角度來看待。

CSS 就像是女孩子的各種化妝品，將臉上的各個部位進行妝點，網站透過 CSS 易容術 後通常會是煥然一新的樣貌。

CSS 主要會透過 DOM 的選擇器來指定 HTML Element 的外觀樣式，就像是眼影可以指定畫在眼睛口紅會指定畫在嘴唇一樣，CSS 會是影響網站是否美觀的一個重要技術。

不同的選擇器也會有不同權重，若有衝突的設定，高分則會蓋過低分的選擇器。

選擇器常見有以下幾種選擇方式：

• ID 選擇器：#elememtID 前面會是 # 且只會指定一個網頁元素，權重最高。
• Class 選擇器：.elementClass 前面會是 . 可以指定多個元素，權重次高。
• 類型選擇器：指定某種類型的元素，權重普通。
• 狀態選擇器：需要跟前三種配合使用，僅舉例其中兩種：
  • :hover -> 滑鼠移過。
  • :active -> 被選擇到了。
• 較進階：選擇同階層相鄰、選擇下層、偽元素。

選擇器也和上妝一樣，後面上的腮紅會蓋掉前面的粉底。其中 CSS 權重 高的會蓋掉權重低的，權重的部分可以參考 CSS 計算機。

偽元素：CSS 的魔法擴充功能

在 codepen 上看到了一個關於使用偽元素實作 tooltip 簡單又聰明的做法，有用到偽元素跟中括號的選擇器，直接把原作者的原始碼放在底下，真的要我憑空寫還真的寫不出來，覺得好厲害 XD

比較特別的當然就是在按鈕的自定義了一個屬性 data-tooltip，接著在樣式檔中透過一個中括號的選擇器來找到這個特殊屬性，取值的部分是透過 attr(data-tooltip) 來取。

偽元素則是 :before 及 :after 透過在 element 的前後透過樣式檔插入元素。

1

<button data-tooltip="內容">按鈕</button>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

/* 實作範例程式碼 */
[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

[data-tooltip]:before {
  position: absolute;
  top: 0px;
  left: 160px;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 180px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

[data-tooltip]:after {
  position: absolute;
  top: 5px;
  left: 75px;
  margin-left: -5px;
  width: 0;
  border-right: 10px solid #000;
  border-right: 10px solid hsla(0, 0%, 20%, 0.9);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  opacity: 1;
}

字型考量

因為 Safari 跟 Chrome 的關係，所以會需要有不一樣的字形。作業系統也會影響，Windows 與 Mac 的字型其實也有差異：

1

font-family: PingFang TC, 黑體-繁, Heiti TC, 蘋果儷中黑, Apple LiGothic Medium, 微軟正黑體, Microsoft JhengHei, sans-serif;

CSS 盒子模型：網頁排版的核心基礎

CSS 盒子模型 (Box Model) 是描述網頁元素外觀的重要概念，網頁可以看成是小盒子的排列疊加組合。

Box Model 主要由四個部分組成：

• 外邊距 (Margin)
• 邊框 (Border)
• 內邊距 (Padding)
• 內容 (Content)

寬度計算 (box-sizing)

• content-box: 這是預設，只包含內容本身的寬跟高。
• border-box: width 和 height 屬性包括內容、內邊距與邊框。

圖片來源: https://drafts.csswg.org/css2/#box-model

長度單位：絕對與相對單位的靈活運用

冷知識分享：瀏覽器預設 root 的值等於 16px。這就是為什麼普遍網頁設計會用 8px 或其倍數當單位的原。

CSS 變數：提升樣式彈性與維護性

變數區分大小寫，使用 -- 開頭，透過 var() 取用。定義全域變數通常寫在 :root 裡。

1
2
3
4
5
6

:root {
  --primary: #000;
}
h1 {
  color: var(--primary);
}

CSS 環境偵測：響應式與適應性設計的基石

• Media Query: 常見於實作 RWD。
• prefers-color-scheme: 用來偵測暗黑或明亮模式。
• iPhone X Safe Area: 處理全螢幕裝置的瀏海與底部橫條留白。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

@media (prefers-color-scheme: dark) {
  .day.dark-scheme {
    background: #333;
    color: white;
  }
  .night.dark-scheme {
    background: black;
    color: #ddd;
  }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme {
    background: white;
    color: #555;
  }
  .night.light-scheme {
    background: #eee;
    color: black;
  }
}

1
2

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

CSS 常見架構與優化之道

CSS 優化的四大目標：

1. 可預測性 (Predictable)
2. 可重複使用性 (Reusable)
3. 易維護性 (Maintainable)
4. 可擴充性 (Scalable)

接下來的幾篇文章會從 CSS 設計模式、前/後處理器、CSS 框架 以及 CSS in JS 等面向深入探討如何優化架構。

FAQ：CSS 入門常見問題

Q1：什麼時候該用 ID 選擇器，什麼時候該用 Class？

A：原則上，ID 選擇器（#）應該只用於頁面中唯一的元素（如 #root 或 #nav-main）；Class 選擇器（.）則用於可重複出現的樣式。在現代開發中，為了維持權重的平衡與元件的重用性，建議 90% 以上的樣式都應使用 Class 選擇器。

Q2：box-sizing: border-box 為什麼被強烈推薦？

A：預設的 content-box 在你設定寬度後，若加上 Padding 或 Border，盒子會被撐大，這會讓精確排版變得困難。使用 border-box 後，設定的寬度就會包含內容與內邊框，這更符合人類的直覺，能有效避免破版。

Q3：rem 與 em 的差異在哪？該如何選？

A：rem 是相對於「根元素 (HTML)」的字體大小，適合用於全站一致的間距與佈局；em 是相對於「父元素」的字體大小，適合用於特定元件內的比例調整（如：按鈕內的圖示隨文字大小連動）。初學者建議優先學習 rem。

• ← 上一篇
• 下一篇 →