CSS 樣式表深度解析：從基礎語法到選擇器進階應用

樣式表 (CSS) 核心價值

CSS (Cascading Style Sheets) 將「內容結構」與「表現樣式」徹底分離。優勢：

• 精美排版佈局無需 HTML 表現屬性。
• 一次定義，全站複用，維護極簡 (修改一處生效所有頁面)。
• 減少下載體積 (樣式外部檔案快取)。
• 屬性普適性強：顏色、背景、邊框、定位等適用於所有 HTML 元素 (含傳統不支援的 table、tr、input 等)。
• 精確控制：文字大小無級可調、靜態/相對/絕對定位、文字縮進等。
• 平台獨立性保持，HTML 代碼保持語義清晰簡潔。

CSS 三種引入方式

1. 內部樣式表：<style type="text/css"> ... </style> 置於 <head>，含 HTML 註釋兼容舊瀏覽器。
2. 外部樣式表 (推薦)：<link rel="stylesheet" href="style.css" type="text/css">，多頁複用、瀏覽器快取、團隊協作友善。
3. 內聯樣式：<p style="color:red;">，優先級最高，僅用於極少數覆蓋場景。

核心語法結構

選擇器 {
    屬性1: 值1;
    屬性2: 值2 值3; /* 多值空格分隔 */
}
/* 多選擇器合併 */
選擇器1, 選擇器2 { 屬性: 值; }

四大核心選擇器類型與進階組合

進階組合技巧

• 群組選擇器：h1, h2, h3 {color:navy;} 共享樣式。
• 鏈結偽類：a:link, a:visited, a:hover, a:active (LVHA 順序)。
• 多重類別：<div class="box highlight"> 同時套用 .box 與 .highlight。
• 屬性選擇器：input[type="text"] {border:1px solid gray;}。

單位與色彩

• 長度：px (像素)、em (相對字體)、% (百分比)、pt (印刷點)、mm/cm。
• 顏色：#RRGGBB (十六進位)、rgb(255,0,0)、rgba(...,0.5) (透明度)、關鍵字 red 等。

盒模型與定位核心

盒模型：Content → Padding → Border → Margin。box-sizing: border-box 讓 width/height 包含 padding+border，佈局更直觀。

定位：static (預設) / relative (相對自身) / absolute (相對最近定位祖先) / fixed (相對視窗) / sticky (黏著)。

現代最佳實踐

• 採用 BEM 命名規範 (Block__Element--Modifier) 避免樣式衝突。
• 使用 CSS 變數 (Custom Properties) 實現主題切換：:root {--primary:#007bff;} → color:var(--primary);。
• Flexbox / Grid 佈局取代 float/position 傳統方案。
• 響應式設計：@media (max-width:768px) { ... }。
• 預處理器 (Sass/Less/PostCSS) 提升開發效率。