认识 CSS - CSS 教程

讲解

CSS（Cascading Style Sheets，层叠样式表）是描述网页外观的语言。HTML 负责「页面上有什么内容」，CSS 负责「内容长什么样」：颜色、字体、间距、布局、动画，全都由 CSS 控制。这种「结构与表现分离」的设计是 Web 的基石——同一份 HTML，换一套 CSS 就能从朴素文档变成精致杂志，著名的 CSS Zen Garden 网站用同一个 HTML 文件展示了几百种截然不同的设计。

CSS 由 W3C 标准化，1996 年发布 CSS 1（字体、颜色、间距），1998 年的 CSS 2 加入了定位，之后标准拆成一个个独立演进的模块（选择器、盒模型、Flexbox、Grid……），统称 CSS 3。如今主流浏览器（Chrome、Edge、Firefox、Safari）都是「常青浏览器」，自动更新、快速跟进标准，2015 年以后的新特性大多可以放心使用。学习 CSS 不再像十年前那样需要大量兼容性 hacks。

名字里的「层叠」（Cascading）指 CSS 的核心机制：多条规则可能同时命中同一个元素，浏览器按「来源 → 优先级（specificity）→ 书写顺序」决定谁生效；同时很多属性会从父元素「继承」给子元素（比如字体颜色）。理解层叠与继承，就理解了 CSS 一半的心智模型，后面的章节会反复用到。本教程共 24 章，从语法、盒模型一路学到 Flexbox、Grid、响应式和动画，每章都有可抄可改的示例。

示例

先直观感受一下 CSS 能做什么。左边是纯 HTML，右边是同一份 HTML 加上几行 CSS 之后的样子：

<!-- 一份没有任何样式的 HTML -->
<article>
  <h1>我的第一篇文章</h1>
  <p>纯 HTML 只有浏览器默认样式：黑色文字、白色背景、左对齐。</p>
</article>

/* 加上 CSS：居中卡片、大标题、彩色文字 */
article {
  max-width: 480px;
  margin: 40px auto;
  padding: 24px;
  background: #f7f4ee;
  border-radius: 12px;
}
h1 {
  color: #b3541e;
  font-size: 24px;
}
p {
  color: #555;
  line-height: 1.8;
}

HTML 完全没动，只加了 CSS，页面就从「裸文档」变成了「卡片」。这就是表现层的威力。

常见坑

把 CSS 当编程语言学：CSS 是声明式的规则描述语言，没有变量循环（现代 CSS 有了自定义属性和少量函数），学习重点是「规则如何命中元素、属性如何生效」，不是算法。
以为记住所有属性才算学会：CSS 属性有几百个，没人记得全。掌握盒模型、布局、层叠这些核心机制，具体属性随用随查 MDN。
出问题就加 !important：这是对层叠机制投降的行为，会让样式越来越不可维护。正确做法是搞懂为什么规则没生效（通常是优先级或顺序问题）。
忽视浏览器差异：老教程里的 IE 兼容包袱可以放下了，但新特性仍要查 caniuse.com 确认支持度，尤其是 Safari 跟进偏慢。

小结

CSS 控制网页的表现层，与 HTML 的结构分离；标准模块化演进，现代浏览器支持良好；「层叠」与「继承」是贯穿全教程的核心机制。下一节从 CSS 的语法和选择器开始。