共计 3254 个字符，预计需要花费 9 分钟才能阅读完成。
通过 CSS 文本装璜能够为文本增加装璜线、为装璜线设置色彩、为装璜线指定格调、为装璜线设置厚度等成果。
为文本增加装璜线通过 text-decoration-line 属性实现，能够联合一个以上的值，如上划线和下划线，来显示文本上方和下方的线条。具体的值有三个：
overline，在文本上方增加线条润饰。
line-through，在文本两头增加线条润饰，实现了删除线的成果。
underline，在文本下方增加线条润饰，实现了下划线的成果。
咱们来做个例子。
关上编辑器，在 005 文件夹下创立 decoration.html 文件，构建好根本代码。
增加 h1，h2，h3，p 四个元素。别离填入一些文本。
在 005 文件夹下再创立一个 mystyle-3.css 文件，
定义 h1 选择器，申明款式属性 text-decoration-line，值为 overline。
定义 h2 选择器，也申明款式属性 text-decoration-line，值为 line-through。
定义 h3 选择器，再申明款式属性 text-decoration-line，值为 underline。
回到页面，通过 link 元素引入 mystyle-3.css 这个内部款式。
在浏览器上预览成果，咱们看：上边线、删除线和下划线就做好了！
实际上，能够同时给文本增加多个线条，实现办法是给 text-decoration-line
[ˌdekəˈreɪʃn】属性设置多个值，每个值通过空格离开。
在 mystyle-3.css 再定义一个 p 选择器，申明款式属性 text-decoration-line，值写为 overline underline（读作 overline 空格 underline）。
看一下成果，段落被增加了两条装璜线。
有的小伙伴还记得，给文本增加链接后，浏览器会默认给这个文本增加一个下划线。所以，增加了链接的文本就不要应用 underline 下划线装璜了。
为文本设置装璜线的色彩通过 text-decoration-color 属性实现，属性值为任意非法的色彩值。
给 h1 元素设置 text-decoration-color 属性，色彩值设置为 red。再疾速的给 h2，h3，p 元素设置 text-decoration-color 属性，值别离为 blue，green，purple。
咱们看，线条都有了色彩。
为装璜线指定格调通过 text-decoration-style 属性实现，属性值有五个：
solid，实线。
double，双实线。
dotted，圆点线。
dashed[dæʃt]，虚线。
wavy[ˈweɪvi]，波浪线。
为了演示不便，在 html 中再增加一个题目 h4，填入一些文本，在 css 中将全副元素的 text-decoration-line 款式属性都设置为 underline。再定义一个 h4 选择器，申明款式 text-decoration-line: underline。
给 h1，h2，h3，h4，p 全副增加 text-decoration-style 属性，值别离为 solid，double，dotted，dashed[dæʃt]，wavy。
这样，各种线条的格调就设置好了！
通过 text-decoration-thickness 属性为线条设置厚度，也就是线条的粗细。属性值有三种设置办法：
auto，默认值，这个值是不确定的，和所润饰的文字大小有关系。
px，像素大小，是一个绝对值。比方 5px。
%，是一个相对值，依据润饰文字的高度计算出来。比方 25%。
在 h1 元素上申明款式属性 text-decoration-thickness，值为 auto。在 h2，h3 上也申明这个款式属性，值别离为 5px，50%。
在浏览器里仔细观察，h1 上的下划线厚度是浏览器给的默认值。h2 上的下划线厚度是 5px。h3 上的下划线厚度为文字高度的一半。
回到样式表代码，咱们剖析一下：每个文本润饰的属性名，均为三个单词连接起来的，这样写起来比拟啰嗦，能不能简化一下呢？能够的！
h1 {
/ text-decoration-line: overline; /
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: solid;
text-decoration-thickness: auto;
}
h2 {
/ text-decoration-line: line-through; /
text-decoration-line: underline;
text-decoration-color: blue;
text-decoration-style: double;
text-decoration-thickness: 5px;
}
h3 {
text-decoration-line: underline;
text-decoration-color: green;
text-decoration-style: dotted;
text-decoration-thickness: 50%;
}
h4 {
text-decoration-line: underline;
text-decoration-style: dashed;
}
p {
/ text-decoration-line: overline underline; /
text-decoration-line: underline;
text-decoration-color: purple;
text-decoration-style: wavy;
}
咱们能够去掉第三个单词，应用 text-decoration 这个款式属性来实现，text-decoration 是一个简写的属性，它的值是通过空格分隔的
text-decoration-line、
text-decoration-color、
text-decoration-style
以及 text-decoration-thickness 的一个或多个值。
其中，text-decoration-line 必须设置，其余三个可选。
举几个例子：
这里的 text-decoration: underline，示意给文本设置下滑线装璜，线条的色彩、格调和粗细都采纳默认值，也就是彩色、实线、主动粗细。
这里的 text-decoration: underline red，示意给文本设置下滑线装璜，线条色彩为红色，其余润饰属性都采纳默认值。
这里的 text-decoration: underline red double，示意给文本设置下滑线装璜，线条色彩为红色、双线条。线条的粗细采纳默认值。
这里的 text-decoration: underline red double 5px，示意给文本设置下滑线装璜，线条色彩为红色、双线条、厚度为 5px。
h1 {
text-decoration: underline;
}
h2 {
text-decoration: underline red;
}
h3 {
text-decoration: underline red double;
}
p {
text-decoration: underline red double 5px;
}
这里你可能会问，四个值的程序能够颠倒吗？答案是没有要求。然而，text-decoration-line 这个属性的值，必须设置！比方上边例子的 underline。
回到样式表代码，咱们试着改写一下 h1 的 款式申明，正文掉以前的代码，申明 text-decoration 属性，程序能够依照下面款式书写的程序，顺次抄下来即可。因为这几个值没有程序要求，然而必须设置 underline。
咱们看，h1 的文本装璜成果仍然存在！
HTML 中的所有链接默认都有下划线。有时你会看到他人的页面，链接的款式没有下划线。如何实现的呢？
给 a 元素申明 text-decoration: none，能够去除链接的下滑线，大家本人试一试吧！
a {
text-decoration: none;
}
文章配套视频链接：https://www.bilibili.com/vide…
