• :一大波赠书活动正式来袭!满足条件的小伙伴每人赠送一本书,只限前100名!小伙伴们赶紧到碗里来!查看详情

4.2 下划线、删除线和顶划线text-decoration

一、text-decoration属性

在CSS中,使用text-decoration属性来定义段落文本的下划线、删除线和顶划线。

语法:

text-decoration:属性值;

说明:

text-decoration属性取值如下表:

表1 text-decoration属性
属性值 说明
none 默认值,可以用这个属性值也可以去掉已经有下划线或删除线或顶划线的样式
underline 下划线
line-through 删除线
overline 顶划线

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>text-decoration属性</title>
    <style type="text/css">
        #p1{text-decoration:underline;}
        #p2{text-decoration:line-through;}
        #p3{text-decoration:overline;}
    </style>
</head>
<body>
    <p id="p1">这是“下划线”效果</p>
    <p id="p2">这是“删除线”效果</p>
    <p id="p3">这是“顶划线”效果</p>
</body>
</html>

在浏览器预览效果如下:

text-decoration属性

我们在HTML入门教程中学习了删除线用<s>标签、下划线用<u>标签,现在我们学习了text-decoration属性之后,这些效果都应该用CSS控制。

记住,前端开发中,对于样式一般用CSS来控制,不建议使用标签来控制。也就是说,我们应该摒弃纯样式标签,如<s>、<u>等。

我们知道a标签默认的样式具有下划线,例如“<a href="http://www.lvyestudy.com">绿叶学习网</a>”在浏览器预览效果如下:

绿叶学习网

那如何去除a标签默认样式中的下划线呢?“text-decoration:none”这个属性值就可以派上用场了。

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>text-decoration属性</title>
    <style type="text/css">
        a{text-decoration:none;}
    </style>
</head>
<body>
    <a href="http://www.lvyestudy.com">绿叶学习网</a>
</body>
</html>

在浏览器预览效果如下:

text-decoration属性

“text-decoration:none”这个属性值99%都是用于去除a标签的默认样式,绝大部分网站的超链接极少采用默认样式,往往都是去掉下划线的,因为a标签的默认样式实在是丑!大家要学会这个技巧,因为在实际编程中,你有非常多的机会用到它。

二、下划线、删除线和顶划线的用途分析

1、下划线

下划线在网页设计中,一般用于文章的重点标明。

2、删除线

删除线在一般网页很少见到,一般出现在电子商务网站中用于促销。

CSS text-decoration属性

3、顶划线

说真的,我还真的没见过啥网页用过顶划线=-=!大家果断放弃"text-decoration:overline;"这个属性值吧。

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

如果你想要获取更多学习资料,或者在学习过程中遇到疑问想要得到跟教程一样最优质的解答,请通过以下方式关注我们:

(1)官方微博:

(2)新手Q群:69660533(暗号:lvye)(建议初学前端的加)

(3)官方Q群:457631216(暗号:lvye)(建议有JS基础的加)

(4)绿叶论坛:进入论坛

(5)常见问题:绿叶学习网常见问题解答

回到顶部