高级 CSS3 培训

1. 现代 CSS 与 CSS 演进

• 从 CSS3 到现代 CSS
• 当前 CSS 标准和浏览器实现
• 理解 CSS 规范和浏览器支持
• 渐进增强
• 功能检测和优雅降级
• 理解现代 CSS 生态系统

2. 高级选择器

• 高级属性选择器
• 结构伪类
• :is()
• :where()
• :not()
• :has() 和关系选择器
• 选择器特异性
• 在大型项目中管理特异性
• 现代选择器最佳实践

3. 现代颜色和视觉效果

• RGB、HSL 和现代颜色函数
• color()、lab()、lch()、oklab() 和 oklch()
• 相对颜色
• 透明度和 Alpha 通道
• 高级渐变
• 线性、径向和锥形渐变
• color-mix()
• 颜色插值
• CSS 滤镜和视觉效果
• 现代主题化和颜色系统

4. CSS 自定义属性和设计系统

• CSS 变量 / 自定义属性
• 变量和回退值
• 动态主题化
• 组件级定制
• 使用 CSS 的设计令牌
• 创建浅色和深色主题
• 使用 var()、@property 和类型化自定义属性
• 构建可维护的 CSS 设计系统

5. CSS 嵌套和级联管理

• 原生 CSS 嵌套
• 嵌套语法和最佳实践
• CSS 嵌套 vs. 预处理器
• 级联和继承
• 使用 @layer 的级联层
• 管理第三方 CSS
• @scope 和作用域样式概念
• 构建可预测的 CSS 架构

6. 使用 Flexbox 实现高级布局

• Flexbox 基础回顾
• 主轴和交叉轴
• 高级对齐
• 灵活尺寸
• gap
• 换行和排序
• 嵌套 Flexbox 布局
• 常见 Flexbox 模式
• 使用 Flexbox 的响应式组件

7. 高级 CSS Grid

• Grid 基础回顾
• 显式和隐式网格
• 高级轨道尺寸
• minmax()
• auto-fit 和 auto-fill
• min()、max() 和 clamp()
• 网格区域
• 响应式 Grid 布局
• 复杂页面布局
• CSS Subgrid
• 使用 Subgrid 实现对齐的组件布局

8. 容器查询和基于组件的响应式设计

• 为什么视口媒体查询并不总是足够
• 容器查询概念
• container-type
• @container
• 容器查询长度单位
• 组件驱动的响应式设计
• 容器查询样式查询
• 设计可重用的响应式组件
• 容器查询 vs. 媒体查询

9. 现代响应式设计

• 移动优先设计
• 响应式断点
• 流式排版
• 流式间距
• clamp()
• 现代视口单位：
  • svh
  • lvh
  • dvh
  • svw
  • lvw
  • dvw
• 动态视口考虑
• 容器相对单位
• 响应式图像和媒体
• 减少不必要的媒体查询

10. 逻辑属性和国际化

• 逻辑 vs. 物理 CSS 属性
• margin-inline / margin-block
• padding-inline / padding-block
• inset-inline / inset-block
• 逻辑尺寸
• 书写模式
• 从右到左 (RTL) 布局
• 构建具有国际适应性的界面

11. 现代排版

• 响应式排版
• 可变字体
• 字体加载考虑
• font-size-adjust
• 流式字体比例
• 文本换行和溢出
• text-wrap: balance
• text-wrap: pretty
• hyphens
• 现代排版最佳实践

12. 变换、过渡和动画

• 2D 和 3D 变换
• 过渡
• 关键帧动画
• 时间函数
• 动画合成
• 变换性能
• 滚动驱动动画
• animation-timeline
• View-timeline 概念
• 运动可访问性
• prefers-reduced-motion
• 性能考虑

13. 现代 CSS UI 功能

• 原生 CSS 对话框和弹出层
• 样式化交互式 UI 状态
• :popover-open
• :modal
• :focus-visible
• :target
• 表单状态样式
• accent-color
• appearance
• field-sizing
• 现代表单控件
• 构建仅使用 CSS 的可访问交互

14. 高级 CSS 函数

• calc()
• min()
• max()
• clamp()
• minmax()
• fit-content()
• color-mix()
• 相对颜色函数
• 组合函数实现流式布局
• 实用响应式设计模式

15. CSS 预处理器

• CSS 预处理器概述
• LESS
• 变量和混入
• 嵌套样式
• 函数和运算
• LESS vs. 现代原生 CSS
• 何时预处理器仍然有用
• 将预处理器功能迁移到原生 CSS

16. 设计和可访问性考虑

• 现代 CSS 最佳实践
• 可访问性优先的样式
• 键盘焦点状态
• :focus-visible
• 减少运动
• 对比度和颜色考虑
• 响应式文本和内容
• 图像上的文本
• 可访问的响应式组件
• 渐进增强

17. CSS 性能和可维护性

• 减少 CSS 复杂性
• 避免不必要的特异性
• 用于可维护性的级联层
• 可重用的实用和组件模式
• CSS 包含概念
• content-visibility
• 渲染和布局性能
• 减少布局偏移
• 组织大型 CSS 代码库
• 使用现代浏览器开发者工具调试 CSS

18. 实用现代 CSS 项目

参与者构建一个包含以下内容的响应式现代网页界面：

• CSS Grid
• Flexbox
• Subgrid
• 容器查询
• CSS 嵌套
• 自定义属性
• 级联层
• 现代选择器
• 流式排版
• 现代视口单位
• 响应式设计
• 现代颜色和渐变
• 动画和过渡
• 可访问性考虑
• 性能最佳实践