CSS是前端開發中的一項基礎技能，掌握一些常用樣式和種類能夠幫助我們更快速、更準確地完成頁面開發和設計。以下是一些常見的CSS樣式及其種類。
## 1. 字體樣式
CSS中可以設置字體的大小、顏色、粗細、字體系列等。通過設置字體樣式，我們可以讓網頁更具視覺效果，也可以提高頁面的可讀性。

css
p {
font-size: 16px;
color: #333;
font-weight: bold;
font-family: 'Microsoft YaHei', Arial, sans-serif;
}

## 2. 邊框樣式
添加邊框樣式可以讓我們更好地區分頁面中的各個元素，并且還可以增加元素的視覺效果。

css
p {
border: 1px solid #ccc;
border-radius: 10px;
padding: 10px;
}

## 3. 背景樣式
背景樣式是網頁中很重要的一個部分。我們可以通過設置背景色或背景圖片來給網頁增加不同的風格和氛圍。

css
body {
background-color: #f0f0f0;
background-image: url('bg.jpg');
background-size: cover;
background-position: center center;
}

## 4. 布局樣式
布局樣式決定了頁面中元素的排列方式和位置。其中，常見的布局方式有浮動、定位、彈性布局、網格布局等。

css
#header {
width: 100%;
height: 100px;
background-color: #333;
position: fixed;
top: 0;
left: 0;
}
#content {
width: 80%;
float: left;
padding: 10px;
}
#sidebar {
width: 20%;
float: right;
padding: 10px;
}

## 5. 動畫樣式
CSS中也可以設置動畫樣式，讓頁面更加生動有趣。常見的動畫效果有淡入淡出、滑動、旋轉等。

css
@keyframes slideInFromLeft {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.box {
animation: slideInFromLeft 1s ease-in-out;
}

以上是一些常見的CSS樣式和種類，這些樣式可以幫助我們更好地設計和開發網頁。在實際使用中，我們可以根據需求和效果不同，靈活選擇和組合這些樣式。