CSS 入门教程系列

本教程是 CSS 的完整 12 篇入门系列,参考 runoob.com/css3/ 的结构,面向零基础初学者。从 CSS 是什么、语法和选择器一路讲到 Flex/Grid 布局、响应式和 CSS 变量,每一篇都配有可直接复制运行的代码示例。

CSS(Cascading Style Sheets,层叠样式表)是给网页"化妆"的语言。HTML 决定页面有什么内容,CSS 决定这些内容长什么样——颜色、字号、间距、布局、动画,全都由它说了算。同一个 HTML,换一套 CSS,可以做出极简、科技、复古、可爱等截然不同的风格。

先看一段 CSS 长什么样

下面是一段给按钮加样式的 CSS,先感受一下它的写法:

/* 一段最简单的 CSS */
.btn {
  background: #4f8cff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  transition: background .2s;
}
.btn:hover {
  background: #3a78e0;
}

全部 12 篇子教程

建议按顺序学习,每天 1~2 篇,一周多即可入门。每篇都包含概念讲解 + 代码示例 + 常见坑。

1. CSS 简介 — 历史、作用、和 HTML 的关系
2. CSS 语法与引入方式 — 规则结构、注释、三种引入
3. CSS 选择器 — 标签、类、ID、伪类、伪元素、优先级
4. CSS 盒模型 — content、padding、border、margin
5. CSS 文本与字体 — font-family、字号、行高、对齐
6. CSS 颜色与背景 — hex、rgb、hsl、渐变
7. CSS Flexbox 弹性布局 — 一维布局神器
8. CSS Grid 网格布局 — 二维整页布局
9. CSS 定位 — static、relative、absolute、fixed、sticky
10. CSS 过渡与动画 — transition、transform、keyframes
11. CSS 响应式设计 — 媒体查询、移动优先
12. CSS 变量 — 自定义属性、主题切换

推荐学习路径

如果你是完全的零基础,建议按下面 4 个阶段推进,每个阶段都建立在前一个之上:

• 阶段 1 打地基:简介 → 语法 → 选择器。先搞懂 CSS 是什么、怎么写、怎么选中元素。
• 阶段 2 视觉基础:盒模型 → 文本字体 → 颜色背景。学会控制元素尺寸、文字样式和配色。
• 阶段 3 布局核心:Flex → Grid → 定位。学会把元素摆到正确的位置,这是 CSS 的重头戏。
• 阶段 4 进阶工程化:过渡动画 → 响应式 → 变量。让页面动起来、适配多端、可维护可主题化。

每篇都建议你边读边敲:把示例代码复制到本地,改一改、刷新看效果。CSS 是"调"出来的,光看不练永远学不会。

开始学习

准备好了吗?从第一篇开始 → CSS 简介