CSS样式规则用于定义元素的外观和布局。一个CSS样式规则由选择器和声明块组成，选择器指定要应用样式的元素，声明块中包含一条或多条属性-值对。
2.3.1 字体和颜色
通过CSS样式规则，我们可以修改文字的字体、大小、颜色等属性。
示例代码：
/* 修改字体和颜色 */
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #333333;
}在上面的示例中，h1选择器指定样式应用于HTML中的<h1>标签。font-family属性定义了字体的优先顺序，如果用户的计算机上没有第一个字体，则会使用备选字体。font-size属性设置字体的大小，可以使用像素（px）或其他单位。color属性定义文字的颜色，可以使用具体的颜色值（如十六进制、RGB值）或预定义的颜色名称。
2.3.2 边框和背景
CSS样式规则还可以修改元素的边框和背景。
示例代码：
/* 修改边框和背景 */
.box {
border: 1px solid #CCCCCC;
background-color: #F1F1F1;
}在上面的示例中，.box选择器指定样式应用于具有class="box"属性的元素。border属性设置边框的样式、宽度和颜色。在示例中，我们使用了1像素宽度、实线样式和灰色边框。background-color属性定义了元素的背景颜色，我们使用了浅灰色作为背景。
2.3.3 位置和布局
CSS样式规则还可以控制元素的位置和布局。
示例代码：
/* 控制位置和布局 */
.container {
width: 800px;
margin: 0 auto;
padding: 20px;
}在上面的示例中，.container选择器指定样式应用于具有class="container"属性的元素。width属性定义了元素的宽度，我们设置为800像素。margin属性控制元素的外边距，这里我们将左右外边距设置为auto，使元素水平居中。padding属性定义了元素的内边距，我们设置为20像素。
以上示例只是演示了一小部分CSS样式规则，你可以根据需要添加更多样式属性，如字体样式、文本对齐、浮动、定位等。CSS提供了丰富的样式规则，让我们能够精确控制元素的外观和布局。