课程结构

入门指南

• 课程导览

你可能错过的 CSS 新特性

• 新增与增强的属性
• 新增与扩展的选择器
• 元素样式的改进
• 布局与滚动行为的新旧属性更新
• 现代响应式设计功能
• CSS 组织方式的范式转变
• 挑战：新闻订阅表单
• 解答：新闻订阅表单
• 测验：你可能错过的 CSS 特性

使用 :has() 选择器实现可复用组件的规模化

• :has() 选择器的新特性概览
• :has() 选择器入门介绍
• :has() 选择器的局限性
• 利用 :has() 实现主动式组件样式设计
• 英雄区块的替代网格布局
• 使用数量查询动态切换网格布局
• 如何安全地在当前项目中使用 :has()
• :has() 的未来发展方向
• 挑战：按钮设计变体
• 解答：按钮设计变体
• 测验：使用 :has() 选择器实现可复用组件的规模化

容器查询的实际应用

• 容器查询概览
• 容器查询与视口媒体查询对比
• 定义容器查询
• 升级卡片组件
• 容器查询与流体字体
• 构建健壮的可复用组件
• 协调组件各部分的可见性
• 使用命名容器进行目标查询
• 利用容器查询提升无障碍体验
• 容器查询的支持现状与未来发展
• 挑战：让按钮响应式
• 解答：让按钮响应式
• 测验：容器查询的实际应用

无需媒体查询的响应式 CSS 布局

• 响应式设计概览
• 响应式间距
• 间隙与布局间距
• 响应式尺寸调整
• 使用 Grid 和 Flexbox 构建响应式布局
• 降低布局溢出风险
• 响应式容器
• 挑战：使用 Flexbox 添加响应性
• 解答：使用 Flexbox 添加响应性
• 测验：无需媒体查询的响应式 CSS 布局