介绍
在本教程中,您将使用 CSS 规则来设计一个网页的身体. 您将使用这个规则来应用和设计背景图像,并为网页设置字体家族. 您还将创建一种风格规则,将所有超链接文本的颜色改变为更好地匹配示范网站的颜色板。
此练习将用于重建示范网站(https://css.sammy-codes.com/)的风格,但您可以应用和修改这里用于其他HTML/CSS网站项目的相同规则。
前提条件
要遵循本教程,请确保您已设置必要的文件和文件夹,如本系列中以前的教程中指示的那样 How To Set Up You CSS and HTML Practice Project。
对于本教程,我们建议您使用可从此链接下载的演示网站的背景图像(https://css.sammy-codes.com/images/background-image.jpeg)。
<$>[注]
注:要下载演示网站的背景图像,请访问 此链接并点击CTRL + 左键 (Mac 上)或右键 (Windows 上)在图像上,选择保存图像作为,并将其保存为背景图像.jpeg到您的图像文件夹。
一旦您选择了图像,请确保它在您的图像文件夹中保存为image.jpeg。
通过CSS为您的网站添加背景图像
要声明网页体的风格规则,您需要为体标签选择器创建 CSS 规则,然后将这些规则应用于您在上一本教程中添加到index.html文件的打开和关闭<html>标签中放置的 all 元素(https://andsky.com/tech/tutorials/how-to-set-up-your-css-and-html-website-project)。
要将背景图像添加到您的网站,请使用<body>标签选择器创建一个CSS规则,删除您的styles.css文件中的所有内容(如果您一直在跟随这个系列),并添加以下规则:
1[label styles.css]
2/* General Website Style rules */
3body {
4 font-family: "Helvetica", Sans-Serif;
5 background-image: url("../images/background-image.jpeg");
6}
请注意突出的文件路径,该路径告诉浏览器在哪里找到背景图像. 如果您已经更改了图像的名称或位置,那么您将需要相应地调整文件路径。
让我们暂停一下,了解本规则集中的每个声明:
/* 一般网站 样式规则 */是 CSS 注释, 浏览器不显示 。 与 HTML 注释一样, CSS 注释对于解释和组织您的代码以备日后参考是有用的. 通知 CSS 注释打开并关闭/ ++和++/标签, 而不是!和++标记用于 HTML 注释 。 *'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' (注意您可以通过稍后添加 CSS 规则来指定同一网页上文字内容的不同字体家族). 通用字体家族是作为备份提供的, 以防第一个字体家族无法使用, 且浏览器需要取取回后置字体 。 您可以通过将"Helvetica"替换为"Times","Courier","Palatino"等字体名称来探索其他字体.- ‘背景-图像:url (.)./images/ background-image.jpeg;''' 声明让浏览器使用在指定文件路径中找到的文件在网页上添加一个背景图像. 注意您已经准备了
./' 到文件路径名, 以便让浏览器在目录上方的目录中找到包含您正在工作的文件的图像` 文件夹 。 (英语)
保存您的.dll 文件,并在您的浏览器中加载 `index.html' 页面. 有关下载 HTML 文件的说明,请访问我们的教程步骤 如何在您的浏览器中查看离线 HTML 文件 。
您应该收到一个没有内容的页面,除了背景图像:
如果您没有收到图像,请检查您的文件路径是正确的,并且在您的 index.html 文件和 styles.css 文件中没有错误。
更改超链接文本的颜色
接下来,我们将添加一个 CSS 规则,将所有超链接文本的颜色改变为更好地匹配网站颜色板的颜色。
在styles.css文件的底部,添加以下规则:
1[label styles.css]
2a {
3 color: #112d4e;
4}
此规则集将用HTML颜色代码#112d4e标记任何文本,直到您将<a>元素添加到您的index.html页面(您将在最后一节教程中(How To Create a Static Footer With HTML and CSS)(https://andsky.com/tech/tutorials/how-to-create-a-static-footer-with-html-and-css-section-7)中完成)。
结论
您现在应该有一个具有大背景图像的网页。此外,您已经宣布了一个字体家族,当您开始添加文本内容时将其应用。 使用这些规则集,您可以通过创建体标签选择器的规则集来更改网页的字体和背景图像。
在下一个教程中,您将重建 演示网站的标题部分。