在 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;
}
在上面的示例中,我們建立了一個帶有類 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;
}
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