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`元素的宽度和高度，使其适应不同大小的屏幕。