详解CSS 文字装饰 text-decoration text-emphasis

# CSS 文字装饰 text-decoration

text-decoration 属性用于为 HTML 元素的文本添加装饰效果。这些装饰效果可以包括下划线、删除线、上划线、以及闪烁等。在本篇文章中我们将详细探讨 text-decoration 在 CSS 中的作用、语法、取值范围以及实际应用方法，以及相关注意点和实例分析。

## 1、基本语法

text-decoration 属性可应用于各种 HTML 元素中的标签，并且能够设置以下的样式：

text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: blink;

通过样式表对 HTML 元素的文本添加装饰效果：

p {text-decoration: underline;}
h1 {text-decoration: overline;}
h2 {text-decoration: line-through;}
h3 {text-decoration: blink;}

上面这个样式表将为 <p> 标签下的所有文本添加下划线，为 <h1> 标签下的所有文本添加上划线，为 <h2> 标签下的所有文本添加删除线，为 <h3> 标签下的所有文本添加闪烁效果。

## 2、取值范围

text-decoration 属性可以取以下值：

### (1) none

不添加任何文字装饰效果。

text-decoration: none;

### (2) underline

为文本添加下划线。

text-decoration: underline;

### (3) overline

为文本添加上划线。

text-decoration: overline;

### (4) line-through

为文本添加删除线。

text-decoration: line-through;

### (5) blink

为文本添加闪烁效果。

text-decoration: blink;

## 3、注意点

### (1) text-decoration 可以单独使用，也可以与其他文字样式属性一同使用。

text-decoration 可以独立使用，也可以与 color、font-weight、font-family 等属性一同使用。

a {color: #0000FF; text-decoration: underline;}
h1 {text-decoration: overline line-through;}

### (2) text-decoration 支持 inherit

text-decoration 支持继承属性。如果父元素设置了 text-decoration 值，则其在其后代元素中依旧有效。

p {text-decoration: underline;}
a {color: #0000FF; text-decoration: inherit;}

这个例子中，所有的 <p> 标签文本都会被添加下划线效果，但是在 <p> 内的 <a> 标签没有指定 text-decoration 值，因此它会从其祖先元素 <p> 继承其下划线效果。

### (3) text-decoration 设置为 none 可以取消有关连的装饰效果。

a {text-decoration: none;}

上面的样式表将去除在链接中已设置过的下划线，浏览器默认情况下，链接的文本会被下划线覆盖，如果我们不想要这个效果就可以设置 text-decoration:none 。

### (4) text-decoration 下划线长度和颜色可以设置。

a {text-decoration: underline solid red;}

上面的样式表设置下划线宽度为实线，颜色为红色。text-decoration 下划线颜色和宽度取决于浏览器。下划线宽度的可选值有：dotted（点状线）、dashed（间隔线）、double（双线）、solid（实线）和 groove（阴刻线）等。

### (5) text-decoration 在 Firefox 中不支持 blink 属性

Firefox 浏览器不支持 blink，当我们给一段文本添加 blink 时，不同的浏览器显示效果也不一样。

p {text-decoration: blink;}

## 4、实例分析

### (1) 添加下划线

我们可以为文本添加下划线效果，如下代码所示：

a:hover{text-decoration:underline;}

这个样式表实现了鼠标悬停在链接上时的文本下划线效果。当鼠标悬停在链接上时，链接的文本将被下划线划掉。

### (2) 取消链接的下划线

当讲解 CSS 的基本属性时，我们已经讲解了在 CSS 中去掉链接的下划线的方法，此处只需再次提及：

a{text-decoration:none;}

### (3) 添加删除线

删除线样式是一种非常流行的文本装饰技术，可以通过下面的 CSS 定义来添加删除线：

h1{color:black;text-decoration:line-through;}

### (4) 添加上划线、中划线和虚线效果

上划线、中划线和虚线效果，可使用 text-decoration 属性，同样也可以使用其他样式属性。

h2{color:black;text-decoration:overline;}
h3{color:black;text-decoration:line-through;}
h4{color:black;text-decoration:dotted yellow;}

## 总结

text-decoration 属性属于 CSS 中重要的文字装饰属性，它用于为 HTML 元素添加各种装饰效果，包括下划线、删除线、上划线等。text-decoration 属性的取值范围非常广泛，可以单独使用，也可以与其他属性一同使用，例如 color、font-weight 等。此外，我们还可以通过 text-decoration 取值实现添加下划线、删除线和各种虚线效果，满足不同需求。