CSS是用于描述網頁樣式和布局的語言，可以在網頁中定義各種樣式和布局。為了讓網站更加美觀和易于使用，我們可以創建一些新的CSS規則，以改善網站的外觀和體驗。以下是三種常見的CSS規則類型：
1. 基本樣式規則：這些規則定義了網站的基本的樣式，包括字體、顏色、大小、位置等。這些規則可以通過單獨的CSS規則文件或嵌套在HTML文件中實現。
2. 響應式樣式規則：這些規則可以根據設備的屏幕尺寸和分辨率自動調整樣式。通過將響應式樣式規則嵌入到HTML文件中，我們可以確保網站在不同設備上的樣式保持一致。
3. 布局樣式規則：這些規則定義了網站的布局樣式，包括層疊、對齊、間距等。通過將這些規則嵌套在HTML文件中，我們可以為網站的不同部分設置不同的布局樣式。
下面是一些示例代碼，展示了如何創建這三種類型的CSS規則：
1. 基本樣式規則
```html
<!DOCTYPE html>
<html>
<head>
<title>基本樣式規則</title>
<style>
body {
font-family: Arial, sans-serif;
color: #f0f0f0;
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
在這個示例中，我們定義了`body`元素的樣式，包括字體、顏色和大小。我們還可以使用CSS規則來更改`h1`元素的顏色，使其更具吸引力。
2. 響應式樣式規則
```html
<!DOCTYPE html>
<html>
<head>
<title>響應式樣式規則</title>
<style>
@media screen and (max-width: 768px) {
body {
font-family: Arial, sans-serif;
color: #f0f0f0;
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
在這個示例中，我們使用`@media`規則來更改`body`元素的樣式，只有在屏幕寬度小于768像素時才會生效。這樣可以確保網站在不同分辨率下的樣式保持一致。
3. 布局樣式規則
```html
<!DOCTYPE html>
<html>
<head>
<title>布局樣式規則</title>
<style>
h1 {
font-size: 2em;
text-align: center;
.container {
margin: 20px auto;
width: 400px;
height: 300px;
</style>
</head>
<body>
<div class="container">
<h1>Hello World!</h1>
</div>
</body>
</html>
在這個示例中，我們定義了一個`div`元素作為`container`元素的容器，并將`h1`元素居中對齊。我們還可以使用CSS規則來更改`div`元素的寬度和高度，使其適應不同大小的屏幕。