在 HTML 中建立多個類

Subodh Poudel 2023年2月19日 2021年10月2日
  1. 將多個類分配給 HTML 中的容器
  2. 在 HTML 中為容器分配多個類以編寫高效的 CSS
在 HTML 中建立多個類

本文將介紹如何在 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;
}

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

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

例如,建立一個 div,如上例所示。為 div 編寫由空格分隔的兩個類 boxwrapper。在 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;
}
Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn