在網頁開發中，CSS（層疊樣式表）是用來控制網頁外觀和樣式的一種標記語言。使用CSS，我們可以很方便地將樣式應用到網頁的各個元素上。而在CSS中，我們可以使用各種選擇器來選中不同的元素，然后對其應用相應的樣式。在本文中，我們將重點介紹如何將CSS樣式應用到HTML中最常用的元素之一——<div>。
案例一：基本示例
，我們需要在HTML文檔中定義一個<div>元素。在<div>元素內，我們可以添加各種其他HTML元素，比如文本、圖片、表格等。接下來，我們可以使用CSS來定義<div>的樣式，比如背景顏色、邊框寬度等。下面是一個簡單的代碼示例：
<html>
<head>
<style>
div \{
background-color: yellow;
border: 1px solid black;
padding: 10px;
\}
</style>
</head>
<body>
<div>
<p>這是一個示例</p>
</div>
</body>
</html>在上面的代碼中，我們使用了CSS的<style>標簽將樣式定義嵌入到HTML文檔中。通過選擇器div，我們選中了<div>元素，并對其應用了背景色為黃色、邊框為1像素黑色實線以及內邊距為10像素的樣式。在<div>內部，我們使用了
標簽定義了一個段落，并在段落中添加了一段文字“這是一個示例”。
案例二：樣式繼承
除了直接在<div>元素上定義樣式，我們還可以通過繼承來實現樣式的復用。在CSS中，子元素會繼承父元素的樣式，除非通過特定的選擇器給子元素重新定義了樣式。
<html>
<head>
<style>
div \{
background-color: yellow;
border: 1px solid black;
padding: 10px;
\}
p \{
color: blue;
font-weight: bold;
\}
</style>
</head>
<body>
<div>
<p>這是一個示例</p>
</div>
</body>
</html>在上面的代碼中，我們定義了兩個樣式，一個應用到<div>元素，另一個應用到
元素。在<div>內部，我們添加了一個
元素，并給它的文字定義了藍色以及粗體的樣式。由于
元素是<div>元素的子元素，所以它會繼承父元素的背景色、邊框和內邊距樣式，同時還會應用自己獨有的顏色和字體樣式。
案例三：類選擇器
除了使用元素選擇器選中元素，我們還可以使用類選擇器來選中具有相同類名的元素。通過給元素添加class屬性，并在CSS中使用類選擇器來定義樣式，我們可以方便地將特定的樣式應用到一組元素上。
<html>
<head>
<style>
.yellow-box \{
background-color: yellow;
border: 1px solid black;
padding: 10px;
\}
</style>
</head>
<body>
<div class="yellow-box">
<p>這是一個示例</p>
</div>
<div class="yellow-box">
<p>這是另一個示例</p>
</div>
</body>
</html>在上面的代碼中，我們定義了一個類選擇器.yellow-box，并將其應用到兩個<div>元素上。通過添加class屬性值為"yellow-box"，我們使這兩個<div>元素具有相同的類名，并且通過類選擇器將背景色、邊框和內邊距樣式應用到了這兩個元素身上。
總之，CSS的強大之處在于它可以輕松地將樣式應用到HTML文檔中的各個元素上。而在HTML中，<div>元素作為最常用的塊級元素之一，CSS尤其常用于對其進行樣式定義。通過本文的代碼示例，相信讀者已經對如何將CSS樣式應用到<div>元素有了一定的了解。