在 HTML 中建立多個類

1. 將多個類分配給 HTML 中的容器
2. 在 HTML 中為容器分配多個類以編寫高效的 CSS

本文將介紹如何在 HTML 中建立多個類。本文將討論在 HTML 中使用多個類的好處。

將多個類分配給 HTML 中的容器

在 HTML 中，我們經常看到一個類分配給一個容器。我們可以使用 class 屬性在 HTML 元素中分配一個類，然後寫入值。我們可以在塊級和內聯元素中建立一個類。我們可以為不同的 HTML 標籤建立類，例如 <img>、<p>、<h1> 等等。通常，我們可以建立一個容器併為其分配一個類，並使用 CSS 為容器設定樣式。我們可以使用 . 選擇容器類 CSS 選擇器。讓我們看一個例子。

<div class ="box">
    <p> Hello World </p>
</div>

.box{
    border: 2px solid black;
    height:200px;
    width:200px;
}

在上面的示例中，我們建立了一個帶有類 box 的 div 元素。我們在 div 中有一些內容。在 CSS 中，我們選擇了 box 類並對其應用了一些樣式。我們建立了一個具有一定高度和寬度的盒子。它有一個黑色邊框。

我們還可以在 HTML 中為一個容器分配兩個類。為此，我們應該寫下類的兩個名稱，一個接一個用空格分隔。然後，我們可以單獨設定包含相同容器的類的樣式。

例如，建立一個 div，如上例所示。為 div 編寫由空格分隔的兩個類 box 和 wrapper。在 CSS 中，首先選擇 box 類並編寫 border 屬性。將 border 屬性的值設定為 2px solid black。然後，給出 200px 的高度和寬度。接下來，選擇 wrapper 類並將 20px 的值賦予 margin 屬性。

在下面的示例中，我們使用兩個類向容器新增了 20px 的邊距。

示例程式碼：

<div class ="box wrapper">
    <p> Hello World </p>
</div>

.box{
    border: 2px solid black;
    height:200px;
    width:200px;
}

.wrapper{
    margin:20px;
}

在 HTML 中為容器分配多個類以編寫高效的 CSS

我們學習瞭如何在一個容器中使用多個類。現在，我們需要了解遵循這種方法的好處。當某些類具有相同的屬性時，我們可以在容器中使用多個類。我們可以一次性設定通用類的樣式，然後單獨設定單個類的樣式。因此，我們可以高效地編寫 CSS。

例如，在 HTML 中建立三個 div 元素。對於每個元素，寫 box 作為第一個類名。然後，為第一個 div 編寫類名 redBox，為第二個 div 編寫類名 greenBox，為第三個 div 編寫類名 blueBox。接下來，在 CSS 中，選擇 box 類並提供 200px 的高度和寬度。設定 20px 的邊距。現在，選擇單個類名並提供相應的背景顏色。選擇 redBox 類並將 background-color 屬性設定為 red。用各自的顏色作為背景顏色對其餘的類重複相同的操作。

在下面的例子中，我們確定了這三個盒子的共同屬性並建立了一個共同的類 box。因此，我們不需要為每個框編寫重複的樣式。我們還為容器分配了單獨的類，通過這些類，我們可以用獨特的顏色來設定盒子的樣式。這樣，我們就可以使用多個類來編寫高效的 CSS 程式碼。

示例程式碼：

<div class ="box redBox"></div>
<div class ="box greenBox"></div>
<div class ="box blueBox"></div>

.box{
    height:200px;
    width:200px;
    margin:20px;
}

.redBox{
    background-color:red;
}

.greenBox{
    background-color:green;
}

.blueBox{
    background-color:blue;
}