標題：HTML中如何使用CSS來構建布局和樣式
隨著Web開發的不斷發展，HTML和CSS已經成為了Web前端開發中不可或缺的兩個工具。HTML負責創建頁面的結構和內容，而CSS則負責為頁面添加樣式和布局。在HTML中如何使用CSS來構建布局和樣式，下面將對其進行詳細介紹。
一、使用CSS來調整頁面布局
在HTML中，我們可以通過在<head>標簽中添加CSS樣式表來為頁面添加樣式和布局。CSS具有層疊性質，可以在不同的HTML元素之間添加樣式。
例如，我們可以在一個HTML頁面的頭部區域添加以下樣式：
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
這將為整個頁面添加一個名為“style.css”的CSS樣式表。在這個樣式表中，我們可以使用CSS規則來改變頁面的布局和樣式。
例如，我們可以使用CSS規則來調整頁面的寬度和高度，使頁面看起來更加美觀和易于使用。
二、使用CSS來創建樣式
CSS不僅可以用于調整頁面布局，還可以用于創建樣式。我們可以使用CSS規則來改變頁面的顏色、字體、圖標等。
例如，我們可以使用以下CSS規則來創建一個紅色的按鈕：
button:hover {
background-color: red;
在這個例子中，當鼠標懸停在按鈕上時，按鈕的背景顏色將變為紅色。
三、使用CSS來控制響應式布局
CSS具有響應式性質，這意味著我們可以根據用戶的設備類型和分辨率來調整頁面的布局和樣式。通過使用CSS的響應式布局，我們可以確保頁面在不同設備上的樣式和布局都保持一致。
例如，我們可以使用以下CSS規則來創建一個自適應布局：
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
在這個例子中，我們將整個頁面設置為一個容器，并將其設置為“flex”布局。這樣，我們可以確保頁面的布局在整個容器中居中，并可以根據屏幕大小自動調整寬度和高度。
通過使用CSS，我們可以在HTML中創建布局和樣式，使頁面更加美觀和易于使用。掌握CSS規則，可以讓我們更好地設計和優化Web前端開發。