我们如何使用分割标签来为HTML元素设置样式？

百变鹏仔 4个月前 (09-22) #HTML

文章标签如何使用

标记用作 html 元素的容器。借助此标签，我们可以轻松定义 html 文档的一部分。它还用于将大部分 html 元素分组在一起并轻松格式化它们。标签与块级元素一起使用。

标记接受所有 CSS 属性，并使用 class 和 id 等属性设置其中元素的样式。

语法

以下是标记的语法。

<div class='division'>Content…</div>

示例 1

下面给出了一个在 HTML 中向 div 标签添加样式的示例。

<!DOCTYPE html><html><head>   <meta charset="UTF-8">   <meta http-equiv="X-UA-Compatible" content="IE=edge">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <style>      .parent {         border: 1rem solid green;         margin: 1rem;         padding: 1rem 1rem;         text-align: center;         box-shadow: 2px 2px 20px 23px aquamarine;      }      .division {         display: inline-block;         border: 1px solid aquamarine;         padding: 1rem 1rem;         background-color: #2ecc71;         color: white;      }   </style></head><body>   <div class='parent'>      <div class='division'>div tag 1</div>      <div class='division'>div tag 2</div>      <div class='division'>div tag 3</div>   </div></body></html>

以下是上述示例程序的输出。

立即学习“前端免费学习笔记（深入）”；

我们可以向标签添加更多样式。

示例 2

下面给出了在 HTML 中向 div 标记添加样式的另一个示例。

<!DOCTYPE html><html><head>   <meta charset="UTF-8">   <meta http-equiv="X-UA-Compatible" content="IE=edge">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <style>      .parent {         border: 1rem solid green;         margin: 1rem;         padding: 1rem 1rem;         text-align: center;         box-shadow: 2px 2px 20px 23px aquamarine;      }      .division {         display: inline-block;         border: 1px solid aquamarine;         padding: 1rem 1rem;         background-color: #2ecc71;         color: white;         text-transform: uppercase;         text-decoration: underline;         font-family: cursive;         font-size: 1.2rem;         font-weight: bolder;         font-style: italic;      }   </style></head><body>   <div class='parent'>      <div class='division'>div tag 1</div>      <div class='division'>div tag 2</div>      <div class='division'>div tag 3</div>   </div></body></html>

以下是上述示例程序的输出。

立即学习“前端免费学习笔记（深入）”；

示例 3

您可以尝试运行以下代码以使用标记设置 HTML 元素的样式。添加的样式规则将应用于 id=”content” 的元素。这里的 id 是 CSS 选择器。

<!DOCTYPE html><html><head>   <style>      #container p {         line-height: 15px;         margin: 20px;         padding-bottom: 15px;         text-align: justify;         width: 130px;         color: blue;      }   </style>   <title>HTML div Tag</title>   <link rel = "stylesheet" href = "style.css"></head><body>   <div id = "container">      <p>Welcome to our website. We provide tutorials on various subjects.</p>   </div></body></html>

文章推荐

我们如何使用分割标签来为HTML元素设置样式？

语法

示例 1

示例 2

示例 3

html代码是什么

值得一学的6个前端HTML+CSS特效

html怎么设置字体

怎么隐藏html标签

html怎么设置编码utf8