1. CSS 是什么？

本节目标：搞清楚 CSS 是什么、能做什么，以及它和 HTML 的关系。

一句话理解 CSS

CSS 全称 Cascading Style Sheets，中文叫「层叠样式表」。

它是一门样式语言，专门用来描述 HTML 元素该怎么显示。简单说：HTML 负责「内容写什么」，CSS 负责「内容长什么样」。

比如一个 <h1> 标签，HTML 只告诉你「这是标题」，CSS 才能决定标题是红色还是蓝色、居中还是靠左、字体多大。

CSS 能做什么

CSS 的本事比你想的大得多。颜色、字体、布局、间距、动画、响应式适配，这些都能做。

具体点说：

文字颜色、背景、渐变
字体类型、大小、粗细、行高
元素放哪、怎么排列
内边距、外边距、边框
过渡、变换、帧动画
不同屏幕尺寸下自动调整

Tip

现在 CSS 已经能做很多以前需要 JavaScript 才能做的事，比如简单的动画和交互效果。

CSS 与 HTML 的关系

一个完整的网页，至少需要 HTML 和 CSS 配合。我们来看一个直观的例子：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>CSS 与 HTML</title>
  <style>
    /* 这是 CSS，控制下面的 HTML 元素怎么显示 */
    h1 {
      color: #2c3e50;
      text-align: center;
    }
    p {
      font-size: 16px;
      color: #666;
    }
  </style>
</head>
<body>
  <!-- 这是 HTML，定义页面内容 -->
  <h1>Hello CSS</h1>
  <p>CSS 让这段文字变成了灰色，字号 16px。</p>
</body>
</html>

在这个例子里，<h1> 和 <p> 是 HTML 提供的内容，而 color、text-align、font-size 这些样式规则来自 CSS。

没有 CSS 的 HTML，就像没装修的毛坯房——结构在，但不好看。

CSS 的历史

CSS 从诞生到现在，经历了几个重要阶段：

1996 年：CSS1 发布，定义了基本的字体、颜色、间距
1998 年：CSS2 发布，增加了定位和 z-index
2011 年：CSS2.1 定稿，成为长期稳定版本
至今：CSS3 以模块化方式持续演进，不再有 CSS4

Note

现在大家说的「CSS3」其实是个历史称呼。官方已经没有 CSS3、CSS4 这种大版本号了，而是拆成独立模块各自升级，比如 CSS Color Module Level 5。

CSS 的工作原理

一句话概括：选择元素，然后声明样式。

浏览器干的事：

加载 HTML，构建 DOM 树
加载并解析 CSS 规则
把规则匹配到对应的 DOM 节点
计算最终样式，渲染页面

你写的每条 CSS 规则，浏览器都会拿来跟 HTML 元素匹配。匹配上的生效，匹配不上的忽略。

学完这章你应该知道

CSS 是样式语言，跟 HTML 分工明确
CSS 能控制网页的外观、布局、动画
CSS 和 HTML 配合才能做出好看的页面
CSS 现在以模块化方式持续演进，没有大版本号了

下一章我们动手写第一个 CSS 程序，感受一下 CSS 到底怎么用起来。