CSS:网络样式设计语言
CSS 控制网页的每一个视觉细节——颜色、布局、间距、动画和响应式设计。它已从简单的表现层发展成为完整的设计系统语言,拥有容器查询、@layer、逻辑属性和 Houdini API 等现代特性,为开发者提供对渲染的精细控制。本课程涵盖 CSS 的全部内容,从编写第一个选择器到构建用于大型生产代码库的可扩展设计系统。
您将学到什么
您将从语法、选择器、颜色和排版开始,然后深入理解盒模型、显示属性和定位。接着学习用于标准和高级布局的 Flexbox 和 CSS Grid,应用响应式设计和媒体查询,使用 CSS 变量、自定义函数和设计令牌来实现可维护的主题化。您还将学习过渡、关键帧动画、变换、滤镜、混合模式和深色模式,以及使用 Sass、PostCSS 和 CSS-in-JS 等现代工具。最后探索 BEM CSS 架构、特定性和级联、容器查询、@layer 级联层、CSS Houdini 和性能优化。
学习路径
四十门课程跨越 A1 到 C1 级别。早期的 A1 和 A2 课程建立基础知识——选择器、盒模型、伪类、伪元素和单位。B1 课程涵盖 Flexbox、Grid、响应式设计、动画、DevTools 调试和 CSS 函数。B2 课程提升到高级 Flexbox 和 Grid、Sass、PostCSS、CSS-in-JS、设计令牌、CSS Shapes、逻辑属性、容器查询和 CSS Layers。三门 C1 课程——CSS Houdini、CSS Performance 和 CSS Future——涉及平台的前沿内容。
运作方式
每门课程分为简短、聚焦的课时,您可以在内置编辑器中直接完成,获得实时反馈。遇到问题时可随时获得 AI 助教帮助,课程设计采用循序渐进的方式,每个概念都强化前面的内容,为后续内容做准备。