什么是 CSS？

正如我们之前提到的，CSS 是一种用于指定文档如何呈现给用户的语言 — 如何对其进行样式化、布局等。

**文档**通常是一个使用标记语言构建的文本文件 — HTML 是最常见的标记语言，但您也可能会遇到其他标记语言，例如 SVG 或 XML。

向用户**呈现**文档意味着将其转换为您的受众可以使用的一种形式。浏览器，如 Firefox、Chrome 或 Edge，旨在以视觉方式呈现文档，例如在计算机屏幕、投影仪或打印机上。

CSS 可用于非常基本的文档文本样式 — 例如，用于更改标题和链接的 颜色 和 大小。它可用于创建布局 — 例如，将单列文本转换为具有主要内容区域和相关信息侧边栏的布局。它甚至可以用于诸如 动画 之类的效果。请查看本段中的链接以获取具体示例。

CSS 是一种基于规则的语言 — 您通过指定应应用于网页上特定元素或元素组的样式组来定义规则。

例如，您可以决定将页面上的主标题显示为大型红色文本。以下代码显示了一个非常简单的 CSS 规则，该规则将实现上述样式

h1 {
  color: red;
  font-size: 5em;
}

• 在上面的示例中，CSS 规则以 选择器 开头。这会选择我们将要设置样式的 HTML 元素。在本例中，我们正在设置一级标题 (h1) 的样式。
• 然后我们有一组花括号 { }。
• 花括号内将包含一个或多个**声明**，这些声明采用**属性**和**值**对的形式。我们在冒号前指定属性（在上面的示例中为color），在冒号后指定属性的值（在本例中为red）。
• 此示例包含两个声明，一个用于color，另一个用于font-size。每对声明都指定了我们正在选择的元素（在本例中为h1）的一个属性，然后指定我们希望赋予该属性的值。

CSS 属性具有不同的允许值，具体取决于指定哪个属性。在我们的示例中，我们有color属性，它可以采用各种颜色值。我们还有font-size属性。此属性可以采用各种尺寸单位作为值。

CSS 样式表将包含许多这样的规则，按顺序一行一行地编写。

h1 {
  color: red;
  font-size: 5em;
}

p {
  color: black;
}

您会发现，您会很快学会一些值，而另一些值则需要查找。MDN 上的各个属性页面提供了一种快速查找属性及其值的方法，当您忘记或想知道还可以使用哪些其他值时。

由于可以使用 CSS 样式化如此多的内容，因此该语言被分解成多个模块。在您探索 MDN 时，您会看到对这些模块的引用。许多文档页面都围绕某个特定模块进行组织。例如，您可以查看 MDN 对背景和边框模块的参考，以了解其用途及其包含的属性和功能。在该模块中，您还会找到一个指向定义该技术的规范的链接（另请参见下面的部分）。

在此阶段，您无需过多担心 CSS 的结构；但是，例如，如果您知道某个属性可能存在于其他类似内容中，并且因此可能在同一个规范中，那么它可以使查找信息变得更容易。

举一个具体的例子，让我们回到背景和边框模块——您可能会认为background-color和border-color属性在此模块中定义是合乎逻辑的。而且你是对的。

所有 Web 标准技术（HTML、CSS、JavaScript 等）都在称为规范（或“规范”）的大型文档中定义，这些文档由标准组织（如W3C、WHATWG、ECMA或Khronos）发布，并精确定义了这些技术应该如何运行。

CSS 也不例外——它由 W3C 内的一个名为CSS 工作组的团队开发。该小组由浏览器供应商和其他对 CSS 感兴趣的公司代表组成。还有一些其他人，称为受邀专家，充当独立的声音；他们与成员组织没有关联。

新的 CSS 功能由 CSS 工作组开发或指定——有时因为特定浏览器有兴趣拥有某些功能，有时因为 Web 设计师和开发人员要求某个功能，有时因为工作组本身确定了某个需求。CSS 不断发展，新的功能不断涌现。但是，CSS 的一个关键点是，每个人都非常努力地避免以破坏旧网站的方式更改内容。使用当时有限的 CSS 在 2000 年构建的网站今天仍然可以在浏览器中使用！

作为 CSS 的新手，您可能会发现 CSS 规范令人不知所措——它们旨在供工程师用来在用户代理中实现对功能的支持，而不是供 Web 开发人员阅读以了解 CSS。许多经验丰富的开发人员更愿意参考 MDN 文档或其他教程。但是，值得知道这些规范的存在，并了解您正在使用的 CSS、浏览器支持（见下文）和规范之间的关系。

在指定 CSS 功能后，只有当一个或多个浏览器实现了该功能时，它对我们开发网页才有用。这意味着代码已被编写为将我们 CSS 文件中的指令转换为可以输出到屏幕上的内容。我们将在课程CSS 的工作原理中更详细地介绍此过程。所有浏览器同时实现某个功能的情况并不常见，因此通常存在一个差距，您可以在某些浏览器中使用 CSS 的某些部分，而在其他浏览器中则无法使用。因此，能够检查实现状态非常有用。

浏览器支持状态在每个 MDN CSS 属性页面上的名为“浏览器兼容性”的表格中显示。查阅该表中的信息，以检查该属性是否可以在您的网站上使用。例如，请参阅CSS font-family 属性的浏览器兼容性表。

根据您的需求，您可以使用浏览器兼容性表检查此属性在各种浏览器中的支持情况，或检查您的特定浏览器和您拥有的版本是否支持该属性，或者在您使用的浏览器和版本中是否存在您应该注意的任何注意事项。

您已经读到了文章的结尾！现在您已经对 CSS 有了一些了解，让我们继续CSS 入门，在那里您可以开始自己编写一些 CSS。

• 概述：CSS 入门
• 下一步