<div>元素是HTML中的一個塊級元素，它可用于將HTML文檔劃分為不同的部分或欄目。通過使用外部style，我們可以為<div>元素定義樣式，并將其應用于整個文檔或特定的部分，從而實現對網頁布局和樣式的全局控制。
下面是幾個使用外部style定義<div>樣式的案例：
案例一：設置背景顏色和邊框

<style>
.container {
background-color: #f8f8f8;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}
</style>
<br>
<div class="container">
<p>這是一個具有背景顏色和邊框的<div>元素。</p>
</div>

在上述案例中，我們定義了一個名為.container的class，并在其中設置了背景顏色、邊框、內邊距和外邊距。然后，在具有.container類的<div>元素中，我們應用了這些樣式。這樣，所有具有.container類的<div>元素都會擁有相同的樣式。
案例二：設置文本樣式

<style>
.highlight {
color: red;
font-size: 18px;
font-weight: bold;
}
</style>
<br>
<div>
<p>這是一個普通的文本。</p>
<p class="highlight">這是一個加粗且使用紅色字體的文本。</p>
</div>

在上述案例中，我們定義了一個名為.highlight的class，并在其中設置了文本顏色、字體大小和字體粗細。然后，在具有.highlight類的

元素中，我們應用了這些樣式。這樣，只有具有.highlight類的

元素會擁有這些樣式。
案例三：設置布局樣式

<style>
.column {
float: left;
width: 50%;
padding: 10px;
box-sizing: border-box;
}
</style>
<br>
<div class="column">
<p>這是左側欄。</p>
</div>
<div class="column">
<p>這是右側欄。</p>
</div>

在上述案例中，我們定義了一個名為.column的class，并在其中設置了浮動、寬度、內邊距和盒模型。然后，在具有.column類的<div>元素中，我們應用了這些樣式。這樣，我們可以將頁面分為兩個等寬的欄目。
通過上述案例，我們了解了如何利用外部style為<div>元素定義樣式。外部style的優勢在于可以實現全局控制，將樣式與內容分離，減少重復代碼，并提高代碼可維護性。因此，在開發網頁時，我們可以充分利用外部style使網頁樣式更加統一和易于維護。