CSS 核心知識點全解析：從基礎到實戰應用

大家好！今天這篇文章將系統總結 CSS 的核心知識點，從最基礎的樣式引入到復雜的選擇器應用，再到盒子模型、文本處理等實戰技巧，全程結合代碼示例，讓你輕松掌握 CSS 的精髓。

一、CSS 是什么？為什么需要它？

CSS（層疊樣式表）是用來控制網頁外觀的語言。我們可以把網頁比作 “毛坯房”，HTML 負責搭建 “墻體結構”（標簽），而 CSS 則負責 “裝修”—— 設置顏色、字體、布局等，讓網頁更美觀、易讀。

前端有三大核心技術：

HTML（結構層）：定義頁面元素
CSS（表現層）：控制元素樣式
JavaScript（行為層）：實現交互效果

今天我們重點聚焦 “表現層” 的 CSS。

二、CSS 樣式的引入方式

要讓 CSS 生效，首先要知道如何將樣式 “連接” 到 HTML。常見的引入方式有三種：

1. 外鏈式（推薦）

通過<link>標簽引入外部.css文件，實現 HTML（結構）和 CSS（樣式）的徹底分離，多個頁面可共享同一份樣式，便于維護。

<!-- 在<head>中引入 -->
<link rel="stylesheet" href="./css/common.css">

優點：一次修改，多處生效；減輕 HTML 文件體積。

2. 內嵌式

在 HTML 的<style>標簽內編寫 CSS，樣式僅作用于當前頁面。

<head><style>p { color: red; } /* 所有p標簽文字變紅 */</style>
</head>

適用場景：樣式僅用于當前頁面，且代碼量不大時。

3. 行內式

直接在 HTML 標簽的style屬性中寫樣式，優先級最高，但會導致結構和樣式混雜，不推薦大量使用。

<p style="color: blue; font-size: 20px;">行內樣式</p>

總結：優先使用外鏈式，其次內嵌式，盡量避免行內式。

三、CSS 選擇器：精準定位元素

CSS 選擇器的作用是 “選中” 需要設置樣式的 HTML 元素。就像我們在人群中找人，需要通過 “特征” 定位，選擇器就是元素的 “特征”。

1. 基本選擇器

最常用的基礎選擇器，覆蓋大多數簡單場景。

選擇器	語法	作用	示例
標簽選擇器	標簽名	選中所有同名標簽	`p { color: red; }`（所有 p 標簽）
類選擇器	. 類名	選中所有帶該類名的標簽	`.active { font-size: 20px; }`
ID 選擇器	#ID 名	選中唯一帶該 ID 的標簽（ID 唯一）	`#logo { width: 100px; }`
通配符選擇器	*	選中所有標簽	`* { margin: 0; padding: 0; }`（清除默認邊距）
并集選擇器	選擇器 1, 選擇器 2	同時選中多個選擇器的元素	`p, .box { color: blue; }`（p 標簽和.box 類）

2. 高級選擇器

處理更復雜的選擇場景，比如父子關系、狀態變化等。

（1）組合選擇器：處理元素關系

E>F：選中 E 的直接子元素F（僅兒子，不含孫子）

.app>p { color: red; } /* 選中class為app的元素的直接子元素p */

E F：選中 E 的所有子孫元素F（兒子、孫子都算）

.app p { background: yellow; } /* 選中app內所有p（包括嵌套的） */

E+F：選中 E 后面的第一個兄弟元素F

.first+p { color: blue; } /* 選中class為first的元素后面第一個p */

E~F：選中 E 后面的所有兄弟元素F

.first~p { color: green; } /* 選中first后面所有p兄弟 */

（2）偽類選擇器：根據元素狀態選擇

鏈接偽類（a 標簽專用）：

a:link { color: pink; } /* 未訪問的鏈接 */
a:visited { color: red; } /* 已訪問的鏈接 */
a:hover { color: orange; } /* 鼠標懸浮時 */
a:active { color: purple; } /* 鼠標點擊未松開時 */

注意順序：link -> visited -> hover -> active，否則可能失效。

表單偽類：

input:enabled { background: white; } /* 可用的輸入框 */
input:disabled { background: #eee; } /* 禁用的輸入框 */
input:focus { background: yellow; } /* 光標聚焦的輸入框 */
input:checked { width: 20px; } /* 被選中的復選框/單選框 */

否定偽類：排除特定元素

.first>input:not(#all) { width: 30px; } /* 選中.first下所有input，除了id為all的 */

（3）結構偽類：根據位置選擇

E:nth-of-type(n)：選中 E 的第 n 個子元素

ul>li:nth-of-type(2n) { background: blue; } /* 列表中偶數項 */
ul>li:nth-of-type(2n-1) { background: gray; } /* 列表中奇數項 */

E:first-of-type：選中 E 的第一個子元素
E:last-of-type：選中 E 的最后一個子元素

（4）屬性選擇器：根據屬性值選擇

input[name=username] { background: aqua; } /* name屬性為username的input */
input[type=text] { background: red; } /* type屬性為text的input */
a[href^=http] { color: green; } /* href以http開頭的鏈接 */
a[href$=pdf] { color: red; } /* href以pdf結尾的鏈接 */

（5）偽元素選擇器：創建 “虛擬元素”

不是選中已有元素，而是在元素內部添加虛擬內容（需配合content屬性）

.third::after {content: '添加的文字'; /* 必須有，可空 */display: inline-block; /* 轉為行內塊，可設置寬高 */
}
p::first-letter { color: red; } /* 段落第一個字 */
p::first-line { background: yellow; } /* 段落第一行 */
p::selection { color: white; background: black; } /* 選中的文本樣式 */

四、選擇器優先級：樣式沖突時誰說了算？

當多個選擇器選中同一個元素，且設置了沖突的樣式（比如同時設置 color），誰的樣式會生效？這取決于優先級。

優先級規則：

權重計算：不同選擇器有不同權重，權重高的生效。
- !important：無窮大（最高級，謹慎使用）
- 行內樣式（style屬性）：1000
- ID 選擇器：100
- 類 / 偽類 / 屬性選擇器：10
- 標簽 / 偽元素選擇器：1
- 通配符：0
示例：
```
.list>.second { color: blue; } /* 類+類：10+10=20 */
ul>.second { color: green; } /* 標簽+類：1+10=11 */
/* 前者權重更高，文字顯示藍色 */
```

同名選擇器：后寫的覆蓋先寫的。

p { color: red; }
p { color: blue; } /* 最終文字為藍色 */

繼承的樣式：優先級低于直接設置的樣式。

五、字體與文本樣式：讓文字更美觀

1. 字體樣式（`font-*`）

控制字體的大小、粗細、類型等。

p {font-size: 16px; /* 字體大小（默認16px） */font-weight: 700; /* 粗細：100-900（400正常，700加粗） */font-style: italic; /* 風格：italic（傾斜）/ normal（正常） */font-family: '微軟雅黑', sans-serif; /* 字體類型（多個備選，逗號分隔） */
}/* 復合屬性：風格 粗細 大小 類型（順序固定，大小和類型必填） */
p { font: italic 700 16px '微軟雅黑'; }

2. 文本樣式（`text-*`）

控制文本的對齊、縮進、裝飾等。

p {text-indent: 2em; /* 首行縮進（1em=當前字體大小） */text-align: center; /* 水平對齊：left/center/right */text-decoration: none; /* 裝飾：underline（下劃線）/ line-through（刪除線）/ none（無） */text-shadow: 1px 1px 2px #999; /* 文本陰影：x偏移 y偏移 模糊半徑 顏色 */line-height: 30px; /* 行高：行與行之間的距離（行高=容器高度時，文本垂直居中） */
}/* 去掉a標簽默認下劃線 */
a { text-decoration: none; }

六、HTML 標簽分類與特性

HTML 標簽按顯示特性可分為三類，理解它們的區別是布局的基礎。

類型	特點	示例標簽
塊級元素	獨占一行；可設置寬高；默認寬度占滿父元素	div、p、h1-h6、ul
行內元素	不獨占一行；寬高由內容決定；不可設置寬高	span、a、i、b
行內塊元素	不獨占一行；可設置寬高；寬高由內容決定	img、input

如何改變標簽類型？

通過display屬性可以強制改變標簽的顯示類型：

七、HTML盒模型

div { display: inline; } /* 塊級div轉為行內元素 */
a { display: inline-block; } /* 行內a轉為行內塊（可設寬高） */
span { display: block; } /* 行內span轉為塊級元素（獨占一行） */

內容區（content）：元素的文本 / 圖片區域，通過width和height設置。
內邊距（padding）：內容區與邊框的距離（子元素與父元素的距離）。
邊框（border）：盒子的邊框，可設置粗細、樣式、顏色。
外邊距（margin）：盒子與其他盒子的距離。

常用設置：

.box {width: 200px; /* 內容寬度 */height: 200px; /* 內容高度 *//* 內邊距：上 右 下 左（順時針） */padding: 10px 20px; /* 上下10px，左右20px *//* 邊框：粗細 樣式 顏色 */border: 5px solid red; /* 5px實線紅色邊框 */border-radius: 8px; /* 圓角邊框 *//* 外邊距：上 右 下 左 */margin: 20px; /* 四周20px */
}

兩種盒模型：

標準盒模型（默認）：盒子總寬度 = width + 左右 padding + 左右 border + 左右 margin
怪異盒模型：盒子總寬度 = width（包含 content + padding + border） + 左右 margin

通過box-sizing切換：

.box {box-sizing: border-box; /* 怪異盒模型（推薦，避免計算麻煩） */
}

八、CSS 三大特性：層疊、繼承、優先級

層疊性：多個樣式作用于同一元素時，沖突的樣式按優先級覆蓋，不沖突的樣式同時生效。
```
p { color: red; font-size: 16px; }
p { color: blue; } /* 最終：color: blue; font-size: 16px; */
```
繼承性：子元素會繼承父元素的某些樣式（主要是文本相關），如text-*、font-*、color、line-height。
```
.parent { color: red; font-size: 20px; }
/* 子元素p會繼承red和20px */
<div class="parent"><p>我會繼承父元素的樣式</p>
</div>
```
例外：a標簽不繼承color，需單獨設置。
優先級：如前文所述，解決樣式沖突的核心規則。

九、文本溢出處理：內容太多裝不下怎么辦？

當文本內容超過容器寬度 / 高度時，需要優雅處理溢出內容。

1. 單行文本溢出省略

.single-line {width: 300px; /* 固定寬度 */white-space: nowrap; /* 不換行 */overflow: hidden; /* 隱藏溢出內容 */text-overflow: ellipsis; /* 溢出部分顯示省略號 */
}

2. 多行文本溢出省略

.multi-line {width: 300px;display: -webkit-box; /* 彈性盒模型 */-webkit-box-orient: vertical; /* 垂直排列 */-webkit-line-clamp: 3; /* 顯示3行 */overflow: hidden; /* 隱藏溢出 */text-overflow: ellipsis; /* 省略號 */line-height: 24px; /* 行高 */height: 72px; /* 行高*行數（3*24=72） */
}

3. 顯示滾動條

如果希望用戶能看到所有內容，可顯示滾動條：

.scroll {width: 300px;height: 100px;overflow: auto; /* 內容溢出時顯示滾動條 */
}

十、實戰技巧：常用 CSS 屬性

鼠標樣式：cursor: pointer（鼠標懸停時顯示手型，常用于可點擊元素）
```
span { cursor: pointer; }
```
垂直對齊：vertical-align（用于行內 / 行內塊元素，如圖片與文字對齊）
```
img { vertical-align: middle; } /* 圖片與文字中線對齊 */
```
清除默認樣式：瀏覽器會給元素設置默認 margin 和 padding，可通過通配符清除
```
* { margin: 0; padding: 0; }
```