属于 HTML 学习旅程学习旅程学习 CSS
免费的 CSS 互动课程。每节课你都要给真实的 HTML 加样式：选择器、盒模型、颜色、字体、flexbox、grid、响应式设计，边写边实时预览，学完还能获得免费证书。它是更完整的 HTML 学习旅程的一部分，所以 CSS 需要的 HTML 结构就在手边。
14,415+ 名学习者已加入
119 节课114 个挑战582 道测验题
- 适合初学者
AI 辅助编程帮助
动手实践的互动课程
检验所学的测验
免费结业证书
课程大纲
本单元属于 HTML 学习旅程。完整大纲还有更多单元：点击下方任意预览，即可在学习旅程页面查看。
- 单元 1基础知识60 节课
单元 2
使用 CSS 添加样式
开始本单元开始用颜色、布局和样式让网页焕发生机文本基础
8 节课1450颜色与背景
5 节课834单元 3
精通 CSS
开始本单元开始进一步提升你的 CSS 技能！结构伪类
5 节课432使用 CSS Grid 构建
4 节课426- 单元 4前端实践35 节课
- 单元 5JavaScript 实战27 节课
在实践中学习
编写真实代码、查询数据库、搭建网站、掌握 AI 提示词。我们的互动课程涵盖现代开发者需要的每一项技能。
打造你的连胜
坚持下去，看着自己不断进步！记录每天的编程习惯，用冻结天数保护连胜，每天打卡都能赢取奖励。
12 天连胜
明天再来，保持你的连胜！
January 2026
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
21
22
23
24
25
26
27
28
29
30
加倍或归零
第 5 天，共 7 天
连胜冻结
2 left
随时随地写代码
随时随地继续你的编程学习旅程！无需配置，无需下载：打开就能写代码。支持 iOS、Android 和 Web，评分高达 4.9 星。
你并不孤单
在全球排行榜上一较高下，邀请好友赢取奖励，为彼此的成就喝彩。和好友一起编程更有趣！
1
2
3
晋级区多种学习方式
阅读、收听、自我测验、问 AI，或者查阅学过的任何内容。每节课都配合你的节奏。
变量是一个有名字的容器，用来存储值，方便你在程序后面引用。
在 Python 中，创建变量只需写下名字、一个等号，再写上要存储的值。
值可以随时间变化。给这个名字重新赋值，它就会指向新的值。
获得证书
每完成一门课程都能获得证书。把证书添加到你的 LinkedIn 个人资料和简历中，向雇主展示你的编程能力。
结业证书Python 基础
添加到 LinkedIn为什么在 Coddy 学 CSS
- 在浏览器中写 CSS，看着页面实时变换样式。没有构建步骤，也不用配置编辑器。选择器或属性的每一处改动都会立即显示，让你看清每条规则到底起了什么作用。
- 核心 CSS：选择器和优先级、盒模型、定位、flexbox、CSS grid、过渡、媒体查询和响应式设计。都是每个前端开发者日常要用到的 CSS。
- AI 提示帮你调试那些总让人栽跟头的问题，比如意想不到的优先级、布局溢出、flexbox 的怪异表现，又不会直接剧透修复方法，让 CSS 变得直观，而不是像变魔术。
- 学完这个单元即可获得免费的 CSS 证书。和 HTML、JavaScript 课程自然衔接，打下完整的前端基础。
关于学习 CSS 的常见问题
CSS 是什么？
CSS（层叠样式表）是控制 HTML 页面外观的语言：颜色、字体、间距、布局、动画，以及在不同屏幕尺寸下的响应式表现。HTML 决定页面上有什么，CSS 决定它如何呈现。
CSS 难学吗？
基础 CSS（选择器、颜色、字体、盒模型）几个小时就能上手。难的部分在后面：优先级规则、flexbox 和 grid 布局，以及让页面在每种屏幕尺寸上都显示正确。课程会配合实时预览，一小步一小步地讲这些内容，让你清楚看到每条规则的作用。
应该先学 HTML 再学 CSS 吗？
是的。HTML 定义页面的结构，CSS 给它加样式。没有 HTML，就没有可以加样式的东西。所以这个 CSS 单元是 HTML 学习旅程的一部分：先学 HTML 基础单元，然后在旅程的大部分时间里给它加样式。
CSS、Flexbox 和 Grid 有什么区别？
Flexbox 和 Grid 是 CSS 中的布局模块：它们不是独立的技术，而是 CSS 的功能。Flexbox 最适合一维布局（一排卡片、一个导航栏）。Grid 最适合二维布局（整个页面、复杂的卡片布局）。大多数真实网站两者都用，课程会讲清楚什么时候该用哪一个。
可以免费在线学 CSS 吗？
可以。CSS 互动单元是免费的：完整的课程内容、编程练习、实时预览和证书。一切都在浏览器中运行，所以你不需要安装任何编辑器或工具就能开始。
学完 CSS 课程能获得证书吗？
能。完成 CSS 单元后，你会获得一张免费的结业证书。这是一份可验证的能力证明，可以写进简历或分享到 LinkedIn，和 HTML、JavaScript 证书一起组成你的前端作品集。
