我們如何使用分割標籤來為HTML元素設定樣式？-html教學-PHP中文網

我們如何使用分割標籤來為HTML元素設定樣式？

WBOY

發布： 2023-09-06 13:45:05

轉載

1300 人瀏覽過

標記用作 HTML 元素的容器。借助此標籤，我們可以輕鬆定義 HTML 文件的一部分。它也用於將大部分 HTML 元素分組在一起並輕鬆格式化它們。標籤與區塊級元素一起使用。

標記接受所有 CSS 屬性，並使用 class 和 id 等屬性設定其中元素的樣式。

我們如何使用分割標籤來為HTML元素設定樣式？

文法

以下是標記的語法。

<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元素設定樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！