<div>元素是HTML中的一個常用標簽，用于創建一個獨立的區塊。通過添加樣式，我們可以改變<div>元素的外觀和布局。本文將重點介紹如何使用樣式將<div>元素的背景顏色設為灰色，以及一些實際案例的示例。
，要將<div>元素的背景顏色設為灰色，我們可以使用CSS代碼中的background-color屬性。在<style>標簽內，我們可以通過為<div>元素添加一個類名或ID來選擇該元素，然后將background-color屬性設置為灰色。以下是一個例子：

示例 1：

<style>
.gray-div {
background-color: gray;
}
</style>
<div class="gray-div">
這是一個灰色的<div>元素。
</div>

在上面的例子中，我們創建了一個類名為"gray-div"的樣式規則。然后，我們將<div>元素的類名設置為"gray-div"，這樣該元素的背景顏色就會被設為灰色。
接下來，我們可以使用內聯樣式的方式直接在<div>元素內部設置background-color屬性。以下是另一個例子：

示例 2：

<div style="background-color: gray;">
這是一個內聯樣式的灰色的<div>元素。
</div>

在上面的例子中，我們直接在<div>元素的style屬性中設置了background-color屬性的值為灰色，這樣<div>元素的背景顏色也會變為灰色。
除了使用CSS的background-color屬性，還可以使用其他樣式屬性來改變<div>元素的外觀。以下是一些常用的屬性示例：

示例 3：

<style>
.gray-div {
background-color: gray;
color: white;
padding: 10px;
border: 1px solid black;
width: 200px;
}
</style>
<div class="gray-div">
這是一個帶有灰色背景、白色字體、10px內邊距、1px黑色邊框、200px寬度的<div>元素。
</div>

在上面的例子中，我們通過設置color屬性將文字顏色設為白色，通過padding屬性設置內邊距為10px，通過border屬性設置1px的黑色邊框，以及通過width屬性設置寬度為200px。這些樣式屬性的組合可以使<div>元素的外觀更加豐富。
最后，我們來參考一個實際的案例，看看如何使用<div>元素的樣式來創建一個灰色的頂部導航欄。以下是示例代碼：

示例 4：

<style>
.nav-bar {
background-color: gray;
padding: 10px;
text-align: center;
}
.nav-bar a {
color: white;
text-decoration: none;
margin: 0 10px;
}
</style>
<div class="nav-bar">
<a href="#">首頁</a>
<a href="#">關于我們</a>
<a href="#">產品</a>
<a href="#">聯系我們</a>
</div>

在上面的例子中，我們創建了一個類名為"nav-bar"的樣式規則，用于設置導航欄的樣式。我們使用background-color屬性將導航欄的背景顏色設為灰色，使用padding屬性設置內邊距，使用text-align屬性將文本居中。此外，我們還創建了一個類名為"nav-bar a"的樣式規則，用于設置導航鏈接的樣式。我們使用color屬性將鏈接文字設為白色，使用text-decoration屬性去除下劃線，使用margin屬性設置外邊距。通過結合這些樣式屬性，我們成功地創建了一個具有灰色背景的頂部導航欄。
通過以上的例子，我們了解了如何使用樣式將<div>元素的背景顏色設為灰色，以及一些實際案例的示例。利用這些技巧，我們可以輕松地改變<div>元素的外觀，使網頁設計更加豐富多彩。