介绍

本教程将向您介绍如何<div>使用 CSS为 HTML Content Division 元素（或元素）设置样式。该<div>元素可用于构建页面布局并将网页分解为单独的组件以进行单独的样式设置。在本教程中，您将创建和风格<div>的元素，以及学习如何添加和风格等元素内一个<div>容器。<div>当您开始重新创建演示网站时，这些技能将使您准备好在本系列的后面部分使用元素作为布局工具。

<div>通过向</div>HTML 文档添加开始和结束标记来使用该元素。就其本身而言，该<div>元素通常对网页的呈现几乎没有视觉效果。要指定<div>元素的大小、颜色和其他属性，您可以使用 CSS 为其指定样式规则。

先决条件

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

<div>在实践中探索元素

让我们尝试动手练习来研究<div>元素的工作原理。擦除styles.css文件中的所有内容（如果您添加了之前教程中的内容）。接下来，为<div>标签选择器添加以下 CSS 规则：

div {
 background-color: green; 
 height: 100px;
 width: 100px;
}

保存styles.css文件。接下来，返回到您的index.html文件，擦除其中的所有内容（第一行代码除外<link rel="stylesheet" href="css/styles.css">：）并添加以下代码片段：

<div></div>

请注意，该<div>元素具有开始和结束标记，但不需要任何内容​​。保存index.html文件并在浏览器中重新加载它。（有关加载 HTML 文件的说明，请访问我们的教程步骤如何在浏览器中查看脱机 HTML 文件）。

根据 CSS 规则的规定，您的网页应显示一个 100 像素宽、100 像素高的绿色框：

既然您已经为<div>元素制定了样式规则，<div>那么您添加到页面中的每个元素都将以完全相同的方式进行样式设置。但是，在创建网站时，您不太可能希望所有 HTML<div>元素都采用相同的样式。出于这个原因，开发人员经常创建他们可以使用不同方式来设置元素样式的类<div>。

要练习为<div>元素创建类，请删除您刚刚创建的 CSS 规则并将以下三个新的 CSS 规则集添加到styles.css文件中：

.div-1 {
  background-color: blue; 
  height: 50px;
  width: 50px;
}

.div-2 {
  background-color: red; 
  height: 100px;
  width: 100px;
}

.div-3 {
  background-color: yellow; 
  height: 200px;
  width: 200px;
}

在此代码段，你已经创建样式规则为三个不同的类别：div-1，div-2，和div-3。请注意，.在声明类的 CSS 规则时，您已根据需要在类选择器之前添加了。

保存styles.css文件并返回到您的index.html文件。删除<div>您刚刚创建的元素，然后将三个<div>元素添加到您的index.html文件中，将一个类应用到与您在 中定义的 CSS 类选择器相对应的每个元素styles.css：

<div class="div-1"></div>
<div class="div-2"></div>
<div class="div-3"></div>

请注意，您已<div>通过将类属性和类名称添加到每个开始<div>标记，将类作为属性添加到标记中。保存文件并在浏览器中重新加载它。你应该会收到这样的信息：

您的网页应显示三个<div>元素，每个元素根据其指定的 CSS 样式规则使用不同的颜色和大小进行样式化。请注意，每个<div>元素都从自己的新行开始，因为<div>元素是块级元素并具有此默认行为。

在<div>容器中添加和样式化文本

您可以<div>通过在开始和结束<div>标记之间插入文本来将文本放入容器中。尝试<div>在index.html文件中的每个元素中添加文本：

<div class="div-1">Blue</div>
<div class="div-2">Red</div>
<div class="div-3">Yellow</div>

保存文件并在浏览器中重新加载它。您现在应该在每个<div>容器中显示文本：

您可以向元素内的文本添加其他 HTML<div>元素。例如，尝试将 HTML 标题标签 ( <h2>to <h4>) 添加到文件中<div>标签内的文本中index.html：

<div class="div-1"><h2>Blue</h2></div>
<div class="div-2"><h3>Red</h3></div>
<div class="div-3"><h4>Yellow</h4></div>

保存文件并在浏览器中重新加载它。<div>容器内的文本现在应该根据<h1>to<h4>标签的默认属性设置样式：

请注意，<div>元素也稍微调整了它们的位置。这种重新定位是由<h2>through<h4>元素的默认边距属性引起的。您将在下一个关于CSS 盒模型的教程中了解有关边距的更多信息，但现在可以忽略它们

要为容器内的文本设置样式<div>，您可以在<div>类的规则集中指定文本属性值。尝试将属性和值添加到styles.css文件中的规则集，如以下代码片段中突出显示的：

.div-1 {
  background-color: blue; 
  height: 50px;
  width: 50px;
  font-size: 10px; 
  color: white; iu
}

.div-2 {
  background-color: red; 
  height: 100px;
  width: 100px;
  font-size: 20px; 
  color: yellow; 
}

.div-3 {
  background-color: yellow; 
  height: 200px;
  width: 200px;
  font-size:30px;   
  color: blue; 
}

保存styles.css文件并index.html在浏览器中重新加载文件。<div>容器内的文本现在应该根据styles.css文件中的 CSS 规则设置样式：

结论

在本教程中，我们探索了如何样式的颜色和大小<div>元素，如何添加和风格的文本中一个 <div>元素。<div>当您开始构建网站时，您将使用该元素来控制页面的布局。在下一个教程中，您将了解 CSS 框模型，以及如何使用它来调整元素内容的大小、内边距、边框和边距。