CSS
现代网页的布局、色彩与动效。
CSS turns plain HTML into the pages you love to use. This track starts at your very first style rule and takes you to modern layouts: selectors and the cascade, the box model, typography for Persian text, oklch colors, Flexbox and Grid, responsive and right-to-left design, motion, custom properties, nesting, :has() and @layer.
Every lesson is short, practical and checked with quizzes, and the examples come from a dark, modern interface.
- 课时
- 25
- 时长
- 3 小时
- 级别
- 初级
本课程的内容目前为英文。
- 铜牌 可挑战
- 银牌 可挑战
- 金牌 未解锁
准备好证明自己了吗？
三场考试正等着你：铜牌、银牌和金牌。
学完后你将能够
- Read and write CSS rules, and predict which rule wins in the cascade
- Size and space elements confidently with the box model and modern units
- Build real layouts with Flexbox, Grid and subgrid
- Make pages that adapt to any screen and work in Persian right-to-left
- Add smooth, accessible motion and organise styles with modern CSS
学习旅程
1 第 1 单元CSS basics
What CSS is, how a rule is built, how selectors find elements, and how the cascade picks a winner.
0 / 42 第 2 单元The box model
Every element is a box: content, padding, border and margin, and how boxes flow on the page.
0 / 33 第 3 单元Text and color
Fonts and font stacks, comfortable Persian text, relative units, oklch colors and readable contrast.
0 / 34 第 4 单元Flexbox
Lay items out in a row or a column, align them, and share the space fairly.
0 / 35 第 5 单元Grid
Two-dimensional layouts with columns, rows, named areas and subgrid.
0 / 36 第 6 单元Responsive and RTL
Mobile-first media queries, container queries, fluid type with clamp() and logical properties for Persian layouts.
0 / 47 第 7 单元Motion and modern CSS
Transitions, keyframes, smooth and accessible motion, custom properties, nesting, :has() and @layer.
0 / 5