介绍
本教程将介绍您如何使用 CSS 来定义 HTML 内容分区元素或 <div> 元素。 该 <div> 元素可用于构建页面布局,并将网页分成单独的组件来定制个别。 在本教程中,您将创建和定制 <div> 元素,以及学习如何添加和定制其他元素 inside a div> 容器。 这些技能将为您准备在系列中稍后使用 <div> 元素作为布局工具。
使用<div>元素,将打开和关闭的</div>标签添加到HTML文档中。单独的<div>元素通常对网页的呈现产生很少的视觉影响。
前提条件
要遵循本教程,请确保您已设置必要的文件和文件夹,如本系列中以前的教程中指示的那样 How To Set Up You CSS and HTML Practice Project。
在实践中探索div元素
让我们尝试一项实用的练习来研究<div>元素是如何工作的。删除您的styles.css文件中的所有内容(如果您从以前的教程中添加了内容)。
1[label styles.css]
2div {
3 background-color: green;
4 height: 100px;
5 width: 100px;
6}
然后返回你的index.html文件,删除所有存在的内容(除了第一行代码:)并添加以下代码片段:
1[label index.html]
2<div></div>
请注意,
index.html文件并在浏览器中重新加载(有关下载HTML文件的说明,请参阅我们的教程步骤 如何在浏览器中查看离线HTML文件)。您的网页应显示绿色框 100 像素宽和 100 像素高,如 CSS 规则所规定的:
现在你对你的<div>元素有一个样式规则,你添加到页面的每个<div>元素都会以完全相同的方式进行样式化。然而,在创建一个网站时,你不太可能希望所有的HTML<div>元素都以相同的方式进行样式化。
要练习为 <div> 元素创建类,请删除您刚刚创建的 CSS 规则,并将以下三个新的 CSS 规则集添加到 `styles.css' 文件中:
1.div-1 {
2 background-color: blue;
3 height: 50px;
4 width: 50px;
5}
6
7.div-2 {
8 background-color: red;
9 height: 100px;
10 width: 100px;
11}
12
13.div-3 {
14 background-color: yellow;
15 height: 200px;
16 width: 200px;
17}
在此代码片段中,您为三个不同的类创建了样式规则:div-1、div-2 和div-3。
删除你刚刚创建的<div>元素,并将三个<div>元素添加到你的index.html文件中,将一个类应用于每一个与你在styles.css中定义的CSS类选择器相匹配:
1[label index.html]
2<div class="div-1"></div>
3<div class="div-2"></div>
4<div class="div-3"></div>
请注意,您已将类作为一个属性添加到<div>标签中,将类属性和类名称添加到每个打开的<div>标签中。
您的网页应该显示三个<div>元素,每个元素根据其分配的CSS风格规则以不同的颜色和大小进行样式化。
在<div>容器中添加和格式化文本
您可以通过在打开和关闭
1[label index.html]
2<div class="div-1">Blue</div>
3<div class="div-2">Red</div>
4<div class="div-3">Yellow</div>
保存文件并在您的浏览器中重新加载它. 您现在应该在您的每个
例如,尝试在你的 index.html 文件中添加 HTML 标题标签(<h2> 到 <h4>)到你的文本中的 <div> 标签:
1<div class="div-1"><h2>Blue</h2></div>
2<div class="div-2"><h3>Red</h3></div>
3<div class="div-3"><h4>Yellow</h4></div>
保存文件并在浏览器中重新加载它. 现在div容器内的文本应该根据h1到h4标签的默认属性进行格式化:
请注意,div元素也稍微调整了位置,这种重新定位是由于h2元素的默认边缘属性通过h4元素。
若要在 <div> 容器中设置 style 文本,您可以为您的 <div> 类指定规则集中的文本属性值. 尝试在您的 styles.css 文件中添加规则集中的属性和值,如下面的代码片段所示:
1[label styles.css]
2.div-1 {
3 background-color: blue;
4 height: 50px;
5 width: 50px;
6 font-size: 10px;
7 color: white; iu
8}
9
10.div-2 {
11 background-color: red;
12 height: 100px;
13 width: 100px;
14 font-size: 20px;
15 color: yellow;
16}
17
18.div-3 {
19 background-color: yellow;
20 height: 200px;
21 width: 200px;
22 font-size:30px;
23 color: blue;
24}
保存你的 styles.css 文件,并在浏览器中重新加载 index.html 文件. 在 div> 容器中的文本现在应该根据你的 styles.css 文件中的 CSS 规则进行样式化:
结论
在本教程中,您探索了如何为一个<div>元素设计颜色和大小,以及如何添加和设计文本在一个<div>元素中,您将使用<div>元素来控制当您开始构建网站时的页面布局(https://andsky.com/tech/tutorials/how-to-set-up-your-css-and-html-website-project)。