一、CSS是什么？
CSS（Cascading Style Sheets），即层叠样式表，是一种用于描述HTML文档外观和格式的样式语言。
HTML与CSS的关系
| 技术 | 角色 | 比喻 |
|---|---|---|
| HTML | 网页内容的载体 | 人的骨架 |
| CSS | 网页样式的表现 | 人的衣服、妆容 |
| JavaScript | 网页的交互行为 | 人的动作、表情 |
一句话总结：HTML负责"有什么"，CSS负责"长什么样"，JavaScript负责"能做什么"。
为什么需要CSS？
如果没有CSS，网页是这样的：
<h1>这是一个标题</h1><p>这是一段文字</p>所有文字都是默认的黑色、默认大小，页面毫无美感。而有了CSS：
h1{color:#ff6b6b;font-size:32px;text-align:center;}p{color:#4ecdc4;font-size:18px;line-height:1.8;}页面立刻变得色彩丰富、层次分明！
💡核心理念：HTML专注结构呈现，CSS负责样式美化，实现结构与样式相分离。
二、CSS语法规范
2.1 基本语法结构
CSS规则由选择器和声明两部分组成：
选择器{属性:属性值;属性:属性值;}示例：
h1{color:red;/* 文字颜色为红色 */font-size:20px;/* 字体大小为20像素 */}语法要点：
- 选择器指向要设置样式的HTML元素
- 每条声明由
属性: 属性值组成 - 属性和属性值之间用英文冒号
:分隔 - 多条声明之间用英文分号
;分隔 - 所有声明包裹在英文大括号
{}中
2.2 代码书写风格（推荐）
/* 展开格式（推荐） */h3{color:pink;font-size:20px;}/* 紧凑格式（不推荐） */h3{color:pink;font-size:20px;}规范要求：
- 选择器和大括号之间保留一个空格
- 属性值前面、冒号后面保留一个空格
- 选择器、属性名、属性值关键字全部使用小写字母
三、CSS选择器
选择器的作用是选中页面中需要设置样式的HTML元素。
3.1 基础选择器
① 标签选择器
以HTML标签名作为选择器，为某一类标签统一设置样式。
p{color:red;font-size:16px;}特点：
- 优点：能快速为页面中同类型的标签统一设置样式
- 缺点：不能差异化选择，只能选择全部当前标签
示例：
<!DOCTYPEhtml><html><head><style>p{color:red;font-size:18px;}</style></head><body><p>p1的文字</p><p>p2的文字</p><p>p3的文字</p></body></html>② 类选择器（最常用）
通过给HTML元素添加class属性，在CSS中使用.来选中。
使用步骤：
第一步：在HTML标签中添加class属性
<divclass="red">这段文字是红色</div>第二步：在CSS中使用.类名定义样式
.red{color:red;}命名规范：
- 类名以英文字母开头，不要使用纯数字或中文
- 长名称或词组使用中横线连接，如
nav-menu - 命名要有意义，让人一眼就知道用途
多类名使用：
一个标签可以同时拥有多个类名，类名之间用空格隔开：
<divclass="red font20">这段文字既是红色又是20号字</div>.red{color:red;}.font20{font-size:20px;}实际开发场景：将公共样式提取到一个类中，各元素再调用自己的独有类，既节省代码又方便维护。
③ ID选择器
通过给HTML元素添加id属性，在CSS中使用#来选中。
<divid="pink">这段文字是粉色</div>#pink{color:pink;}ID选择器 vs 类选择器：
| 对比项 | 类选择器 | ID选择器 |
|---|---|---|
| 符号 | . | # |
| 使用次数 | 可以多次使用 | 每个页面只能使用一次 |
| 多样式 | 可以同时设置多个类 | 不能同时设置多个ID |
| 常见用途 | 设置样式 | 一般与JavaScript配合使用 |
<!-- 类选择器：可以多次使用，正确 --><spanclass="stress">胆小如鼠</span><spanclass="stress">勇气</span><!-- ID选择器：重复使用是错误的 --><spanid="stress">错误示范</span><spanid="stress">错误示范</span>④ 通配符选择器
使用*选中页面中所有元素。
*{margin:0;padding:0;}用途：常用于清除浏览器默认的内外边距，让页面样式从零开始。
3.2 基础选择器对比总结
| 选择器 | 作用 | 特点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 选出所有相同标签 | 不能差异化选择 | 较多 | p { color: red; } |
| 类选择器 | 选出1个或多个标签 | 可以根据需求选择 | 非常多 | .nav { color: red; } |
| ID选择器 | 一次只能选择1个标签 | 每个ID只能出现一次 | 一般和JS搭配 | #nav { color: red; } |
| 通配符选择器 | 选择所有标签 | 选择太多，部分不需要 | 特殊情况 | * { color: red; } |
3.3 复合选择器
① 后代选择器（空格）
选中某个元素内部的所有后代元素。
/* 选中 .nav 内部所有的 li */.nav li{color:red;}<ulclass="nav"><li>首页</li><li>关于我们<ul><li>公司介绍</li><!-- 也会被选中 --></ul></li></ul>② 子选择器（>）
只选中某个元素的直接子元素。
/* 只选中 .food 的直接子元素 li */.food > li{border:1px solid red;}后代选择器 vs 子选择器：
>只作用于元素的第一代后代（直接子元素）- （空格）作用于元素的所有后代
③ 并集选择器（,）
同时为多个选择器设置相同的样式。
/* 同时设置 h1 和 span 的文字颜色为红色 */h1, span{color:red;}/* 等价于： h1 { color: red; } span { color: red; } */④ 链接伪类选择器
用于设置链接在不同状态下的样式。
a:link{color:#333;}/* 未访问的链接 */a:visited{color:#999;}/* 已访问的链接 */a:hover{color:#ff6b6b;}/* 鼠标悬停时的链接 */a:active{color:green;}/* 鼠标点击时的链接 */简写技巧：实际开发中通常只写a和a:hover：
a{color:#333;text-decoration:none;/* 去掉下划线 */}a:hover{color:#ff6b6b;text-decoration:underline;/* 悬停时显示下划线 */}⑤ :focus伪类选择器
用于选中获得焦点的表单元素。
input:focus{background-color:yellow;outline:none;/* 去掉默认的蓝色边框 */}四、CSS字体属性
4.1 字体系列（font-family）
p{font-family:"Microsoft YaHei","微软雅黑",Arial,sans-serif;}注意：
- 多个字体之间用英文逗号隔开
- 有空格的字体名需要加引号
- 浏览器会按顺序查找字体，如果都没有则使用默认字体
- 通常最后加上一个通用字体族（如
sans-serif）作为后备
4.2 字体大小（font-size）
p{font-size:16px;/* 常用单位：px（像素） */}注意：
- 谷歌浏览器默认文字大小为
16px - 不同浏览器默认字号可能不一致，建议给
body指定明确大小
4.3 字体粗细（font-weight）
p{font-weight:700;/* 加粗，等价于 bold */}span{font-weight:400;/* 正常，等价于 normal */}| 属性值 | 说明 |
|---|---|
normal | 默认值（不加粗），等价于400 |
bold | 定义粗体，等价于700 |
100~900 | 400等同于normal，700等同于bold，数字后不跟单位 |
4.4 文字样式（font-style）
p{font-style:italic;/* 斜体 */}em{font-style:normal;/* 不倾斜，将斜体标签恢复正常 */}| 属性值 | 说明 |
|---|---|
normal | 默认值，标准字体样式 |
italic | 斜体 |
💡 实际开发中，更常做的是把
em、i等斜体标签设置为normal，而不是给正常文字加斜体。
4.5 字体复合属性（font）
可以将以上字体属性简写为一行：
body{font:font-style font-weight font-size/line-height font-family;}示例：
/* 展开写法 */div{font-style:italic;font-weight:700;font-size:16px;font-family:'Microsoft YaHei';}/* 复合写法（更简洁） */div{font:italic 700 16px'Microsoft YaHei';}必须遵守的规则：
- 必须按照固定顺序书写，不能更换顺序
font-size和font-family必须同时出现，缺一不可- 不需要设置的属性可以省略（取默认值）
4.6 字体属性总结
| 属性 | 表示 | 注意点 |
|---|---|---|
font-size | 字号 | 常用单位px，必须带单位 |
font-family | 字体 | 按团队约定书写 |
font-weight | 粗细 | 700/bold加粗，400/normal正常，数字不带单位 |
font-style | 样式 | italic倾斜，normal正常 |
font | 复合属性 | 有固定顺序，font-size和font-family必须同时出现 |
五、CSS文本属性
5.1 文本颜色（color）
p{color:red;/* 预定义颜色值 */color:#ff0000;/* 十六进制（最常用） */color:#f00;/* 十六进制简写 */color:rgb(255,0,0);/* RGB代码 */}| 表示方式 | 属性值 | 说明 |
|---|---|---|
| 预定义颜色值 | red,green,blue,pink | 直接使用颜色英文单词 |
| 十六进制 | #FF0000,#FF6600,#29D794 | 开发中最常用 |
| RGB代码 | rgb(255,0,0) | 红绿蓝三原色组合 |
5.2 对齐文本（text-align）
h1{text-align:center;/* 居中对齐 */}p{text-align:left;/* 左对齐（默认） */}span{text-align:right;/* 右对齐 */}| 属性值 | 说明 |
|---|---|
left | 左对齐（默认值） |
right | 右对齐 |
center | 居中对齐 |
5.3 装饰文本（text-decoration）
a{text-decoration:none;/* 无装饰线（最常用） */}p{text-decoration:underline;/* 下划线 */}del{text-decoration:line-through;/* 删除线 */}| 属性值 | 说明 |
|---|---|
none | 默认，没有装饰线（最常用，用于去掉链接默认下划线） |
underline | 下划线（链接a自带下划线） |
overline | 上划线（几乎不用） |
line-through | 删除线（不常用） |
5.4 文本缩进（text-indent）
p{text-indent:2em;/* 首行缩进2个字符 */}em单位说明：
em是一个相对单位1em等于当前元素的font-size大小- 如果当前元素没有设置大小，则按照父元素的
1个文字大小 - 使用
2em可以实现段落首行缩进两个汉字的效果
5.5 行间距（line-height）
p{line-height:26px;/* 行高为26像素 */line-height:1.5;/* 行高为字体大小的1.5倍 */}行高的组成：
行高 = 上间距 + 文字高度 + 下间距
💡单行文字垂直居中技巧：让
line-height等于元素的高度，文字就会垂直居中！
.box{height:40px;line-height:40px;/* 文字垂直居中 */}5.6 文本属性总结
| 属性 | 表示 | 注意点 |
|---|---|---|
color | 文本颜色 | 常用十六进制简写，如#fff |
text-align | 文本对齐 | 设定文字水平对齐方式 |
text-indent | 文本缩进 | 常用text-indent: 2em实现首行缩进 |
text-decoration | 文本修饰 | underline添加下划线，none取消下划线 |
line-height | 行高 | 控制行与行之间的距离 |
六、CSS引入方式
CSS有三种引入方式，各有适用场景：
6.1 行内样式表（内联式）
直接在HTML标签的style属性中写CSS。
<divstyle="color:red;font-size:12px;">青春不常在</div>特点：
- 书写方便，权重最高
- 结构与样式混写，不推荐大量使用
- 仅适合对当前元素添加简单样式
6.2 内部样式表（嵌入式）
将CSS代码写在HTML文件的<style>标签中。
<!DOCTYPEhtml><html><head><style>p{color:red;font-size:12px;}</style></head><body><p>这是一段文字</p></body></html>特点：
- 部分实现了结构与样式分离
- 适合单个页面的样式设置
- 练习时常用这种方式
6.3 外部样式表（链接式）⭐推荐
将CSS代码写在单独的.css文件中，通过<link>标签引入。
第一步：创建style.css文件
/* style.css */p{color:red;font-size:16px;}第二步：在HTML中引入
<head><linkrel="stylesheet"href="style.css"></head><link>标签属性说明：
| 属性 | 作用 |
|---|---|
rel | 定义当前文档与被链接文档的关系，必须指定为stylesheet |
href | 定义所链接外部样式表文件的路径 |
特点：
- 完全实现结构与样式分离
- 一个CSS文件可以被多个HTML页面共用
- 方便维护和修改
- 开发中最常用，吐血推荐！
6.4 三种引入方式对比
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 结构样式混写 | 较少 | 一个标签 |
| 内部样式表 | 部分分离 | 未彻底分离 | 较多 | 一个页面 |
| 外部样式表 | 完全分离 | 需要引入 | 最多，推荐 | 多个页面 |
七、综合案例：美化新闻页面
下面是一个完整的新闻页面示例，综合运用本章所学知识：
HTML文件（news.html）：
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>科技新闻 - 人工智能新突破</title><linkrel="stylesheet"href="news.css"></head><body><divclass="container"><h1class="title">人工智能新突破：GPT-5即将发布</h1><pclass="subtitle">发布时间：2026-06-22 | 来源：科技日报</p><divclass="content"><p>近日，人工智能领域迎来重大突破。据知情人士透露，下一代大语言模型GPT-5已经进入最后测试阶段，预计将在今年第三季度正式发布。</p><p>据悉，GPT-5在多个关键指标上实现了质的飞跃。在自然语言理解、代码生成、数学推理等方面，性能较前代提升了约40%。特别是在多模态处理能力上，GPT-5可以同时处理文本、图像、音频和视频等多种数据类型。</p><p>"这将是一个里程碑式的进步，"某知名AI研究员表示，"GPT-5的出现可能会彻底改变我们与技术交互的方式。"</p></div><pclass="footer">本文仅代表作者观点，不代表本站立场。</p></div></body></html>CSS文件（news.css）：
/* 清除默认样式 */*{margin:0;padding:0;box-sizing:border-box;}body{font-family:"Microsoft YaHei","微软雅黑",sans-serif;background-color:#f5f5f5;line-height:1.6;}.container{width:800px;margin:50px auto;background-color:#fff;padding:40px;border-radius:8px;box-shadow:0 2px 10pxrgba(0,0,0,0.1);}.title{color:#333;font-size:28px;text-align:center;margin-bottom:15px;}.subtitle{color:#999;font-size:14px;text-align:center;margin-bottom:30px;border-bottom:1px solid #eee;padding-bottom:15px;}.content p{color:#555;font-size:16px;text-indent:2em;margin-bottom:15px;line-height:1.8;}.footer{color:#999;font-size:12px;text-align:center;margin-top:30px;padding-top:15px;border-top:1px solid #eee;}八、Chrome调试工具
学会使用浏览器开发者工具是前端开发的基本功。
打开方式
- 快捷键：
F12或Ctrl + Shift + I - 右键点击页面 → 选择"检查"
常用功能
- Elements（元素面板）：查看和修改HTML/CSS
- Console（控制台）：查看JavaScript输出和错误
- Network（网络面板）：查看请求和响应
调试CSS小技巧
- 点击元素可以查看其所有CSS样式
- 可以直接在面板中修改样式，实时预览效果
- 修改后的样式不会保存到文件中，需要手动复制到代码中
九、CSS三大特性
9.1 层叠性
当多个选择器设置了相同的属性时，后面的样式会覆盖前面的样式。
p{color:red;}p{color:blue;/* 最终文字显示蓝色 */}9.2 继承性
子元素会继承父元素的某些样式（主要是文字相关的样式）。
body{color:red;font-size:16px;}/* body内的所有子元素都会继承红色文字和16px字号 */9.3 优先级
当多个选择器选中同一个元素时，优先级高的样式生效。
优先级排序（从高到低）：
| 选择器 | 权重 |
|---|---|
| 行内样式 | 1000 |
| ID选择器 | 100 |
| 类/伪类/属性选择器 | 10 |
| 标签选择器 | 1 |
| 通配符/继承 | 0 |
计算示例：
#nav .menu li{}/* 权重：100 + 10 + 1 = 111 */.nav li{}/* 权重：10 + 1 = 11 */li{}/* 权重：1 */💡权重叠加但不会进位：
0,0,1,0+0,0,1,0=0,0,2,0，而不是0,1,0,0。
十、本章小结
| 知识点 | 核心内容 |
|---|---|
| CSS定义 | 层叠样式表，负责网页的外观美化 |
| 基础选择器 | 标签、类（.）、ID（#）、通配符（*） |
| 复合选择器 | 后代（空格）、子代（>）、并集（,）、伪类（:） |
| 字体属性 | font-family、font-size、font-weight、font-style、font复合 |
| 文本属性 | color、text-align、text-indent、text-decoration、line-height |
| 引入方式 | 行内式、嵌入式、外部链接式（推荐） |
| 三大特性 | 层叠性、继承性、优先级 |
如果本文对你有帮助，欢迎点赞 👍、收藏 ⭐、关注专栏！有问题欢迎在评论区交流讨论。
)
