作為前端開發者，CSS樣式的書寫對頁面的呈現至關重要。其中，div是最常用的一個HTML元素。本文將介紹div CSS書寫規則。

//code here

1.選擇器

選擇器是指定要應用樣式的HTML元素。常用的選擇器包括id選擇器，類選擇器和標簽選擇器。

#example {
background-color: yellow;
}
.example {
color: red;
}
p {
font-size: 16px;
}

2.樣式屬性

樣式屬性指定了要應用到元素上的樣式。例如，背景顏色、字體大小、邊框、寬度等。

#example {
background-color: yellow;
font-size: 20px;
border: 1px solid black;
width: 200px;
}

3.偽元素

偽元素可以創建不在HTML文檔樹中的元素，并在已有元素內容之前或之后插入新內容。偽元素以雙冒號(::)開始。

p::before {
content: "?";
}

4.盒子模型

盒子模型描述了HTML元素占用的空間。它由四部分構成：內容(content)、邊框(border)、內邊距(padding)和外邊距(margin)。

#example {
width: 200px;
height: 100px;
border: 1px solid black;
padding: 10px;
margin: 20px;
}

5.媒體查詢

媒體查詢可以根據設備類型和尺寸為不同的設備應用不同的樣式。媒體查詢使用@media關鍵字。

@media screen and (max-width: 600px) {
#example {
font-size: 16px;
}
}

總結

以上是div CSS書寫規則的一部分，但也是最基礎、最常用的部分。在實際使用中，還有很多高級技巧，需要根據實際需求進行學習和掌握。