CSS學習筆記3：顏色、字體與文本屬性基礎

下面我們馬上就要準備開始學習CSS的更加深入的內容，但是在那之前，我們有必要展開了解CSS中一些最基本的構件，比如説顏色、字體與文本。他們組成了CSS中核心的骨幹部分。另一部分是我們稍後會涉及到的佈局等問題。

顏色（Color）

關於顏色幾個最基本的屬性
  • color: 文本顏色（繼承）。
  • background-color: 背景色（不繼承）。
常見顏色寫法
/* 十六進制 */
color: #ff5722;    /* #RRGGBB */
color: #0f0;       /* 簡短形式：#RGB -> #00ff00 */

/* 十六進制帶 alpha（現代瀏覽器支持） */
color: #ff572280;  /* #RRGGBBAA，最後兩位為 alpha */

/* RGB / RGBA */
color: rgb(255, 87, 34);
color: rgba(255, 87, 34, 0.6); /* alpha */

/* HSL / HSLA（更直觀調整色相/飽和度/亮度） */
color: hsl(14, 100%, 58%);
color: hsla(14, 100%, 58%, 0.6);

/* 關鍵字（named colors）*/
color: crimson;

/* 當前顏色關鍵字（繼承父元素 color） */
border-color: currentColor;
CSS 變量

這個概念可能一些朋友會比較陌生，我也是，查了一下，整理在下面：

CSS 變量，也稱為 CSS 自定義屬性（Custom Properties），是一種強大的 CSS 功能，允許你在一個地方存儲一個值，然後在樣式表的其他多個地方重複使用它。

這不就是字面值變量嘛！

主要特點
  • 聲明方式： 變量名必須以雙連字符（--）開頭，例如：--main-color: #3498db;
  • 作用域： 它們是 受級聯約束 的，可以像常規 CSS 屬性一樣在特定的選擇器（如 :root、.element）中聲明，並從父級繼承其值。通常，為了在全局使用，它們會聲明在 :root 偽類中。
  • 使用方式： 通過 var() 函數來引用變量的值，例如：color: var(--main-color);
  • 語義化： 使用 --main-text-color 這樣的變量名比直接使用十六進制顏色值（如 #00ff00）更具 語義化，更容易理解。
:root{
  --bg: #ffffff;
  --text: #111827;
  --primary: #0b84ff;
  --muted: rgba(17,24,39,0.6);
}

body { background: var(--bg); color: var(--text); }
a { color: var(--primary); }
small { color: var(--muted); }

好處：可在運行時統一調整主題（暗色/亮色），減少重複。

透明度注意
  • opacity 會影響整個元素及其子元素。
  • rgba() / hsla() / #RRGGBBAA 僅影響顏色本身，更常用於只想降低顏色透明度時。
可訪問性與對比度
  • 可讀文本通常應滿足 WCAG 對比度建議：正文文本最少 4.5:1（大文本 3:1）。
  • 避免淺色文本放在花哨背景上。使用工具檢查對比度（瀏覽器擴展或在線工具）。

字體（Fonts）

基本屬性
  • font-family: 指定字體家族（可列多個做回退）。
  • font-size: 字體大小。
  • font-weight: 粗細（normal/bold 或數字 100–900）。
  • font-style: normal | italic | oblique。
  • line-height: 行高。
  • font-variant: 小型大寫字母等。
  • @font-face：引入 web 字體。
字體棧
body {
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

原則：自定義字體 -> 系統相近字體 -> 通用族（serif / sans-serif / monospace）。

font 簡寫與長寫

文檔更加推介利用font進行編寫和設置屬性，這樣更加集中

/* 簡寫：font: [style] [variant] [weight] [size]/[line-height] [family]; */
h1 { font: italic small-caps 700 2rem/1.2 "Inter", sans-serif; }

/* 更常用的分開寫法 */
p { font-size: 16px; line-height: 1.6; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
單位選擇（font-size）
  • px: 固定像素，直觀但不響應用户縮放。
  • rem: 相對於根元素（html）字體大小。推薦用於佈局與響應式，因為可調整。
  • em: 相對於當前元素字體大小，使用時需注意嵌套放大/縮小的副作用。
  • %: 類似 em。
  • vw/vh: 視窗相關單位，適合創意式響應式字體，但需小心極端視窗尺寸。
    推薦：用 rem 結合根字體（通常 html { font-size: 16px; }）來建立可預測的縮放。
@font-face（引入 Web 字體）
@font-face {
  font-family: "MyInter";
  src: url("/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900; /* 可用於 variable font */
  font-style: normal;
  font-display: swap; /* fallback 替換策略 */
}
  • font-display: swap 可儘快顯示系統字體，再替換為 web 字體，提升感知性能。
  • 優化：只加載需要的字體權重/字符集，合併/使用 woff2，使用 preload/preconnect。

文本排版（Text / Typography）屬性

行高（line-height）

p { line-height: 1.6; }
h1 { line-height: 1.2; }
  • 常用無單位數值（如 1.5）便於繼承與縮放。

字間/詞間（letter-spacing / word-spacing）

h1 { letter-spacing: 0.02em; } /* 調整字母間距 */
  • 大標題常微調 letter-spacing；正文一般不用過大值。

對齊（text-align）

  • left | right | center | justify。
  • 注意：完全兩端對齊（justify）會產生不自然的字間距，尤其是短行。

文本修飾（text-decoration）

a { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--primary); text-underline-offset: 3px; }
  • 新屬性可定製下劃線粗細與偏移（現代瀏覽器支持較好）。
  • text-decoration-skip-ink: auto; 可以避免下劃線穿過字母筆畫（更美觀）。

轉換（text-transform）

  • uppercase | lowercase | capitalize，注意：全部大寫會降低可讀性，慎用於長段落。

溢出處理（white-space / overflow-wrap / word-break / text-overflow）

/* 單行省略號 */
.single-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 強制換行 */
p { overflow-wrap: break-word; /* or word-break: break-word; */ }
  • overflow-wrap: break-word 能避免長 URL 或長字符串撐破容器。

文字陰影（text-shadow）

h1 { text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
  • 用於微妙的層次感，但切勿過度。

垂直對齊（vertical-align）

  • 主要用於 inline 元素或表格單元格的垂直對齊（如 icon 與文本在同一行時）。

方向與書寫方式（direction / writing-mode）

  • direction: ltr | rtl（左右書寫）；writing-mode 支持豎排文本（東亞排版）。
  • 國際化時必須注意 RTL 語言（阿拉伯語/希伯來語）佈局差異。