CSS 文字加下划线

1. 引言

CSS（层叠样式表）是一种用于描述网页样式的语言，可以控制网页中元素的外观和布局。在网页设计中，文字加下划线是一种常见的装饰方法，可以用来强调特定的文本内容。本文将详细介绍如何通过 CSS 在文字上添加下划线。

2. 使用 text-decoration 属性添加下划线

CSS 提供了 text-decoration 属性，用于在文字上添加修饰线。通过在样式表中设置该属性，可以实现在文字下方添加下划线的效果。

2.1 基本语法

text-decoration 属性的基本语法如下：

text-decoration: value;

其中，value 可以取以下几个值：

none：无修饰线。
underline：下划线。
overline：顶划线。
line-through：中划线。
blink：闪烁（通常不推荐使用）。

2.2 例子

下面是一个简单的示例，演示如何使用 text-decoration 属性添加下划线：

<!DOCTYPE html>
<html>
<head>
  <style>
    .underline {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <p>This is a <span class="underline">sample text</span> with underline.</p>
</body>
</html>

在上面的代码中，我们将 <span> 元素的 class 属性设置为 underline，并在样式表中为这个类指定了 text-decoration: underline;。运行结果如下：

This is a sample text with underline.

3. 自定义下划线样式

在前面的示例中，使用的是浏览器默认的下划线样式。然而，CSS 还提供了一些属性，允许我们自定义下划线的样式、颜色和位置。

3.1 `text-decoration-line` 属性

text-decoration-line 属性可以用于指定下划线的类型。该属性可以取以下几个值：

none：无修饰线。
underline：下划线。
overline：顶划线。
line-through：中划线。
initial：使用浏览器的默认设置。

3.2 `text-decoration-color` 属性

text-decoration-color 属性用于指定下划线的颜色。该属性可以取 CSS 中支持的任何颜色值，例如颜色名称、HEX 值或 RGB 值。

3.3 `text-decoration-style` 属性

text-decoration-style 属性用于指定下划线的样式。该属性可以取以下几个值：

solid：实线样式。
double：双线样式。
dotted：点状线样式。
dashed：虚线样式。
wavy：波浪线样式。

3.4 例子

下面是一个示例，演示如何自定义下划线的样式：

<!DOCTYPE html>
<html>
<head>
  <style>
    .underline {
      text-decoration-line: underline;
      text-decoration-color: red;
      text-decoration-style: dotted;
    }
  </style>
</head>
<body>
  <p>This is a <span class="underline">sample text</span> with customized underline.</p>
</body>
</html>

在上面的代码中，我们通过为 text-decoration-line 属性设置值为 underline，为 text-decoration-color 属性设置值为 red，为 text-decoration-style 属性设置值为 dotted，来自定义下划线的样式。运行结果如下：

This is a sample text with customized underline.