CSS 是什么？

先看一个网页：

如果所有网站都像上图那样单调乏味，互联网将变得十分无趣。而通过使用 CSS，你可以完全掌控浏览器展示 HTML 元素的方式，自由调整其外观和布局。

CSS 语法

CSS 是一门基于规则的语言，用来定义网页中元素或元素组的样式。通过制定规则，你可以为页面中的特定元素设置外观和行为。

例如，假设你希望将网页上的主标题（h1）设置为大字号的红色文本。以下是一个简单的 CSS 规则实现：

h1 {

  color: red;

  font-size: 5em;

}

在这个示例中，CSS 规则由以下部分组成：

1. 选择器：h1 表示选择网页中的一级标题元素，你希望对它应用样式。

2. 大括号 { }：包裹住样式声明。

3. 声明：在大括号内是一组“属性—值”对，定义了要应用的样式。例如：

• color: red; 将 h1 的文字颜色设置为红色。

• font-size: 5em; 将 h1 的文字大小设置为 5 倍默认字体大小。

每个声明由属性（例如 color 或 font-size）和其对应的值（例如 red 或 5em）组成，用冒号分隔，并以分号结束。通过这种方式，CSS 规则清晰地描述了要如何为指定的 HTML 元素赋予样式。

CSS 模块

CSS 是一门强大且灵活的语言，它由多个模块（modules）构成，帮助开发者为网页上的各种元素设置样式。这些模块是 CSS 的核心组成部分，每个模块都聚焦于特定的功能。例如，有专门处理背景和边框的模块、布局的模块、以及动画的模块等等。

如果你想深入了解某个模块，比如 Backgrounds and Borders（背景和边框），可以在 MDN 文档 上找到相关参考页面。通过这些页面，你可以了解：

• 模块的用途和概念；

• 它包含的所有属性（如 background-color 和 border-color）；

• 其他相关的特性和技巧；

• 技术规范的官方定义。

模块的意义

虽然你在学习初期不需要过于关注 CSS 的内部组织方式，但理解模块化设计会帮你更系统地掌握 CSS。例如，通过学习 Backgrounds and Borders 模块，你会发现 background-color 和 border-color 属性在逻辑上是相似的——它们的格式和用途确实具有共通性。这种归纳能力会让你的学习事半功倍。

CSS 规范

所有的 Web 标准技术（如 HTML、CSS 和 JavaScript）都由规范化组织定义在文档中，这些文档被称为 规范（specifications，简称 specs）。

CSS 的规范由 W3C（万维网联盟）中的一个名为 CSS 工作组（CSS Working Group） 的团体负责制定和更新。这个团体的成员包括浏览器厂商、技术公司代表以及一些独立的受邀专家。

CSS 新特性的来源

CSS 的特性并非一成不变，而是不断发展，以下是新特性开发的几种常见原因：

• 浏览器厂商：有时浏览器厂商会推动开发新功能，以提升用户体验。

• 开发者需求：Web 设计人员和开发者可能请求增加新的功能，以满足实际开发需求。

• 内部讨论：CSS 工作组内部会针对 Web 的发展趋势展开讨论，从而引入新特性。

尽管 CSS 不断演进，但其一个核心原则始终未变：向后兼容性。即使是 20 多年前（如 2000 年）创建的网站，今天依然可以正常显示。

作为 CSS 新手，你可能会发现直接阅读规范文档（specs）非常困难。原因是这些文档的目标读者是工程师或浏览器开发者，而非普通的 Web 开发者。

浏览器支持

当 CSS 特性被写入规范后，并不意味着它立即可以被所有浏览器使用。只有当一个或多个浏览器实现了该特性，我们才能将其应用到实际开发中。浏览器通过解释 CSS 文件中的指令，将样式渲染到屏幕上。但是在浏览器全面支持一个新特性之前，往往会有一个过渡期：一些浏览器可能已经实现了该特性，而另一些还没有。所以了解浏览器支持状态对于开发者来说非常重要。

每个 CSS 属性的浏览器支持情况都可以在 MDN 文档的“浏览器兼容性”表格中找到。例如，查看 CSS 属性 font-family 的浏览器兼容性表格，可以看到如下结果：