第19课：演示如何使用CSS样式控制网页背景的外观和排版

在前面的课程中，我们已经学习了HTML和CSS的基本知识，包括元素、标签、属性和样式等。现在，我们来学习如何使用CSS样式控制网页背景的外观和排版。

首先，我们来看一下如何修改网页背景的颜色。在CSS样式表中，我们可以使用background-color属性来设置网页的背景颜色。例如：

body {
  background-color: #f0f0f0;
}

上面的代码将网页的背景颜色设置为灰色（十六进制值为#f0f0f0）。我们也可以使用其他表示颜色的方式，比如使用颜色名称或者RGB值等。

除了修改背景颜色，我们还可以设置背景图片。在CSS样式表中，我们可以使用background-image属性来设置背景图片的URL。例如：

body {
  background-image: url(background.jpg);
}

上面的代码将一个名为background.jpg的图片作为网页的背景图片。需要注意的是，图片的路径应该是相对于样式表的，而不是相对于HTML文件的。

另外，我们还可以设置背景图像的重复，即如何铺满整个背景。在CSS样式表中，我们可以使用background-repeat属性来设置。例如：

body {
  background-image: url(background.jpg);
  background-repeat: repeat-x;
}

上面的代码将背景图片水平重复铺满整个背景。其他可用的取值包括repeat-y（垂直重复）、no-repeat（不重复）和repeat（水平和垂直都重复）。

此外，我们还可以设置背景图片的位置、大小和滚动等属性。在CSS样式表中，我们可以使用background-position、background-size和background-attachment属性来设置。例如：

body {
  background-image: url(background.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}

上面的代码将背景图片居中对齐，不重复，铺满整个背景，并且固定不随页面滚动。其他可用的取值包括left、right、top、bottom等。

最后，我们来看一下如何使用CSS样式控制网页的背景排版，比如设置背景的固定、滚动、铺满等效果。在CSS样式表中，我们可以使用background-attachment、background-position和background-size属性来实现。例如：

body {
  background-image: url(background.jpg);
  background-attachment: fixed;
  background-position: center top;
  background-size: cover;
}

上面的代码将背景图片固定在网页的视窗中，居中对齐，铺满整个背景，并随页面的大小变化而自适应。

总结一下，在本课中，我们学习了如何使用CSS样式控制网页背景的外观和排版，包括修改背景颜色、添加背景图片、设置背景图片的重复、位置、大小等属性。通过练习，你可以更好地掌握这些技巧，并应用到实际项目中。