CSS是層疊樣式表（Cascading Style Sheets）的縮寫。在網頁設計中，使用CSS可以將樣式應用到HTML元素上，使得網頁變得更加美觀和易于維護。

CSS的選擇器（Selector）用于指定需要應用樣式的元素。其中，ID選擇器和Class選擇器是最常用的兩種選擇器。本文將詳細介紹ID選擇器和用于布局的<div>標簽。

ID選擇器

ID選擇器用于選中具有特定ID屬性值的元素。在CSS中，通過在選擇器前加上“#”符號，然后跟上ID值來定義ID選擇器。每個HTML文檔中，ID值必須是唯一的。

示例1：給ID為"header"的元素應用樣式

#header {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}

上述代碼將會選中具有ID為"header"的元素，并應用背景顏色為#f2f2f2、內邊距為20px和文本居中的樣式。

示例2：改變ID為"logo"的圖像的樣式

#logo {
width: 200px;
height: 100px;
border: 1px solid #ccc;
margin-top: 10px;
}

上述代碼將會選中具有ID為"logo"的圖像，并應用寬度為200px、高度為100px、邊框為1px實線#ccc和上外邊距為10px的樣式。

<div>標簽

<div>是HTML中一個常用的塊級元素，可以用于組織和布局網頁內容。在CSS中，<div>元素可以配合ID選擇器使用，實現更靈活的網頁布局。

示例3：使用<div>元素進行頁面布局

<div id="container">
<div id="left-sidebar">
<!--左側欄內容-->
</div>
<div id="main-content">
<!--主內容區域-->
</div>
<div id="right-sidebar">
<!--右側欄內容-->
</div>
</div>

上述代碼使用了三個<div>元素，以實現左右側邊欄和主內容區域的布局。通過給每個<div>元素添加不同的ID，可以在CSS中為它們分別定義樣式，實現靈活的定制化布局。

示例4：使用<div>元素創建響應式布局

<div id="header">
<!--網頁頭部內容-->
</div>
<div id="main-content">
<div id="sidebar">
<!--側邊欄內容-->
</div>
<div id="content">
<!--主要內容-->
</div>
</div>
<div id="footer">
<!--網頁底部內容-->
</div>

上述代碼使用<div>元素創建了一個響應式布局，包括頭部、側邊欄、主要內容和底部。通過CSS中的媒體查詢和樣式定義，可以在不同的屏幕尺寸上優雅地調整布局。

通過使用ID選擇器和<div>標簽，我們可以更加靈活和精確地控制網頁的樣式和布局。這樣可以使得網頁設計更加個性化、美觀和易于維護。