学 CSS: 编程课程 — 手机上的 CSS 编程练习，配备实时 HTML 和 CSS 编辑器

有三个方面会导致大多数初学者遇到布局问题。盒模型：默认情况下，内边距和边框会加到元素声明的宽度上，因此盒子的实际宽度会大于你输入的数值。特异性：其他地方更具体的规则会悄悄覆盖你的规则。还有错误的布局工具：试图用为单行设计的 flexbox 强行实现二维页面布局。学 CSS: 编程课程 按照这个顺序安排课程，让你依次理解这三个问题，而不是靠反复试错才发现它们。

了解一点就够了，你也可以在学习课程的同时掌握它，不必先全部学完。CSS 用来描述 HTML 元素的呈现方式，因此只要知道页面由元素组成——标题、段落、列表和图片——就有足够的基础开始学习。应用的实时编辑器会同时显示 HTML 和 CSS，因此从第一课开始，你就能直观看到两者之间的联系。

Flexbox 沿一条线排列项目——例如一排按钮或导航栏——并沿这条轴分配剩余空间。Grid 同时定义行和列，因此你可以把项目放入真正的二维网格中，而不是用边距一点点调整位置。页面级布局通常使用 grid，其中的一排控件通常使用 flexbox；课程会先教会你两者，再让你自行决定使用哪一个。

CSS 解决冲突规则时，先比较特异性，再比较源代码顺序。ID 选择器优先于类选择器，类选择器优先于普通元素选择器，无论它们谁在样式表中出现得更靠后。这就是为什么一条看起来正确的规则，仍可能输给你在其他地方遗忘的规则——应用中的“特异性与层叠”课程正是为了让这个顺序变得可预测，而不再神秘。

值得，直接学习 CSS 仍然很有价值。像 Tailwind 这样的实用工具框架建立在 CSS 概念之上，而不是对它们的替代——当某个工具类没有按预期工作时，理解底层的盒模型、特异性和布局系统，才能帮你解决问题。CSS 也是最容易快速看到成果的技能之一，因为每次修改都会立即显示在页面上。

坚持学习比累计学习时长更重要。大多数初学者每天完成简短课程后，只需几周就能自信地处理选择器、间距、字体排版，以及基础的 flexbox 或 grid 布局，远早于处理特异性边界情况或容器查询等更复杂的内容。应用中的 20 个引导项目正是用来专门练习这一阶段的，每次完成一个真实页面。

应用可在 App Store 和 Google Play 免费下载。第一门课程、第一个引导项目、两个寻 bug 任务和实时编辑器免费提供，并包含每日 AI Mentor 使用额度。Pro 可解锁全部课程、全部 20 个项目和 20 个任务、证书考试以及不限量的 AI Mentor 使用权限，同时移除广告。

学 CSS: 编程课程 可在 App Store 上为 iPhone 和 iPad 提供，也可在 Google Play 上为 Android 提供，界面支持 22 种语言，年龄评级为 4+。它适合完全没有基础的初学者、想自己为页面添加样式的设计师，以及准备参加前端面试的转行者或学生。

即时预览明确需要网络连接来渲染 HTML 和 CSS，应用会直接说明这一点，而不是悄悄降低功能。课程文本和阅读材料经过设计，即使网络不稳定也能继续使用，足以应对大多数通勤场景；但该编辑器不提供完全离线的实时预览体验。

学 CSS: 编程课程 通过 App Store 在 iOS 上运行，也通过 Google Play 在 Android 上运行，应用支持 22 种语言，评级为 4+。通过最终考试后，应用会颁发课程完成证书——它可以证明你完成过相关学习，也能和你可以详细介绍的引导项目一起写进简历，但并不属于经过认证的资格证书。