在CSS中，可以使用<div>標簽來創建一個div容器，它是網頁布局的基本單位之一。每個<div>可以通過給它一個名字來區分，這樣可以用來對其應用不同的樣式。本文將詳細講解如何使用CSS給<div>添加類名，并通過幾個代碼案例來展示如何使用不同的類名來改變<div>的外觀和行為。
，讓我們看一個例子：
<div class="container"> 這是一個div容器 </div>
在上面的代碼中，我們創建了一個<div>容器，并給它添加了一個叫做"container"的類名。接下來，我們使用CSS定義了一個名為.container的樣式，這個樣式會應用于所有具有"container"類名的<div>元素。
為了演示這個示例的效果，讓我們給.container樣式添加一些屬性。在這個案例中，我們將修改容器的顏色、字體大小、背景顏色、寬度和高度，并使用flex布局使其居中顯示。
.container {
color: red;
font-size: 20px;
background-color: yellow;
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}在上面的代碼中，我們使用了一些常用的CSS屬性來修改容器的外觀。.container樣式的color屬性將文本顏色設置為紅色，font-size屬性將字體大小設置為20像素，background-color屬性將背景顏色設置為黃色。同時，我們使用width和height屬性分別將容器的寬度和高度設置為200像素。最后，使用display、justify-content和align-items屬性來實現居中顯示效果。
現在，我們來看一下使用這個樣式的結果：
<div class="container"> 這是一個div容器 </div>
通過使用名為"container"的類名，這個<div>元素被添加了.container樣式，并按照我們在CSS中定義的屬性進行了樣式化。它的文本顏色變為紅色，字體大小變為20像素，背景顏色變為黃色，寬度和高度變為200像素，并且通過flex布局居中顯示。
除了定義一個類名之外，我們還可以給<div>元素同時添加多個類名，從而可以應用多個樣式。例如：
<div class="container red"> 這是一個紅色的div容器 </div>
在上面的代碼中，我們給<div>元素同時添加了"class="container red""的屬性。這樣一來，這個<div>元素不僅應用了.container樣式，還應用了一個名為"red"的樣式。
讓我們來看看這個案例的CSS代碼：
.container {
color: red;
font-size: 20px;
background-color: yellow;
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
<br>
.red {
color: blue;
background-color: red;
}在上面的代碼中，我們定義了一個名為"red"的樣式，它將文本顏色設置為藍色，背景顏色設置為紅色。
現在，我們來看一下應用了這兩個類名的結果：
<div class="container red"> 這是一個紅色的div容器 </div>
通過同時應用"container"和"red"這兩個類名，這個<div>元素同時應用了.container和.red這兩個樣式。因此，它的文本顏色變為藍色，背景顏色變為紅色，其他屬性仍然保持為我們在.container樣式中定義的樣式。
通過給<div>元素添加類名，我們可以對每個<div>元素應用不同的樣式，以實現不同的外觀和行為。這是CSS中非常有用的一個功能，可以極大地簡化網頁布局和樣式化的過程。