前言
上一篇《前端篇 03》中，我们已经掌握了列表、表格、表单等HTML结构化标签，能够构建出完整的网页骨架。但纯HTML写出来的页面非常简陋，没有任何样式和美观度。本篇作为前端篇的第四篇，我们将正式学习CSS（层叠样式表），它的作用就是给HTML页面添加样式，控制页面的颜色、字体、布局、动画等所有视觉效果，让网页变得美观、易用。
本文为Python全栈开发者量身打造，从CSS的核心概念讲起，详细讲解CSS的三种引入方式、基础选择器和常用样式属性。每一个知识点都配有可直接运行的实战示例，最后通过美化个人介绍页面的综合实战，让你直观感受CSS的强大，快速掌握CSS基础用法。
本节核心学习内容：
文章目录
- 前言
- 一、CSS概述
-
- 1.1 什么是CSS
- 1.2 为什么需要CSS
- 二、CSS的三种引入方式
-
- 2.1 行内样式
- 2.2 内部样式
- 2.3 外部样式（推荐使用）
- 三、CSS基础语法与常用选择器
-
- 3.1 CSS基础语法
- 3.2 常用基础选择器
-
- 1. 标签选择器
- 2. 类选择器
- 3. id选择器
- 4. 通配符选择器
- 3.3 选择器优先级
- 四、常用文本样式属性
- 五、常用背景样式属性
- 六、综合实战：用CSS美化个人介绍页面
-
- 6.1 创建外部CSS文件
- 6.2 修改HTML文件
- 七、常见误区与避坑指南
- 八、核心总结：CSS基础速查表
-
- CSS引入方式
- 基础选择器
- 常用样式属性
- 九、专栏订阅
一、CSS概述
1.1 什么是CSS
CSS（Cascading Style Sheets）即层叠样式表，是一种用于描述HTML文档样式的标记语言。
简单来说：
- HTML负责定义网页的结构和内容
- CSS负责定义网页的样式和布局
1.2 为什么需要CSS
在CSS出现之前，网页的样式都是直接写在HTML标签中的，这会导致以下问题：
- 代码冗余：相同的样式需要在每个标签中重复编写
- 维护困难：修改一个样式需要修改所有相关的HTML标签
- 结构与样式混杂：HTML代码变得臃肿，可读性差
CSS的出现实现了结构与样式的分离：
- HTML只负责结构，代码更加清晰简洁
- 所有样式统一写在CSS中，修改一次即可全局生效
- 便于团队协作和后期维护
二、CSS的三种引入方式
CSS有三种引入方式，分别适用于不同的场景。
2.1 行内样式
行内样式是将CSS样式直接写在HTML标签的style属性中。
