欢迎来到 CSS 颜色和背景实验！在网页设计中，颜色和背景对于创建视觉吸引力强且用户友好的网站至关重要。它们有助于设定基调、提高可读性并引导用户注意力。
在本实验中，你将亲手实践一些用于控制元素外观的最常用 CSS 属性。你将学习如何设置背景颜色、应用文本颜色、使用背景图片以及控制这些图片的显示方式。我们将涵盖以下属性：background-color、color、background-image、background-repeat 和 background-position。
完成本实验后，你将对如何为网页的颜色和背景进行样式设置有扎实的理解。
在本步骤中，你将学习如何更改整个页面的背景颜色。我们将使用 background-color 属性和十六进制（hex）颜色代码。Hex 代码是网页开发中表示颜色的常用方式，以 # 开头，后跟六个字符（0-9，a-f）。
首先，你需要编辑 styles.css 文件。你可以在 WebIDE 左侧的文件浏览器中找到此文件。
styles.css 文件，在编辑器中打开它。<body> 元素的背景颜色。这将把样式应用于整个页面。body {
background-color: #f0f8ff;
}此规则选择 body 元素并将其背景颜色设置为一种浅蓝色，称为“AliceBlue”。
添加代码后，保存文件（你可以使用 Ctrl+S 或 Cmd+S）。要查看更改，请点击界面顶部的 Web 8080 标签页。你应该会看到页面的背景从白色变为浅蓝色。
既然你已经设置了背景颜色，现在让我们来更改主标题文本的颜色。我们将使用 color 属性，它用于设置元素文本内容（text content）的颜色。为此，我们将使用 rgb() 颜色格式。
rgb() 函数使用其红色（Red）、绿色（Green）和蓝色（Blue）分量来定义颜色，每个值的范围从 0 到 255。
继续编辑 styles.css 文件。
<h1> 元素。color 属性设置为深灰色，使用 rgb(60, 60, 60)。将以下代码添加到你的 styles.css 文件中：
h1 {
color: rgb(60, 60, 60);
}保存文件并切换到 Web 8080 标签页来预览你的更改。“Welcome to LabEx”标题现在应该是深灰色的，使其在浅蓝色背景下更加醒目。
除了纯色之外，CSS 还允许你使用图片作为背景。background-image 属性就是为此目的而设计的。你可以使用 url() 函数来指定图片的路径。
在本步骤中，你将为页面的 body 添加一个背景图片。设置脚本（setup script）已经将一个名为 labex.svg 的图片文件创建在你的项目目录中。
styles.css 文件。body 规则，添加 background-image 属性。在 body 选择器的大括号内添加以下行：
body {
background-color: #f0f8ff;
background-image: url("labex.svg");
}保存文件后，检查 Web 8080 标签页。你会注意到图片（labex.svg）已显示在页面上。默认情况下，背景图片会在水平和垂直方向上重复平铺，以填充整个元素。在下一步中，你将学习如何控制这种行为。
正如你在上一步看到的，背景图片默认会重复平铺。background-repeat 属性可以让你控制这种行为。它可以接受多个值，包括 repeat（默认值）、repeat-x（水平重复）、repeat-y（垂直重复）和 no-repeat。
在本步骤中，你将阻止背景图片重复平铺。
styles.css 文件中的 body 规则。background-repeat 属性，并将其值设置为 no-repeat。你的 body 规则现在应该如下所示：
body {
background-color: #f0f8ff;
background-image: url("labex.svg");
background-repeat: no-repeat;
}保存文件并刷新 Web 8080 标签页。你现在只会看到一个背景图片实例，它位于页面的左上角。
目前，单个背景图片位于页面的左上角。你可以使用 background-position 属性来更改其位置。此属性接受诸如 left、right、top、bottom 和 center 等值，以及特定的长度或百分比值。
在最后一步中，你将把背景图片水平和垂直居中。
styles.css 文件中，向 body 规则添加 background-position 属性。center。完整的 body 规则现在将是：
body {
background-color: #f0f8ff;
background-image: url("labex.svg");
background-repeat: no-repeat;
background-position: center;
}保存你的更改，并在 Web 8080 标签页中查看结果。背景图片现在应该完美地居中在页面上。
恭喜你完成了本次实验！你已成功学习了如何使用基础的 CSS 属性来设置网页的颜色和背景。
在本次实验中，你练习了：
background-color 和十六进制代码设置页面的背景颜色。color 属性和 rgb() 值更改文本颜色。url() 函数添加 background-image。background-repeat: no-repeat; 控制图片平铺。background-position: center; 定位背景图片。这些属性是任何网页开发者的必备工具。你可以随意尝试更改这些值或使用不同的图片来进一步探索，看看你能创造出什么。
