如何设置HTML样式带有CSS的元素

介绍

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

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

先决条件

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

实践中探索<div>元素

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

样式.css

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

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

索引.html

<div></div>

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

您的网页应显示一个 100 像素宽和 100 像素高的绿色框，由 CSS 规则指定：

现在您已经为 <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 中：

索引.html

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

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

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

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

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

索引.html

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

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

您可以在 <div> 元素内的文本中添加额外的 HTML 元素。 例如，尝试将 HTML 标题标记（<h2> 到 <h4>）添加到 index.html 文件中 <div> 标记内的文本中：

<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> 到 <h4> 标签的默认属性设置样式：

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

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

样式.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 盒子模型，以及如何使用它来调整元素内容的大小、内边距、边框和边距。