### CSS语法与应用详解
#### CSS语法概览
CSS（层叠样式表）是一种用于描述网页文档中元素的外观和布局的语言。它由三个主要部分组成：选择器、属性（或称为属性）以及属性值。这三部分共同构成了CSS规则。
- **选择器**：用于标识目标HTML元素或元素集合，例如`body`、`h1`等。
- **属性**：定义了要修改的元素特性，如`color`、`font-family`等。
- **属性值**：为属性设置具体的数值或字符串，例如`black`、`sans-serif`。
基本语法格式如下：
```css
selector {
property: value;
}
```
#### 多属性的组合
在一条CSS规则中，可以同时指定多个属性，属性之间用分号隔开。例如，下面的代码将段落元素的文本对齐方式设置为居中，并将文字颜色设置为红色：
```css
p {
text-align: center;
color: red;
}
```
为了提高可读性，通常会将每个属性单独写在一行上，如下所示：
```css
p {
text-align: center;
color: black;
font-family: Arial;
}
```
#### 选择器的分组
可以将多个选择器分组，这样就可以同时为它们应用相同的样式。选择器之间用逗号分隔。例如，以下代码将所有标题元素的文本颜色设置为绿色：
```css
h1, h2, h3, h4, h5, h6 {
color: green;
}
```
#### 类选择器的应用
类选择器允许为同一类型的HTML元素定义不同的样式。例如，假设你想在文档中有两种不同对齐方式的段落：一个右对齐，另一个居中对齐。可以使用以下CSS代码来实现：
```css
p.right {
text-align: right;
}
p.center {
text-align: center;
}
```
在HTML文档中，通过在元素上添加`class`属性来应用这些样式：
```html
<p class="right">
这个段落将右对齐。
</p>
<p class="center">
这个段落将居中对齐。
</p>
```
如果一个元素想要应用多个类，可以在`class`属性中使用空格分隔多个类名：
```html
<p class="center bold">
这是一个段落。
</p>
```
#### 普遍适用的类选择器
可以省略类选择器前的标签名，从而为具有特定类的所有HTML元素定义样式。例如，以下代码将使所有具有`center`类的元素居中对齐：
```css
.center {
text-align: center;
}
```
在下面的示例中，`h1`元素和`p`元素都具有`center`类，这意味着这两个元素都将遵循`.center`选择器中的规则：
```html
<h1 class="center">
这是一个标题。
</h1>
<p class="center">
这是一个段落。
</p>
```
CSS提供了丰富的语法和选择器机制，使得开发者能够灵活地控制网页中元素的样式，从而创造出既美观又功能强大的用户界面。
