0Pricing
CSS Academy icon

CSS Academy

CSSWebFrontendBeginner

通过 CSS Academy 的全面课程,提升您的网页设计。

🤖 AI 驱动📚 40 门课程👥 10万+ 学习者⭐ 4.9 分
课程概览

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 助教帮助,课程设计采用循序渐进的方式,每个概念都强化前面的内容,为后续内容做准备。

开始学习 →

你的学习方式

🎯
互动课程
实时反馈的动手编程练习
🤖
AI 导师
遇到困难时立即获得 AI 帮助
💻
内置编辑器
直接在浏览器中编写并运行代码
🏆
证书
完成课程后获得证书
课程

40 门课程

CSS Academy 学习路径中的所有课程。

01

CSS 语法与选择器

A13 节课

学习 CSS 的基础语法,以及如何使用标签、类、ID、属性和组合选择器定位 HTML 元素。

02

颜色与背景

A14 节课PRO

掌握 CSS 颜色格式和背景属性,创建视觉效果丰富的网页。

03

字体与文本

A14 节课PRO

使用字体、字号、字重、对齐方式和自定义字体加载技术设置文本内容的样式。

04

盒模型

A24 节课PRO

理解每个 HTML 元素都是一个盒子,并控制其大小、间距、边框和阴影。

05

显示属性

A24 节课PRO

使用块级、行内和行内块显示模式,控制元素在文档中的流动方式。

06

定位基础

A24 节课PRO

使用 CSS 的 position 值将元素移出正常文档流,并使用 z-index 控制层叠关系。

07

CSS 单位与值

A24 节课PRO

掌握绝对单位和相对 CSS 单位,创建可伸缩且响应式的布局。

08

伪类

A24 节课PRO

使用伪类,根据元素的状态、位置以及与其他元素的关系定位元素。

09

伪元素

A24 节课PRO

使用 CSS 伪元素插入装饰性内容,并设置元素特定部分的样式。

10

Flexbox 基础

B14 节课PRO

使用 CSS Flexbox 构建一维布局,控制方向、对齐方式和换行。

11

CSS Grid 基础

B14 节课PRO

使用轨道、间距和模板区域,通过 CSS Grid 创建强大的二维布局。

12

响应式设计

B14 节课PRO

使用流式宽度和响应式技术,构建能够优雅适应各种屏幕尺寸的布局。

13

媒体查询

B14 节课PRO

使用媒体查询,根据屏幕尺寸、方向和用户偏好应用不同样式。

14

CSS 变量

B14 节课PRO

使用可复用且可动态更新的自定义属性,创建易于维护的样式表。

15

CSS 过渡

B14 节课PRO

使用 transition 简写属性和时间函数,为 CSS 属性添加平滑的动画状态变化。

16

CSS 动画与关键帧

B14 节课PRO

使用 @keyframes 和 animation 简写属性创建复杂的多步骤动画。

17

CSS 变换

B14 节课PRO

使用 CSS 变换函数,在二维和三维空间中移动、旋转、缩放和倾斜元素。

18

优先级与层叠

B14 节课PRO

深入理解当多条规则定位同一元素时,CSS 如何决定哪种样式生效。

19

CSS 函数

B14 节课PRO

使用强大的 CSS 函数进行动态计算、流式尺寸设置、网格布局和现代颜色处理。

20

滤镜与混合模式

B14 节课PRO

使用 CSS 滤镜和混合模式合成,为元素和图像应用视觉效果。

21

滚动与溢出

B14 节课PRO

控制滚动行为、吸附点和溢出裁剪,打造流畅的用户体验。

22

深色模式与配色方案

B14 节课PRO

使用 CSS 变量、color-scheme 和媒体查询,实现自动和手动深色模式。

23

CSS 调试与 DevTools

B14 节课PRO

掌握浏览器 DevTools,检查和调试 CSS 布局、动画,并理解计算后的样式。

24

高级 Flexbox

B24 节课PRO

通过高级 Flexbox 对齐、排序和现实场景中的布局模式,进一步掌握 Flexbox。

25

高级 Grid

B24 节课PRO

通过命名线、自动放置、子网格和复杂模式,充分发挥 CSS Grid 的能力。

26

CSS 架构与 BEM

B24 节课PRO

使用架构模式、命名约定和文件结构,组织大型 CSS 代码库。

27

CSS 形状与 Clip-path

B24 节课PRO

使用 clip-path 和 CSS Shapes 创建非矩形元素及文本环绕形状。

28

CSS 逻辑属性

B24 节课PRO

使用逻辑属性编写与文字方向无关的 CSS,使其适用于从左到右和从右到左的语言。

29

容器查询

B24 节课PRO

使用容器查询,根据组件容器的大小而非视口大小应用样式。

30

CSS 层(@layer)

B24 节课PRO

使用 @layer 明确管理 CSS 层叠优先级,消除大型代码库中的优先级冲突。

31

Sass 预处理器

B24 节课PRO

使用 Sass 预处理器,通过变量、嵌套、混入和函数增强 CSS 编写能力。

32

PostCSS 与 CSS 工具链

B24 节课PRO

使用 PostCSS 插件转换并优化 CSS,实现自动添加前缀、压缩和自定义转换。

33

CSS-in-JS 模式

B24 节课PRO

探索组件作用域样式:styled-components、Emotion、CSS Modules 和 Vanilla Extract。

34

设计令牌与主题

B24 节课PRO

使用设计令牌和基于 CSS 自定义属性的多品牌主题,构建可扩展的设计系统。

35

CSS 测试

B24 节课PRO

通过回归测试、单元测试和无障碍审计,确保 CSS 的正确性和视觉一致性。

36

CSS 组件模式

B24 节课PRO

使用纯 CSS 技术构建适用于生产环境的 UI 组件,例如卡片、模态框、下拉菜单和选项卡。

37

现代布局模式

B24 节课PRO

使用现代 CSS Grid 和 Flexbox 技术,实现高级且贴近实际的布局模式。

38

CSS Houdini

C14 节课PRO

使用 JavaScript 和 Houdini API 扩展 CSS 本身,实现自定义属性、绘制和布局。

39

CSS 性能

C14 节课PRO

通过理解浏览器渲染流水线,优化 CSS 的交付和渲染性能。

40

CSS 的未来

C14 节课PRO

探索 CSS 的前沿能力:原生嵌套、:has()、作用域样式和视图过渡。

常见问题

常见问题解答

CSS Academy 课程免费吗?

免费。你可以免费开始 CSS Academy 课程并完成它的所有互动课程。可选的 PRO 订阅解锁高级 AI 工具和可分享的证书。

学习 CSS 需要有先前的经验吗?

不需要。课程从基础开始,逐步进阶到更高难度的主题,所以即使你没有任何 CSS 基础也可以开始。

我在 CoddyKit 上怎样学习 CSS?

学以致用。简洁的互动课程将清晰的讲解与实时动手编程练习结合,24/7 AI 导师在你遇到困难时提供个性化帮助。

完成 CSS Academy 后能获得证书吗?

可以。PRO 学员可以参加考试,获得 CSS Academy 课程的可分享的完成证书,其中包含可验证的代码。

我能在手机上学习 CSS 吗?

可以。CoddyKit 支持网页版和原生 iOS、Android 应用,你可以在任何设备上学习 CSS,进度会自动同步。

立即开始 CSS Academy

加入数千名学习者,通过 AI 驱动的课程掌握编程。

免费开始 →浏览所有课程