学 CSS - 编程课程

逐步学习 CSS，从第一个选择器开始，到响应式布局、动画和现代网页设计。在手机上输入一行 CSS，看着页面发生变化：编辑器将 HTML 和 CSS 并排显示，并提供实时预览。

这套 CSS 教程为初学者打造，并会随着你的学习不断深入。每门课程聚焦一个真实主题，每节课都很简短，编辑器始终只需轻点一下即可打开，让你练习刚刚读到的内容，而不是只停留在阅读上。

课程内容

• 40 门课程和 159 节短课，涵盖从初级（A1）到高级（C1）

• 支持实时预览的 HTML 和 CSS 编辑器，可快速进行实验并创建自己的页面

• 20 个循序渐进的网页设计项目：工具栏、卡片网格、粘性页眉、脉冲按钮等

• 20 个找 bug 任务：比所在列宽 42px 的卡片、在手机上永远不会触发的媒体查询、卡在页面后面的模态框

• 期末考试和结业证书

• 应用支持 22 种语言

从初学者到高级的完整学习路径

• 语法和选择器、颜色、背景与排版

• 盒模型、display、定位、单位和值

• 伪类和伪元素

• Flexbox 基础与高级 Flexbox

• Grid 基础、网格区域与高级网格布局

• 响应式设计、媒体查询与容器查询

• 自定义属性（变量）、函数、优先级、层叠与 @layer

• 过渡、变换、关键帧动画、滤镜与混合模式

• 深色模式与配色方案、滚动与溢出、clip-path 与形状

• 使用 DevTools 调试、BEM 架构、Sass、PostCSS 与设计令牌

• 组件模式、现代布局模式、性能与 Houdini

让练习真正记住

• 用测验检查你的学习成果

• 包含 69 条属性、选择器和布局语法的速查表

• 50 道面试题及清晰答案，适合在参加前端或网页开发面试前使用

• 可打开和编辑的短代码示例库

• 保存自己的代码、笔记和收藏课程

• World Coding Challenge：每天三轮全球挑战，使用 Python、JavaScript 和其他语言解题

• 连续学习记录、XP、排行榜和每日提醒，帮助你坚持练习

AI 导师

• 在布局或属性上遇到困难？向 AI 导师询问概念、错误或你自己的代码

• AI 练习场：描述一个页面，看着 HTML 和 CSS 被构建出来

• 免费用户每天可使用一定额度的 AI；Pro 用户可无限使用

适合人群

• 正在迈出网页开发第一步的完全初学者

• 想自己设计页面，而不是将设计稿交给他人实现的设计师

• 想在网页设计课程之外获得额外练习的学生

• 了解一些 HTML 和 CSS，并希望终于弄懂 Flexbox 和 Grid 的开发者

• 为前端工作做准备的转行者

免费版和 Pro

第一门课程、第一个指导项目、两个任务和实时编辑器均可免费使用，并提供每日 AI 导师额度。Pro 可解锁所有课程、全部项目和任务、证书考试及无限 AI，并移除广告。

今天就开始，按照自己的节奏学习 CSS，几分钟内设计出你的第一个页面。