CSS文本装饰

　　通过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;

　　}

　　最后，给大家总结一下：(说到这就行了，不用理睬下表)

　　属性说明

　　text-decoration在一个声明中设置所有的文字装饰属性

　　text-decoration-color指定文本装饰的颜色

　　text-decoration-line指定要使用的文本装饰的种类(下划线、上划线等)。

　　text-decoration-style指定文本装饰的样式(实心、点状等)。

　　text-decoration-thickness指定文本装饰线的厚度

声明：本站稿件版权均属千锋教育所有，未经许可不得擅自转载。