CSS 样式：将外部样式表链接到 HTML

介绍

欢迎来到你的第一个 CSS 实验！CSS（Cascading Style Sheets，层叠样式表）是我们用于样式化 HTML 文档的语言。它描述了 HTML 元素应如何在屏幕、纸张或其他媒体上显示。

有三种方法可以将 CSS 包含在 HTML 文档中：内联（inline）、内部（internal）和外部（external）。最常见且推荐的方法是使用外部样式表。这种方法将你的内容（HTML）与你的表现（CSS）分离开来，使你的代码更整洁、更易于维护，并且可以在多个页面之间重用。

在这个实验中，你将学习使用外部样式表来样式化网页的基本过程。你将：

创建一个新的 CSS 文件。
将该 CSS 文件链接到一个现有的 HTML 文档。
编写一个基本的 CSS 规则来更改整个页面的字体。
在实时网页浏览器中查看你的更改。

让我们开始吧！

创建名为 styles.css 的外部 CSS 文件

在此步骤中，你将创建一个专门用于存放所有 CSS 规则的文件。这被称为外部样式表。设置脚本已为你创建了一个 index.html 文件。现在，你需要创建将用于样式化它的 CSS 文件。

使用 WebIDE 左侧面板中的文件浏览器：

在 project 文件夹区域内的空白处右键单击。
从上下文菜单中选择 "New File"。
将出现一个新的输入框。输入 styles.css 并按 Enter 键。

现在你应该在文件浏览器中看到一个名为 styles.css 的新空文件。在接下来的步骤中，你将在这里编写你的 CSS 代码。

new file

使用 link 标签将 CSS 文件链接到 HTML 文档

在此步骤中，你将把 styles.css 文件连接到你的 index.html 文件。仅仅创建 CSS 文件是不够的；你必须明确告知 HTML 文档使用它。这可以通过 <link> 标签来完成。

<link> 标签放置在你的 HTML 文档的 <head> 部分内。它需要两个重要属性：

rel="stylesheet"：这告诉浏览器链接的文件是一个样式表。
href="styles.css"：这指定了 CSS 文件的路径。

现在，让我们将其添加到你的 HTML 中。

从文件浏览器中打开 index.html 文件。
在 <head> 部分内，添加以下行：

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

添加该行后，你的 index.html 文件应如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My First CSS Page</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph. We will style this page with CSS.</p>
  </body>
</html>

请确保保存文件（Ctrl+S 或 File > Save）。

为 body 元素添加基本选择器

在此步骤中，你将编写你的第一个 CSS 规则。CSS 规则由选择器和声明块组成。选择器指向你想要设置样式的 HTML 元素。声明块（在花括号 {} 内）包含一个或多个声明，这些声明是实际要应用的样式。

我们将从定位 <body> 元素开始。设置 <body> 的样式是为整个页面设置默认样式（如背景颜色和字体）的常见做法。

打开你的 styles.css 文件。它应该还是空的。
输入以下代码为 body 元素创建规则：

body {
}

这段代码选择了 <body> 元素，并准备了一个空的声明块（花括号），我们将在下一步中在此处添加样式属性。

在 body 选择器上设置 font-family 属性

在此步骤中，你将为你的 body 规则添加一个样式声明。声明是属性 - 值对（例如 property: value;），用于定义特定的样式。

我们将使用 font-family 属性来更改页面上文本的字体。通过将其应用于 body，body 内的所有文本元素（如 <h1> 和 <p>）将继承此字体。提供“字体栈”（一个由逗号分隔的字体列表）是一种好习惯。浏览器会尝试使用第一个字体，如果不可用，它会尝试下一个，依此类推。

确保你的 styles.css 文件已打开。
在 body 选择器的花括号内，添加 font-family 属性。

font-family: Arial, sans-serif;

你完整的 styles.css 文件现在应该如下所示：

body {
  font-family: Arial, sans-serif;
}

这条规则告诉浏览器使用 Arial 字体渲染 <body> 内的所有文本。如果用户的系统未安装 Arial 字体，它将回退到系统的默认无衬线字体。

保存文件并在浏览器中刷新以查看更改

在最后这个步骤中，你将看到你的工作成果。编写代码后，你需要保存文件，然后在浏览器中查看更改。

确保 index.html 和 styles.css 都已保存。你可以使用 Ctrl+S 键盘快捷键，或者在菜单中选择 File > Save。
导航到 LabEx 界面顶部的 Web 8080 标签页。此标签页显示了在你环境中运行的 Web 服务器的输出。
你可能需要刷新浏览器标签页才能看到最新的更改。

Web page showing Arial font after CSS change