文本装饰（text-decoration）

文本装饰（text-decoration）属性是CSS中用于给文本添加装饰效果的属性，它可以给文本添加下划线、删除线、上划线和双下划线。下面是一个简单的入门教程，包括了文本装饰属性的知识点讲解和示例代码。

### 文本装饰（text-decoration）属性知识点讲解

**文本装饰属性**：
- `text-decoration` 属性可以设置文本的装饰效果。
- 该属性可以设置为以下值之一：
  - `none`：默认值，不添加任何装饰。
  - `underline`：给文本添加下划线。
  - `overline`：给文本添加上划线。
  - `line-through`：给文本添加删除线。
  - `underline line-through` 或 `overline underline line-through`：可以同时设置多个装饰效果。
- 文本装饰效果可以应用于整个段落或单个单词。
- 文本装饰效果可以与文本样式（如 `font-style`、`font-weight`）结合使用，以实现更复杂的文本效果。

### 示例代码

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本装饰示例</title>
<style>
  .underline {
    text-decoration: underline;
  }
  .overline {
    text-decoration: overline;
  }
  .line-through {
    text-decoration: line-through;
  }
  .underline-line-through {
    text-decoration: underline line-through;
  }
</style>
</head>
<body>

<p class="underline">这是带有下划线的文本</p>
<p class="overline">这是带有上划线的文本</p>
<p class="line-through">这是带有删除线的文本</p>
<p class="underline-line-through">这是同时带有下划线和删除线的文本</p>

</body>
</html>
```

在上面的示例中，我们定义了四种不同的类，每个类对应不同的文本装饰效果。在HTML中，我们通过给相应的元素添加这些类来应用不同的装饰效果。

### 运行结果

当您运行上述代码时，您将看到四种不同装饰效果的文本。每个段落都使用了不同的类，以展示不同的文本装饰效果。

### 总结

文本装饰属性是CSS中用于美化文本的一种方式，它可以给文本添加下划线、删除线、上划线和双下划线。通过这个属性，我们可以为网页设计添加更多的视觉效果和个性。

文本装饰（text-decoration）

目录