当前位置：首页 > news >正文

CSS 核心知识点全解析：从基础到实战应用

news 2025/8/17 15:21:43

大家好！今天这篇文章将系统总结 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; }
```