通过CSS文字装饰，可以给文字添加装饰线，设置装饰线的颜色，指定装饰线的样式，设置装饰线的粗细。给文本添加装饰线是通过text-decoration-line属性实现的，该属性可以与多个值组合，例如overline和underline，在文本上方和下方显示线条。具体值有3个：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，取值写成overlineunderline（读作overlinespaceunderline）。看一下效果，段落中增加了两条装饰线。有的朋友还记得，给文本添加链接后，浏览器会默认给文本添加下划线。因此，不要使用下划线来修饰链接的文字。设置文字装饰线的颜色是通过text-decoration-color属性实现的，属性值为任意合法的颜色值。将text-decoration-color属性设置为h1元素，并将颜色值设置为红色。然后快速为h2、h3、p元素设置text-decoration-color属性，值分别为蓝色、绿色、紫色。我们可以看到线条是有颜色的。通过text-decoration-style属性指定装饰线的样式，属性值有五个：solid、solidline。双，双实线。虚线，虚线。dashed[d??t]，虚线。wavy[?we?vi]，波浪线。为了演示方便，在html中再添加一个标题h4，填充一些文字，在css中将所有元素的text-decoration-line样式属性设置为下划线。定义另一个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:下划线；文字装饰颜色：红色；文字装饰风格：纯色；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下划线;/text-decoration-line:underline;text-decoration-color:purple;text-decoration-style:wavy;}我们可以去掉第三个词，使用text-decorationstyle属性来实现，text-decoration是简写值为text-decoration-line、text-decoration-color、text-decoration-style、text-decoration-thickness的一个或多个值的属性，用空格隔开。其中text-decoration-line必须设置，其他三个可选。举几个例子：text-decoration:underline这里的意思是给文字设置下划线装饰，线条的颜色、样式、粗细采用默认值，即黑色、实线、自动粗细。这里的text-decoration:underlinered表示为文本设置下划线装饰，线条颜色为红色，其他装饰属性采用默认值。这里的text-decoration:underlinereddouble表示为文字设置下划线装饰，线条颜色为红色双线。线的粗细采用默认值。这里的text-decoration:underlinereddouble5px表示给文字设置下划线装饰，线条颜色为红色，双线，粗细为5px。h1{text-decoration:underline;}h2{text-decoration:underlinered;}h3{text-decoration:underlinereddouble;}p{text-decoration:underlinereddouble5px;}这里你可能会问，四个可以吗值的顺序被颠倒了？答案是没有要求。但是必须设置属性text-decoration-line的值！比如上例中的下划线。回到样式表代码，我们尝试重写h1的样式声明，注释掉之前的代码，声明text-decoration属性。顺序可以按照上面样式写的先后顺序依次复制。因为这些值没有顺序要求，但是必须设置下划线。看看，h1的文字装饰效果还是存在的！默认情况下，HTML中的所有链接都带有下划线。有时您会看到其他人的页面，其链接样式没有下划线。如何？为a元素声明text-decoration:none，可以去掉链接的下线，自己试试吧！a{text-decoration:none;}文章配套视频链接：https://www.bilibili.com/video...
