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

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

总结

CSS 是网页美化的核心，掌握本文的知识点，你就能应对大多数页面样式需求。重点在于：

熟练使用选择器精准定位元素
理解盒子模型的空间计算
掌握文本和字体样式的设置
灵活处理溢出内容和标签特性

注意：行内元素和行内块元素之间会有默认间隙（因 HTML 中的空格 / 换行导致），可通过设置父元素font-size: 0解决。

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

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

二、CSS 样式的引入方式

1. 外链式（推荐）

2. 内嵌式

3. 行内式

三、CSS 选择器：精准定位元素

1. 基本选择器

2. 高级选择器

（1）组合选择器：处理元素关系

（2）伪类选择器：根据元素状态选择

（3）结构伪类：根据位置选择

（4）属性选择器：根据属性值选择

（5）伪元素选择器：创建 “虚拟元素”

四、选择器优先级：样式冲突时谁说了算？

优先级规则：

五、字体与文本样式：让文字更美观

1. 字体样式（`font-*`）

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

六、HTML 标签分类与特性

如何改变标签类型？

七、HTML盒模型

常用设置：

两种盒模型：

八、CSS 三大特性：层叠、继承、优先级

九、文本溢出处理：内容太多装不下怎么办？

1. 单行文本溢出省略

2. 多行文本溢出省略

3. 显示滚动条

十、实战技巧：常用 CSS 属性

总结

网站公告

今日签到

热门文章

最新发布

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

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

二、CSS 样式的引入方式

1. 外链式（推荐）

2. 内嵌式

3. 行内式

三、CSS 选择器：精准定位元素

1. 基本选择器

2. 高级选择器

（1）组合选择器：处理元素关系

（2）伪类选择器：根据元素状态选择

（3）结构伪类：根据位置选择

（4）属性选择器：根据属性值选择

（5）伪元素选择器：创建 “虚拟元素”

四、选择器优先级：样式冲突时谁说了算？

优先级规则：

五、字体与文本样式：让文字更美观

1. 字体样式（font-*）

2. 文本样式（text-*）

六、HTML 标签分类与特性

如何改变标签类型？

七、HTML盒模型

常用设置：

两种盒模型：

八、CSS 三大特性：层叠、继承、优先级

九、文本溢出处理：内容太多装不下怎么办？

1. 单行文本溢出省略

2. 多行文本溢出省略

3. 显示滚动条

十、实战技巧：常用 CSS 属性

总结

网站公告

今日签到

热门文章

最新发布

1. 字体样式（`font-*`）

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