CSS是網站設計中不可或缺的一部分，通過CSS樣式可以實現網站的不同效果。CSS樣式可以分為基礎樣式、布局樣式、效果樣式三種，下面將分別介紹它們的作用。

1. 基礎樣式

p {
color: #333;
font-size: 16px;
line-height: 1.5;
}

基礎樣式主要定義頁面元素的基本樣式，例如文字顏色、字體大小、行高等。通過基礎樣式可以使頁面元素風格統一，并增強網站的易用性和可讀性。

2. 布局樣式

.header {
height: 80px;
background-color: #ccc;
}
.container {
width: 960px;
margin: 0 auto;
}
.footer {
height: 60px;
background-color: #333;
}

布局樣式主要用于控制頁面布局，例如頭部、底部和主體內容之間的排版，以及頁面元素的對齊方式等。通過布局樣式可以讓網頁更加美觀、合理，提升用戶體驗。

3. 效果樣式

.btn {
display: inline-block;
padding: 8px 16px;
background-color: #f00;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.btn:hover {
background-color: #d00;
}

效果樣式可以通過CSS控制頁面元素的動態效果，例如鼠標懸停時的顏色變化、按鈕點擊時的樣式變化等。通過效果樣式可以提高網站的交互性，增強用戶與網站的互動性。

總的來說，CSS樣式的分類可以讓我們針對不同的頁面元素實現不同的樣式和效果，讓網站更加美觀、實用、易用。