极客笔记CSS 如何将 CSS 应用到 HTML 的 body 元素
在本文中，我们将介绍如何将 CSS 样式应用到 HTML 文档中的 body 元素，以实现网页的整体样式调整。
阅读更多：CSS 教程
什么是 body 元素？
在 HTML 中，body 元素是文档的主体部分，它包含了网页的所有内容，例如文字、图片、链接等。通过将 CSS 样式应用到 body 元素上，我们可以对整个网页的背景、文字颜色等进行风格和外观上的调整。
在 HTML 文件中引入 CSS
在应用 CSS 样式之前，我们需要在 HTML 文件的 head 部分中引入 CSS 样式表。通常我们可以使用 link 元素来引入外部的 CSS 样式表。以下是一个示例：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- 网页内容 -->
</body>
</html>
在上述示例中，我们通过 link 元素将名为 “style.css” 的外部 CSS 样式表引入到了 HTML 文件中。接下来我们将在样式表中定义具体的 body 样式。
在 CSS 中定义 body 样式
在样式表中，我们可以使用 body 选择器来定义 body 元素的样式。以下是一个示例：
body {
background-color: lightblue;
color: white;
font-family: Arial, sans-serif;
}
在上述示例中，我们使用了 background-color 属性来设置 body 元素的背景颜色，color 属性来设置文字颜色，font-family 属性来设置字体样式。你可以根据自己的需要来定义更多的 body 样式。
使用内联样式将 CSS 应用到 body 元素
除了引入外部样式表，在 HTML 文件中我们还可以使用内联样式来直接将 CSS 样式应用到 body 元素上。以下是一个示例：
<!DOCTYPE html>
<html>
<head>
</head>
<body style="background-color: lightblue; color: white; font-family: Arial, sans-serif;">
<!-- 网页内容 -->
</body>
</html>
在上述示例中，我们通过在 body 元素的 style 属性中定义样式，直接应用了 CSS。同样，你可以根据需要添加更多的样式属性来达到自己的样式效果。
使用 CSS 类将样式应用到 body 元素
除了使用内联样式，我们还可以使用 CSS 类来将样式应用到 body 元素上。以下是一个示例：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body class="my-custom-style">
<!-- 网页内容 -->
</body>
</html>
在上述示例中，我们在 body 元素上添加了一个 class 属性，并将其值设置为 “my-custom-style”。接下来，我们可以在样式表中定义该 class 的样式：
.my-custom-style {
background-color: lightblue;
color: white;
font-family: Arial, sans-serif;
}
通过以上的设置，我们成功将样式应用到了 body 元素。
总结
通过这篇文章的介绍，我们了解了如何将 CSS 样式应用到 HTML 文档中的 body 元素。我们可以通过引入外部样式表、使用内联样式或者通过 CSS 类的方式来定义 body 的样式。根据实际需求和个人喜好，可以对背景颜色、文字颜色、字体等进行调整，以创建符合我们需求的网页设计风格。