一、CSS 基础语法与样式应用

• 掌握三种引入方式：内联样式、内部样式表 与 外部样式表，并明确其优先级关系。

• 深入学习 基本语法结构：选择器、声明块、属性与值。重点攻克 常用选择器，包括元素、类、ID、通配符选择器，以及组合选择器（后代、子代、相邻兄弟、通用兄弟）。

• 理解 伪类（如 :hover、:nth-child）和 伪元素（如 ::before、::after）的使用场景。

• 掌握 颜色表示法（十六进制、rgb、hsl）、字体（font-family、font-size、font-weight）、文本属性（text-align、line-height、text-decoration）等基础样式设置。

二、盒模型、布局系统与定位机制

• 掌握 CSS 盒模型的核心概念：content、padding、border、margin 及其相互影响。学习处理 margin 折叠 与 塌陷 等常见问题。熟练使用 box-sizing 控制尺寸计算方式。

• 学习 display 属性（block、inline、inline-block、none）对元素显示模式的影响。

• 重点掌握现代布局方案：Flexbox 弹性布局，深入理解容器与项目的主轴/交叉轴、对齐方式（justify-content、align-items）、换行（flex-wrap）等；以及 Grid 网格布局，学习定义网格线、轨道、区域，实现二维复杂布局。

• 掌握 定位（position） 体系：静态（static）、相对（relative）、绝对（absolute）、固定（fixed）和粘性（sticky）定位，并理解 z-index 在层叠上下文中的作用。

三、响应式设计、视觉效果与工程化实践

• 学习 响应式 Web 设计（RWD） 的核心思想，掌握 媒体查询（@media） 的编写，根据视口宽度应用不同样式。

• 理解移动优先的设计原则，并学会使用 相对单位（em、rem、vw、vh、%）构建灵活的页面结构。

• 在视觉表现方面，深入学习 背景属性（background-color、background-image、background-size、background-position、渐变 linear-gradient）、边框（border-radius 圆角、border-image）和 阴影（box-shadow、text-shadow）。

• 掌握 2D/3D 变换（transform）（平移、旋转、缩放、倾斜）与 过渡（transition） 实现平滑动画效果，并学习使用 关键帧动画（@keyframes）创建复杂 CSS 动画。

• 了解 BEM 等 CSS 命名规范以提升代码可维护性，学习使用 CSS 自定义属性（变量） 统一管理主题色、间距等设计令牌。

• 关注 CSS 性能优化（避免过度重排重绘）、可访问性（a11y，如对比度、语义化）以及大型项目中的 CSS 组织方法论（如 SMACSS、OOCSS）。