🎨 CSS 基础教学

从基础到高级，全面掌握 CSS 技术，构建现代化、响应式的网页界面

📚 系统学习

从核心概念到高级特性，循序渐进的学习路径

💻 实战项目

通过实际项目巩固所学知识，提高应用能力

🚀 现代技术

涵盖最新的 CSS 特性和最佳实践

🎯 目标明确

每个阶段都有明确的学习目标和成果

第一阶段：核心概念与基础 (The Core)

目标：理解 CSS 如何工作，掌握选择器、盒模型和基础排版，能美化简单的 HTML 页面。

第一章：CSS 初探

CSS 基础概念、引入方式、浏览器默认样式、语法结构、注释规范

第二章：选择器大权

基础选择器、组合选择器、属性选择器、伪类、伪元素、层叠与优先级

第三章：盒模型与背景

盒模型详解、box-sizing、外边距折叠、背景属性、边框与阴影

第四章：文本与字体排版

字体家族、字体大小单位、行高、字间距、文本装饰、现代排版特性

第二阶段：现代布局系统 (Modern Layouts)

目标：彻底放弃 Float，精通 Flexbox 和 Grid，能够构建任何复杂的二维/一维布局。

第五章：Flexbox 弹性盒子

Flex 容器与项目、主轴与交叉轴、对齐方式、灵活度控制、排序与换行

第六章：CSS Grid 网格布局

Grid 容器与项目、定义行列、间隙控制、区域命名、项目定位、隐式网格

第七章：定位与层级

position 属性、层叠上下文、z-index 陷阱、变换效果、3D 变换

第三阶段：响应式与适应性设计 (Responsive & Adaptive)

目标：让网站在手机、平板、桌面甚至超大屏幕上都能完美展示。

第八章：媒体查询

基础语法、断点策略、常见断点设置、设备适配、打印样式

第九章：现代适应性特性

容器查询、层级查询、作用域样式

第十章：现代单位与函数

视口单位、逻辑属性、数学函数、流体排版

第四阶段：动效、变量与高级主题 (Animation & Architecture)

目标：让网页“活”起来，并学会像工程师一样管理大型 CSS 代码库。

第十一章：过渡与动画

过渡效果、关键帧动画、动画控制、滚动驱动动画、性能优化

第十二章：CSS 变量与设计系统

定义与使用变量、变量作用域、深色模式、设计令牌

第十三章：高级视觉效果

滤镜、混合模式、遮罩、剪切路径

第五阶段：工程化与综合实战 (Engineering & Projects)

目标：掌握 CSS 架构方法论，进行性能调优，完成高质量商业级项目。

第十四章：CSS 架构与维护

BEM 命名方法论、其他方法论、原生 CSS 嵌套、代码拆分、工具链

第十五章：性能优化与调试

减少重绘与回流、关键 CSS、未使用的 CSS 检测、Chrome DevTools 调试

第十六章：综合实战项目

响应式企业官网、交互式仪表盘、创意个人作品集