CSS之基礎語法一文全解析
- 一、CSS語法核心結構：選擇器+聲明塊
- 1.1 基礎語法模板
- 1.2 關鍵組成部分
- 二、選擇器全解析：精準定位目標元素
- 2.1 基礎選擇器（必掌握）
- 2.1.1 標簽選擇器（類型選擇器）
- 2.1.2 類選擇器（最靈活）
- 2.1.3 ID選擇器（唯一性）
- 2.2 組合選擇器（復雜場景）
- 2.2.1 后代選擇器（空格分隔）
- 2.2.2 子代選擇器（>`符號）
- 2.2.3 并集選擇器（逗號分隔）
- 2.3 偽類選擇器（動態狀態）
- 2.3.1 鏈接狀態偽類
- 2.3.2 結構偽類（表單/列表）
- 三、屬性值類型：從基礎值到函數表達式
- 3.1 基礎值類型
- 3.1.1 顏色值
- 3.1.2 長度單位
- 3.1.3 關鍵字
- 3.2 函數表達式
- 3.2.1 計算函數`calc()`
- 3.2.2 自定義變量`var()`（CSS3新特性）
- 四、聲明規則：層疊性、優先級與簡寫
- 4.1 層疊性：沖突時的樣式應用規則
- 4.2 簡寫屬性：簡化代碼
- 五、代碼組織與最佳實踐
- 5.1 注釋規范
- 5.2 導入方式對比
- 5.3 代碼格式化
- 六、常見問題與避坑指南
- 6.1 樣式不生效？
- 6.2 單位使用誤區
- 6.3 偽類順序問題
在Web開發中，CSS（層疊樣式表）負責網頁的視覺呈現，其基礎語法是實現精美頁面的基石。本文將系統拆解CSS核心語法體系，并通過實戰案例演示選擇器、屬性、聲明規則等核心知識，幫你建立起扎實的CSS基礎。
一、CSS語法核心結構：選擇器+聲明塊
1.1 基礎語法模板
CSS規則由選擇器和聲明塊兩部分組成，語法結構如下：
/* 選擇器 { 聲明塊 } */
h1 {color: red; /* 屬性: 值; */font-size: 24px; /* 多個聲明用分號分隔 */
}
1.2 關鍵組成部分
- 選擇器：指定樣式作用的HTML元素（如
h1、.class、#id） - 聲明塊：包含一組
屬性: 值對，用大括號包裹 - 屬性：CSS樣式名稱（如
color、font-size、margin） - 值：屬性對應的有效值（如顏色值、長度單位、關鍵字）
- 分號：每個聲明必須以分號結尾（最后一個聲明可省略，但建議保留）
二、選擇器全解析：精準定位目標元素
2.1 基礎選擇器（必掌握）
2.1.1 標簽選擇器（類型選擇器）
- 語法：
標簽名 { 樣式 } - 作用：選擇所有該標簽的元素
- 案例：統一設置所有段落字體顏色
p {color: #666;line-height: 1.6; }
2.1.2 類選擇器（最靈活）
- 語法：
.類名 { 樣式 }（類名以.開頭） - 作用：選擇所有
class屬性匹配的元素 - 案例：為按鈕添加樣式
.btn-primary {background-color: #4a90e2;color: white;padding: 8px 16px; }
2.1.3 ID選擇器（唯一性）
- 語法：
#id名 { 樣式 }（ID名以#開頭） - 作用：選擇
id屬性匹配的唯一元素（每個ID在頁面中只能出現一次） - 案例：定位導航欄
#header-nav {background-color: #f5f5f5;padding: 20px; }
2.2 組合選擇器（復雜場景）
2.2.1 后代選擇器（空格分隔）
- 語法：
父元素 子元素 { 樣式 } - 作用：選擇父元素內部的所有指定子元素
- 案例：僅設置列表中的鏈接樣式
ul li a {text-decoration: none;color: #333; }
2.2.2 子代選擇器（>`符號）
- 語法：
父元素>子元素 { 樣式 } - 作用：選擇父元素的直接子元素
- 案例：僅設置第一級列表項
.menu>li {display: inline-block;margin-left: 15px; }
2.2.3 并集選擇器（逗號分隔）
- 語法：
選擇器1, 選擇器2 { 樣式 } - 作用：同時選擇多個元素
- 案例：統一標題和段落的字體
h1, h2, p {font-family: 'Arial', sans-serif; }
2.3 偽類選擇器（動態狀態）
2.3.1 鏈接狀態偽類
:hover：鼠標懸停時:active：鼠標點擊時:visited：已訪問鏈接- 案例：交互按鈕效果
.link-btn:hover {color: #4a90e2;text-decoration: underline; }
2.3.2 結構偽類（表單/列表）
:first-child：第一個子元素:nth-child(n)：第n個子元素（n可為數字、公式如2n）:checked：選中的單選/多選框- 案例：隔行變色表格
table tr:nth-child(even) {background-color: #f8f8f8; }
三、屬性值類型：從基礎值到函數表達式
3.1 基礎值類型
3.1.1 顏色值
- 十六進制：
#fff（簡寫）、#ffffff（完整） - RGB：
rgb(255, 0, 0)（十進制）、rgba(255, 0, 0, 0.5)（帶透明度） - 預定義名稱：
red、blue、transparent（透明） - 案例：漸變色背景（需配合
background-image屬性）.hero {background-image: linear-gradient(to bottom, #4a90e2, #2196f3); }
3.1.2 長度單位
- 絕對單位：
px（像素，最常用）、pt（點，印刷場景） - 相對單位：
em：相對于父元素字體大小（如1.2em）rem：相對于根元素（<html>）字體大小（響應式設計常用）%：百分比（如width: 50%）
- 案例：響應式字體
html { font-size: 16px; } /* 根字體大小 */ body { font-size: 0.875rem; } /* 14px */
3.1.3 關鍵字
- 方向：
left、right、top、bottom - 對齊方式：
center、justify（兩端對齊）、baseline（基線對齊） - 顯示方式：
block（塊級元素）、inline（行內元素）、none（隱藏） - 案例：水平居中元素
.container {margin: 0 auto; /* 上下0，左右自動居中 */width: 960px; }
3.2 函數表達式
3.2.1 計算函數calc()
- 作用：動態計算長度（支持
+、-、*、/） - 案例：自適應布局
.sidebar {width: calc(20% - 20px); /* 20%寬度減去20px邊距 */ }
3.2.2 自定義變量var()（CSS3新特性）
- 作用：定義可復用的變量（需配合
--變量名聲明） - 案例：主題色管理
:root {--primary-color: #4a90e2; } .button {background-color: var(--primary-color); }
四、聲明規則：層疊性、優先級與簡寫
4.1 層疊性：沖突時的樣式應用規則
- 來源優先級：瀏覽器默認樣式 < 用戶樣式 < 開發者樣式
- 選擇器權重（從高到低）：
- ID選擇器（100分）
- 類選擇器/屬性選擇器/偽類（10分）
- 標簽選擇器/偽元素（1分）
- 通配符
*（0分）
- 案例：強制覆蓋樣式（!important）
.special {color: red !important; /* 最高優先級，慎用 */ }
4.2 簡寫屬性：簡化代碼
- 字體簡寫：
font: [font-style] [font-weight] [font-size]/[line-height] [font-family]/* 完整寫法 */ p {font-style: italic;font-weight: bold;font-size: 16px;line-height: 1.5;font-family: 'Times New Roman', serif; } /* 簡寫 */ p {font: italic bold 16px/1.5 'Times New Roman', serif; } - 背景簡寫：
background: [color] [image] [position] [size] [repeat] [attachment]
五、代碼組織與最佳實踐
5.1 注釋規范
- 模塊注釋（/* 模塊名稱 */）
- 關鍵代碼注釋（單行或多行）
/* 導航欄樣式 */ #nav {background-color: #333; /* 深色背景 */color: white;/* 彈性布局實現水平排列 */display: flex;justify-content: space-around; }
5.2 導入方式對比
| 方式 | 語法 | 加載時機 | 兼容性 |
|---|---|---|---|
<link> | <link rel="stylesheet" href="style.css"> | 頁面加載時并行加載 | 全兼容 |
@import | @import url(style.css); | 等待頁面加載后加載 | IE5+（不推薦） |
推薦：使用<link>標簽，性能更優且支持媒體查詢：
<link rel="stylesheet" href="desktop.css" media="(min-width: 768px)">
5.3 代碼格式化
- 縮進：2個空格（避免制表符）
- 大括號：選擇器后換行，聲明塊每行一個屬性
- 空格：屬性名與冒號后留一個空格（如
color: red）
六、常見問題與避坑指南
6.1 樣式不生效？
- 檢查選擇器是否正確匹配元素（瀏覽器控制臺調試）
- 確認選擇器權重是否被更高優先級覆蓋（使用
!important臨時測試） - 檢查屬性是否拼寫錯誤（CSS屬性嚴格區分大小寫嗎？不區分，但建議統一小寫）
6.2 單位使用誤區
- 百分比相對于父元素計算（如
width: 50%是父元素寬度的50%） rem依賴根字體大小，需在<html>標簽設置基準值- 避免為
font-size使用px以外的單位（可能導致字體模糊）
6.3 偽類順序問題
- 鏈接偽類必須遵循
a:link -> a:visited -> a:hover -> a:active順序（LVHA規則）/* 正確順序 */ a:link, a:visited { color: #333; } a:hover { color: #4a90e2; } a:active { color: #2196f3; }
掌握CSS基礎語法核心在于：
- 選擇器精準性：根據場景選擇合適的選擇器（類選擇器優先于ID選擇器）
- 聲明簡潔性：善用簡寫屬性和自定義變量（CSS3
var()）- 規則層疊性：理解權重計算，合理使用
!important- 代碼規范性：統一格式、添加注釋、使用外部樣式表
若這篇內容幫到你，動動手指支持下！關注不迷路，干貨持續輸出！
ヾ(′? ˋ)ﾉヾ(′? ˋ)ﾉヾ(′? ˋ)ﾉヾ(′? ˋ)ﾉヾ(′? ˋ)ﾉ
)
