CSS樣式是網頁設計中至關重要的要素之一，它可以讓我們的網頁在外觀上與眾不同。CSS樣式根據其作用可以被分為幾類，下面就讓我們來一一了解。

// 文本樣式
p {
color: #333;
font-size: 18px;
line-height: 1.5;
font-weight: bold;
}
// 背景樣式
body {
background-color: #f1f1f1;
background-image: url('bg.jpg');
background-repeat: repeat;
}
// 邊框樣式
div {
border: 2px solid #ccc;
border-radius: 5px;
}
// 盒子模型
.box {
width: 300px;
height: 200px;
padding: 20px;
margin: 10px;
}
// 浮動
.float-left {
float: left;
width: 50%;
}
.float-right {
float: right;
width: 50%;
}
// 定位
.absolute {
position: absolute;
top: 20px;
left: 50px;
}
.relative {
position: relative;
top: 20px;
left: 50px;
}
// 響應式設計
@media screen and (max-width: 768px) {
.box {
width: 100%;
height: auto;
}
}

以上代碼展示了幾種常見的CSS樣式分類，包括文本樣式、背景樣式、邊框樣式、盒子模型、浮動、定位以及響應式設計。通過使用不同的CSS樣式分類，我們可以輕松地實現網頁的美化、布局和響應式設計。