大家好!今天这篇文章将系统总结 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
解决。