上下文

我们如何自定义内容的外观和感觉？一种方法是使用 HTML 元素的 style 属性：

如果只处理少量元素，上述方法完全可行。但当页面较大、组件较多时，为每个元素单独添加 style 属性会变得极其繁琐。在软件开发中，我们通常希望减少重复代码。通过使用 层叠样式表（CSS） 可以实现这一点。CSS 专门用于处理 HTML 元素的布局和样式定制。

创建 CSS 规则

让我们快速看一下如何将前面的例子改用 CSS 来统一设置 p 元素的样式：

让我们拆解一下上面的例子。CSS 文件由一组规则组成，每条规则包含一个 选择器（用于指定要修改的元素），后接一个 声明块，其中包含一系列 属性 及其对应的 值。

注意 style HTML 元素被嵌套在 head 标签中。style 可以用来在 HTML 文档中直接插入 CSS 规则，如上例所示。虽然这种方式完全合法，但更好的做法是将内容结构与样式分离，分别放在不同的文件中。

在 HTML 页面中加载外部 CSS 文件，可以通过在 head 中添加 link 元素来实现，例如：

1<link href="styles.css" rel="stylesheet" type="text/css">

练习

使用 style 元素创建一条 CSS 规则，使 h1 元素的文本变为绿色。然后在你的 HTML 页面中添加一个 h1 元素。