二维码
搜索 ×

CSS 文本修饰

  • 作者：图形开发学院
  • 更新时间：2023年11月01日
  • 阅读量：0
  • 收藏数：0

CSS 文本修饰

文本修饰

在本章中，您将了解以下属性：

  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-decoration-thickness
  • text-decoration

向文本添加修饰线

text-decoration-line:该属性用于添加文本的修饰行。

提示： 您可以组合多个值，例如 overline 和 下划线以在文本上方和下方显示行。

1
2
3
4
5
6
7
h1 {  text-decoration-line: overline;}  

h2 {  text-decoration-line: line-through;}  

h3 {  text-decoration-line: underline;}  

p {  text-decoration-line: overline underline;}

注意：不建议在非链接的文本下划线，因为这通常会使读者感到困惑。

指定装饰线的颜色

text-decoration-color:该属性用于设置装饰线的颜色。

1
2
3
4
5
6
7
8
9
10
11
h1 {  text-decoration-line: overline;  
  text-decoration-color: red;}  

h2 {  text-decoration-line: line-through;  
  text-decoration-color: blue;}  

h3 {  text-decoration-line: underline;  
  text-decoration-color: green;}  

p {  text-decoration-line: overline underline;  
  text-decoration-color: purple;}

指定装饰线的样式

text-decoration-style:该属性用于 设置装饰线的样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
h1 {  text-decoration-line: underline;  
  text-decoration-style: solid;}  

h2 {  text-decoration-line: underline;  
  text-decoration-style: double;}  

h3 {  text-decoration-line: underline;  
  text-decoration-style: dotted;}  

p.ex1 {  text-decoration-line: underline;  
  text-decoration-style: dashed;}  

p.ex2 {  text-decoration-line: underline;  
  text-decoration-style: wavy;}  

p.ex3 {  text-decoration-line: underline;  
  text-decoration-color: red;  
  text-decoration-style: wavy;}

指定装饰线的粗细

text-decoration-thickness:该属性用于设置装饰线的粗细。

1
2
3
4
5
6
7
8
9
10
11
12
13
h1 {  text-decoration-line: underline;  
  text-decoration-thickness: auto;}  

h2 {  text-decoration-line: underline;  
  text-decoration-thickness: 5px;}  

h3 {  text-decoration-line: underline;  
  text-decoration-thickness: 25%;}  

p {  text-decoration-line: underline;  
  text-decoration-color: red;  
  text-decoration-style: double;  
  text-decoration-thickness: 5px;}

Shorthand 属性

text-decoration:该属性是用于设置下划线。

  • text-decoration-line（必填）
  • text-decoration-color（可选）
  • text-decoration-style（可选）
  • text-decoration-thickness（可选）
1
2
3
4
5
6
7
h1 {  text-decoration: underline;}  

h2 {  text-decoration: underline red;}  

h3 {  text-decoration: underline red double;}  

p {  text-decoration: underline red double 5px;}

小贴士

默认情况下，HTML 中的所有链接都带有下划线。有时你 查看链接的样式没有下划线。text-decoration: none用于删除链接的下划线：

1
a {  text-decoration: none;}

所有 CSS 文本装饰属性

属性 说明
text-decoration 设置所有文本修饰属性
text-decoration-color 指定文本修饰的颜色
text-decoration-line 指定要使用的文本修饰类型（下划线、上划线等）
text-decoration-style 指定文本修饰的样式（实心、虚线等）
text-decoration-thickness 指定文本修饰线的粗细

推荐教程