什么是 CSS？

浏览器默认样式

在使用 HTML 结构化内容模块中，我们介绍了 HTML 是什么以及它如何用于标记文档。这些文档将在 Web 浏览器中可读。标题将看起来比普通文本更大，段落会另起一行并在它们之间留有间距。链接会着色并带下划线，以将其与其余文本区分开来。

你所看到的是浏览器的默认样式——浏览器应用于 HTML 的非常基本的样式，以确保即使页面作者没有明确指定样式，页面也能够可读。这些样式是在浏览器内置的默认 CSS 样式表中定义的——它们与 HTML 无关。

如果所有网站都长一个样，那么互联网将是一个无聊的地方。这就是你需要学习 CSS 的原因。

CSS 有什么用？

使用 CSS，你可以精确控制 HTML 元素在浏览器中的外观，以你喜欢的任何设计和布局向用户呈现你的文档。

• 文档通常是使用标记语言（最常见的是HTML，这些被称为HTML 文档）构建的文本文件。你可能还会遇到用其他标记语言编写的文档，例如SVG或XML。HTML 文档包含网页的内容并指定其结构。
• 呈现文档给用户意味着将其转换为你的受众可用的形式。浏览器，如Firefox、Chrome、Safari和Edge，旨在以视觉方式呈现文档，例如在电脑屏幕、投影仪、移动设备或打印机上。在 Web 环境中，这通常被称为渲染；我们在浏览器如何加载网站中提供了网页渲染过程的简化描述。

CSS 可用于与网页外观相关的许多目的，例如：

• 文本样式，包括更改标题和链接的颜色和大小。
• 创建布局，例如网格布局或多列布局。
• 特殊效果，例如动画。

CSS 语言被组织成包含相关功能的模块。例如，请查看背景和边框模块的 MDN 参考页面，以了解其目的以及它包含的属性和功能。在我们的模块页面中，你还会找到指向定义这些技术的规范的链接。

CSS 语法基础

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

例如，你可能决定将页面的主标题样式设置为大的红色文本。以下代码显示了一个非常简单的 CSS 规则，可以实现此目的：

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

• 在上面的例子中，CSS 规则以一个选择器开头。这选择了我们要应用样式的 HTML 元素。在这种情况下，我们为一级标题（<h1>）设置样式。
• 然后我们包含一对花括号——{ }。
• 花括号内包含一个或多个声明，它们以属性和值对的形式出现。我们在冒号前指定属性（例如，上面例子中的color），在冒号后指定属性的值（red是为color属性设置的值）。
• 此示例包含两个声明，一个用于color，另一个用于font-size。

不同的 CSS 属性有不同的允许值。在我们的示例中，我们有color属性，它可以接受各种颜色值。我们还有font-size属性。此属性可以接受各种大小单位作为值。

CSS 样式表包含许多这样的规则，一个接一个地编写。

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

p {
  color: aqua;
  padding: 5px;
  background: midnightblue;
}

你会发现你会很快学会一些值，而其他的则需要查找。MDN 上的各个属性页面为你提供了快速查找属性及其值的方法。

CSS 如何应用于 HTML？

正如浏览器如何加载网站中所解释的，当你导航到网页时，浏览器首先接收包含网页内容的 HTML 文档，并将其转换为DOM 树。

此后，网页中找到的任何 CSS 规则（无论是直接插入到 HTML 中，还是在引用的外部.css文件中）都会根据它们将应用于的不同元素（由其选择器指定）进行分类。然后，CSS 规则将应用于 DOM 树，生成一个渲染树，然后将其绘制到浏览器窗口中。

让我们看一个例子。首先，我们将定义一个 CSS 可以应用的 HTML 片段：

<h1>CSS is great</h1>

<p>You can style text.</p>

<p>And create layouts and special effects.</p>

现在，我们的 CSS，重复自上一节：

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

p {
  color: aqua;
  padding: 5px;
  background: midnightblue;
}

此 CSS

• 选择页面上的所有<h1>元素，将它们的文本颜色设置为红色，并使其比默认大小更大。由于我们的示例 HTML 中只有一个<h1>，因此只有该元素会获得样式。
• 选择页面上的所有<p>元素，为它们提供自定义文本和背景颜色以及文本周围的一些间距。我们的示例 HTML 中有两个<p>元素，它们都获得了样式。

当 CSS 应用到 HTML 时，渲染输出如下：

使用一些 CSS

尝试使用上面的示例。为此，请按右上角的“播放”按钮，在我们的 MDN Playground 编辑器中加载它。

执行以下操作：

1. 在现有两个段落下方再添加一个文本段落，并注意第二个 CSS 规则是如何自动应用于新段落的。
2. 在<h1>下面的某个地方添加一个<h2>副标题，可能在一个段落之后。
3. 尝试通过向 CSS 添加新规则来为<h2>元素赋予不同的颜色。复制h1规则，将选择器更改为h2，并将color值从red更改为purple，例如。
4. 如果你觉得足够大胆，请尝试在 MDN CSS 参考中查找一些新的 CSS 属性和值以添加到你的规则中！

有关 CSS 基础的更多练习，请参阅 Scrimba 的编写你的第一行 CSS！^{MDN 学习伙伴}。这个 Scrim 提供了对基本 CSS 语法的有用概述，并提供了一个交互式挑战，你可以在其中更多地练习编写 CSS 声明。

总结

现在你对 CSS 是什么以及它如何工作有了一些了解，让我们继续进行一些编写 CSS 的练习并更详细地解释其语法。

• 概述：CSS 样式基础
• 下一页