HTML和CSS是Web開發中常用的兩個技術，可以用來創建各種網頁布局和樣式。在網頁中，每個元素都可以使用HTML和CSS來定義其樣式和外觀。
下面將介紹div CSS樣式設置的一些基本步驟：
1. 創建div元素
首先，在HTML中創建一個div元素，并為其指定樣式。例如：
<div class="container">
<h1>Hello World!</h1>
<p>This is a paragraph.</p>
</div>
在這個例子中，我們創建了一個名為“container”的div元素，并將其設置為“class”屬性，值為“container”。這個元素將被覆蓋在另一個div元素中，后者被稱為“h1”和“p”元素。
2. 設置div元素的屬性
除了創建div元素之外，我們還可以為div元素設置其他屬性，如寬度、高度、背景色、邊框樣式等。例如：
.container {
width: 300px;
height: 200px;
background-color: #fff;
border: 1px solid #ccc;
在這個例子中，我們為“container”元素設置了寬度和高度，背景色為白色，邊框樣式為黑色。
3. 添加樣式
我們可以使用CSS來添加樣式，以控制div元素的外觀。CSS可以被分成許多類和屬性，其中一些可以用于控制樣式的特定元素。例如：
.container {
width: 300px;
height: 200px;
background-color: #fff;
border: 1px solid #ccc;
.container h1 {
font-size: 20px;
font-weight: bold;
.container p {
font-size: 16px;
line-height: 1.5;
在這個例子中，我們為“container”元素設置了寬度、高度、背景色、邊框樣式和h1元素的樣式，以及p元素的屬性。
4. 使用div的樣式
最后，我們可以使用div的樣式來應用這些設置。例如：
.container {
width: 300px;
height: 200px;
background-color: #fff;
border: 1px solid #ccc;
.container h1 {
font-size: 20px;
font-weight: bold;
.container p {
font-size: 16px;
line-height: 1.5;
.container:hover h1,
.container:hover p {
color: #007bff;
在這個例子中，我們使用“:hover”屬性來將h1和p元素的顏色更改為淺藍色，當鼠標懸停在div元素上時。
通過使用div和CSS，我們可以創建各種復雜的布局和樣式，從而打造出漂亮的Web頁面。