• 技术文章 >Web开发 >css教程

    css文本修饰text-decoration的使用

    小妮浅浅小妮浅浅2021-10-11 10:01:42原创4847

    在 HTML 中,可以使用 s 标签、u 标签来实现文字的划线效果,但是为了保证结构与样式分离的原则,一般使用 CSS 来实现样式,提高代码的可读性和可维护性;

    1、超链接默认带下划线,可以用text-decoration:none来清除超链接的下划线。

    2、下划线常用于文章的重点标明,中划线用于促销时划掉原价,上划线基本没有应用场景。

    实例

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    <!DOCTYPE html>

    <html>

        <head>

            <meta name="keywords" content="个人主页,HTML学习笔记"/>

            <meta name="author" content="Like_Frost"/>

            <meta name="description" content="学习示例"/>

            <meta name="copyright" content="版权所有,转载前请联系"/>

            <style type="text/css">

                div{

                    width: 200px;

                }

                .p1{

                    text-decoration: underline;

                }

                .p2{

                    text-decoration: line-through;

                }

                .p3{

                    text-decoration: overline;

                }

            </style>

        </head>

        <body>

            <div>

                <p>下划线</p>

                <p>中划线</p>

                <p>上划线</p>

            </div>

        </body>

    </html>

    以上就是css文本修饰text-decoration的使用,希望对大家有所帮助。更多css学习指路:css教程

    本文教程操作环境:windows7系统、css3版,DELL G3电脑。

    专题推荐:css text-decoration
    上一篇:css首行缩进text-indent的实现 下一篇:css文字间距的使用

    相关文章推荐

    • css旋转属性如何理解• css设置文字居中的两种方法• css中删除input输入框的阴影• css中margin是什么?怎么设置?• css3中设置元素宽度的方法

    全部评论我要评论

    © 2021 Python学习网 苏ICP备2021003149号-1

  • 取消发布评论
  • 

    Python学习网