目录
一、CSS 是什么
二、CSS 的发展历史
三、CSS 的核心作用
（一）美化网页外观
（二）控制页面布局
（三）实现交互与动画
（四）样式复用与维护
四、CSS 基本语法
（一）选择器（Selector）
1. 基础选择器
2. 复合选择器
3. 伪类与伪元素选择器
（二）声明块（Declaration Block）
（三）层叠与优先级
五、CSS 与 HTML 的结合方式
（一）内联样式（Inline Style）
（二）内部样式表（Internal Style Sheet）
（三）外部样式表（External Style Sheet）
六、CSS 常用属性分类
（一）文本与字体属性
（二）盒模型属性
（三）背景属性
（四）布局与定位属性
（五）动画与过渡属性
七、CSS 布局技术演进
（一）传统布局
（二）现代布局
八、CSS 工具与最佳实践
（一）常用开发工具
（二）最佳实践
九、总结
一、CSS 是什么CSS 是 Cascading Style Sheets 的缩写，中文译为“层叠样式表”，是一种专门用于定义网页样式的标记语言。它与 HTML 共同构成了网页开发的基础，其中 HTML 负责构建网页的结构（如标题、段落、图片等元素），而 CSS 则负责控制这些元素的外观表现（如颜色、字体、布局、间距等）。
在互联网发展初期，网页仅通过 HTML 标签定义内容和简单样式，例如使用 标签设置文字颜色、
如今，CSS 已成为前端开发的核心技术之一，与 HTML、JavaScript 并称为“前端三基石”。无论是简单的静态网页还是复杂的动态应用，都离不开 CSS 对视觉呈现的控制。掌握 CSS 是构建美观、易用、响应式网页的基础。
二、CSS 的发展历史CSS 的发展经历了多个版本的迭代，每一次更新都带来了更丰富的功能和更强大的样式控制能力：
CSS 1（1996 年）：第一个正式版本，定义了基础语法和核心样式属性，包括文字样式（字体、颜色）、盒模型（宽度、高度、边距）、对齐方式等，初步实现了样式与结构的分离。CSS 2（1998 年）：在 CSS 1 的基础上扩展了功能，新增了定位（position）、浮动（float）、媒体查询（media queries 雏形）、表格样式等重要特性，奠定了现代 CSS 布局的基础。CSS 2.1（2011 年）：对 CSS 2 的修订版本，解决了早期规范中的模糊定义和浏览器兼容性问题，明确了层叠机制和盒模型计算规则，成为被浏览器广泛支持的稳定版本。CSS 3（模块化发展）：与前两个版本不同，CSS 3 采用模块化开发，从 2001 年开始逐步发布各个模块（如选择器模块、颜色模块、布局模块等）。它新增了大量革命性特性：圆角（border-radius）、阴影（box-shadow）、渐变（gradient）、弹性布局（Flexbox）、网格布局（Grid）、动画（animation）等，极大地提升了网页的视觉表现力和布局灵活性。目前 CSS 3 仍在持续更新中，新的模块不断被标准化。CSS 的发展始终围绕“更精准的样式控制”“更灵活的布局能力”和“更好的开发体验”三大目标，适配了从 PC 端到移动端、从静态页面到动态应用的多样化需求。
三、CSS 的核心作用CSS 的核心价值在于对网页样式的全面控制，具体可分为以下几个方面：
（一）美化网页外观这是 CSS 最基础的功能，通过定义颜色、字体、间距等属性，让原本单调的 HTML 内容变得视觉丰富：
颜色控制：设置文字颜色（color）、背景颜色（background-color）、边框颜色（border-color）等，支持十六进制、RGB、HSL 等多种颜色格式。字体样式：指定字体类型（font-family）、大小（font-size）、粗细（font-weight）、风格（font-style）等，实现文字的多样化展示。文本排版：控制行高（line-height）、字间距（letter-spacing）、文本对齐（text-align）、文本装饰（text-decoration）等，优化阅读体验。视觉效果：添加圆角、阴影、渐变、透明度（opacity）等效果，增强元素的立体感和层次感。例如，通过以下 CSS 可将标题设置为蓝色、加粗、带阴影的样式：
h1 {
color: #1a73e8; /* 蓝色文字 */
font-size: 24px; /* 字体大小 */
font-weight: bold; /* 加粗 */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* 文字阴影 */
}
（二）控制页面布局CSS 提供了多种布局技术，能够精准控制元素在页面中的位置和排列方式，实现复杂的页面结构：
基础布局：通过盒模型（margin、padding、border）控制元素的间距和尺寸。传统布局：使用浮动（float）实现文字环绕或多列布局，使用定位（position）实现元素的精准定位（如固定导航栏）。现代布局：通过弹性布局（Flexbox）实现一维方向的灵活排列（如水平居中、均匀分布），通过网格布局（Grid）实现二维网格结构（如响应式卡片布局）。响应式布局：结合媒体查询（@media）根据设备屏幕尺寸（如手机、平板、PC）自动调整布局，确保在不同设备上都有良好的显示效果。例如，使用 Flexbox 实现导航栏的水平居中排列：
.nav {
display: flex; /* 启用弹性布局 */
justify-content: center; /* 水平居中 */
gap: 20px; /* 元素间距 */
}
（三）实现交互与动画CSS 支持通过伪类和动画属性实现简单的交互效果和动态视觉体验，减少对 JavaScript 的依赖：
交互反馈：通过 :hover（鼠标悬停）、:active（点击状态）、:focus（聚焦状态）等伪类，为元素添加状态变化样式（如按钮悬停变色）。过渡动画：使用 transition 属性实现元素样式的平滑过渡（如宽度变化、颜色渐变）。关键帧动画：使用 @keyframes 定义复杂动画序列，通过 animation 属性控制动画的播放、延迟、循环等。例如，为按钮添加悬停放大和颜色过渡效果：
.button {
padding: 10px 20px;
background-color: #4285f4;
transition: all 0.3s ease; /* 样式变化平滑过渡 */
}
.button:hover {
transform: scale(1.05); /* 放大 5% */
background-color: #1a73e8; /* 颜色加深 */
}
（四）样式复用与维护CSS 的“层叠”和“继承”特性使得样式可以被复用和管理，降低开发和维护成本：
样式复用：通过类选择器（class）为多个元素应用相同样式，避免重复代码。继承机制：子元素可以继承父元素的部分样式（如字体、颜色），减少样式定义的冗余。外部样式表：将 CSS 代码写入独立文件（.css），通过 标签引入多个页面，实现样式的统一管理和批量修改。四、CSS 基本语法CSS 的语法规则简洁清晰，主要由选择器和声明块两部分组成，基本结构如下：
选择器 {
属性名1: 属性值1;
属性名2: 属性值2;
/* 注释内容 */
}
（一）选择器（Selector）选择器的作用是指定需要应用样式的 HTML 元素，它决定了“样式给谁用”。CSS 提供了多种类型的选择器，以适应不同的选择需求：
1. 基础选择器
标签选择器：根据 HTML 标签名选择元素，作用于所有该标签的元素。 示例：p { color: gray; }（所有
标签文字设为灰色）。类选择器：通过元素的 class 属性选择元素，以 . 开头，可作用于多个元素。 示例：.highlight { background: yellow; }（所有 class="highlight" 的元素背景为黄色）。ID 选择器：通过元素的 id 属性选择元素，以 # 开头，作用于唯一元素（id 需唯一）。 示例：#logo { width: 200px; }（id="logo" 的元素宽度为 200px）。通配符选择器：以 * 表示，选择页面中所有元素，常用于重置默认样式。 示例：* { margin: 0; padding: 0; }（清除所有元素的默认边距和内边距）。2. 复合选择器
后代选择器：选择某元素的后代元素，用空格分隔。 示例：ul li { list-style: none; }（所有
- 中的
- 去除默认列表样式）。子元素选择器：选择某元素的直接子元素，用 > 连接。 示例：nav > a { text-decoration: none; }（