如何使用CSS为网站的主体设置样式

介绍

在本教程中，您将使用 CSS 规则设置网页正文的样式。您将使用此规则来应用背景图像并设置其样式，并设置网页的字体系列。您还将创建一个样式规则，将所有超链接文本的颜色更改为与演示网站的调色板更匹配的颜色。

本练习将用于重新创建演示站点的样式，但您可以应用和修改此处用于其他 HTML/CSS 网站项目的相同规则。

先决条件

要学习本教程，请确保您已按照本系列如何设置 CSS 和 HTML 练习项目中的前一个教程中的说明设置了必要的文件和文件夹。

对于本教程，我们建议您使用演示站点中的背景图片，您可以从此链接下载。您可以使用另一张图片作为背景，但请确保图片足够大以填满屏幕。

注意：要下载演示站点的背景图片，请访问此链接并单击CTRL + Left Click（Mac）或Right Click（Windows）在图像上并选择“将图像另存为”并将其另存为 background-image.jpeg 到您的“图像”文件夹。

选择图像后，请确保将其保存为 images 文件夹中的“background-image.jpeg”。您现在已准备好进行下一步。

使用 CSS 向您的网站添加背景图片

要为网页正文声明样式规则，您需要为 body 标签选择器创建 CSS 规则。然后，这些规则将应用于 all 元素，这些元素放置在您在前面的教程 How 添加到 index.html 文件的开始和结束 <html> 标记内设置您的 CSS 和 HTML 网站项目。

要将背景图像添加到您的站点，请使用 <body> 标记选择器创建 CSS 规则。擦除 styles.css 文件中的所有内容（如果您一直在关注本系列）并添加以下规则集：

样式.css

/* General Website Style rules */
body {
  font-family: "Helvetica", Sans-Serif;
  background-image: url("../images/background-image.jpeg");
}

记下突出显示的文件路径，它告诉浏览器定位背景图像的位置。如果您更改了图像的名称或位置，则需要在此处相应地调整文件路径。

让我们暂停一下以了解此规则集中的每个声明：

/* General Website Style rules */是CSS注释，浏览器不显示。与 HTML 注释一样，CSS 注释对于解释和组织代码以供将来参考很有用。请注意，CSS 注释使用 /* 和 */ 标签打开和关闭，而不是用于 HTML 注释的  标签。
font-family: "Helvetica", Sans-Serif; 声明为网页上的所有文本设置字体系列 (Helvetica) 和通用字体系列 (Sans-Serif)。（请注意，您可以稍后通过添加 CSS 规则为同一网页上的文本内容指定不同的字体系列）。通用字体系列作为备份提供，以防第一个字体系列不可用并且浏览器需要选择备份字体。您可以通过将“Helvetica”替换为其他字体名称来探索其他字体，例如 Times、Courier 或 Palatino。
background-image: url("../images/background-image.jpeg;") 声明告诉浏览器使用通过指定文件路径找到的文件向网页添加背景图像。请注意，您已在文件路径名前添加 ../ 以告诉浏览器在包含您正在处理的文件的目录上方的目录中找到 images 文件夹（[X196X ]）。

保存 styles.css 文件并在浏览器中加载 index.html 页面。有关加载 HTML 文件的说明，请访问我们的教程步骤如何在浏览器中查看脱机 HTML 文件。

您应该会收到一个除了背景图片之外没有其他内容的页面：

如果您没有收到图像，请检查以确保您的文件路径正确，并且您的 index.html 文件和 styles.css 文件中没有错误。

更改超链接文本的颜色

接下来，我们将添加一个 CSS 规则，将所有超链接文本的颜色更改为更匹配网站调色板的颜色。

在 styles.css 文件的底部，添加以下规则集：

样式.css

a {
  color: #112d4e; 
}

此规则集将使用 HTML 颜色代码 #112d4e 为标记有 <a> 标记的任何文本设置样式。在您将 <a> 元素添加到 index.html 页面之前，该样式将不明显（您将在上一个教程如何使用 HTML 和 CSS 创建静态页脚） . 您可以通过更改此 CSS 规则中的 HTML 颜色代码来更改样式颜色。

结论

您现在应该有一个带有大背景图像的网页。此外，您声明了将在您开始添加文本内容时应用的字体系列。使用此类规则集，您可以通过为 body 标签选择器创建规则集来更改网页的字体和背景图像。最后，您创建了一个样式规则，用于指定您添加到页面的任何超链接文本的颜色。

在下一个教程中，您将重新创建演示网站的标题部分。