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


该系列的一部分:
如何使用 CSS 构建网站

本教程是使用 CSS创建和自定义此网站的系列的一部分,CSS 是一种用于控制网站呈现的样式表语言。您可以按照整个系列重新创建演示网站并熟悉 CSS 或将此处描述的方法用于其他 CSS 网站项目。

在继续之前,我们建议您了解一些 HTML 知识,HTML 是用于在 Web 浏览器中显示文档的标准标记语言。如果您不熟悉 HTML,可以在开始本系列之前先阅读我们如何使用 HTML 构建网站系列的前十个教程

介绍

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

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

先决条件

要遵循本教程,请确保您已按照本系列如何设置 CSS 和 HTML 练习项目中的上一个教程中的说明设置必要的文件和文件夹

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

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

选择图像后,请确保将其保存为images文件夹中的“background-image.jpeg” 。您现在可以继续下一步了。

使用 CSS 为您的网站添加背景图像

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

要将背景图片添加到您的网站,请使用<body>标签选择器创建 CSS 规则擦除styles.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 注释使用/*and*/标签打开和关闭,不是用于 HTML 注释<!--and-->标签。
  • font-family: "Helvetica", Sans-Serif;声明为网页上的所有文本设置了字体系列 (Helvetica) 和通用字体系列 (Sans-Serif)。(请注意,您可以稍后通过添加 CSS 规则为同一网页上的文本内容指定不同的字体系列)。通用字体系列作为备份提供,以防第一个字体系列不可用且浏览器需要选择备份字体。您可以通过使用其他字体的名称,如更换“黑体”探索其他字体TimesCourierPalatino
  • 声明告诉浏览器使用通过指定文件路径找到的文件向网页添加背景图像。请注意,您已在文件路径名前添加了前缀,以告诉浏览器在包含您正在使用的文件的目录上方的目录中定位文件夹 ( )。background-image: url("../images/background-image.jpeg;")../imagesstyles.css

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

您应该会收到一个除了背景图片外没有任何内容的页面:

只有背景图片的网页

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

更改超链接文本的颜色

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

styles.css文件底部,添加以下规则集:

样式文件
a {
  color: #112d4e; 
}

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

结论

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

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

觉得文章有用?

点个广告表达一下你的爱意吧 !😁