您现在的位置是: 首页 » 网页代码 » 字下面的下划线怎么打?
网页代码

字下面的下划线怎么打?

网站优化小编十一月 26, 2019 17人已围观

文字下面的下划线可以通过css的text-decoration或border-bottom属性添加。text-decoration属性添加的下划线是最简单样式,border-bottom属性可以设置不同样式的下划线。

网站运营中栏目排名优化技巧

下面我们通过简单的代码示例,为大家详细介绍一下这两种css添加文字下划线样式的实现方法!

css text-decoration属性添加简单文字下划线样式

代码示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css 文字添加下划线样式</title>
        <style>
            .demo span{
                text-decoration:underline;
            }
        </style>
    </head>
    <body>
        <p class="demo">这是一段测试文字,<span>HTML中文网</span>!</p>
    </body>
</html>

css text-decoration属性添加的下划线是最简单样式,而且没有办法设置什么比较特别的样式,比如把下划线设置成虚点状的。下面我们看看另一种添加下划线的方法,可以设置不同的下划线样式。

text-decoration下划线CSS单词值参数:

  • none :  无装饰

  • blink :  闪烁

  • underline :  下划线

  • line-through :  贯穿线

  • overline :  上划线

  • text-decoration:none 无装饰,通常对html下划线标签去掉下划线样式

  • text-decoration:underline 下划线样式

  • text-decoration:line-through 删除线样式-贯穿线样式

  • text-decoration:overline 上划线样式

css border-bottom属性添加文字下划线样式

代码示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css 文字下划线样式</title>
        <style>
            .demo{
                width: 400px;
                height: 400px;
                margin:100px auto;
            }
            .demo1 span{
                border-bottom: 1px solid #000000;
            }
            .demo2 span{
                border-bottom: 5px solid #0081EF;
            }
            .demo3 span{
                border-bottom: 2px dashed #000000;
            }
            .demo4 span{
                border-bottom: 2px dotted #000000;
            }
            .demo5 span{
                border-bottom: 5px double #000000;
            }
        </style>
    </head>
    <body>
        <div class="demo">
            <p class="demo1">这是第1段测试文字,<span>网站SEO优化</span>!</p>
            <p class="demo2">这是第2段测试文字,<span>网站SEO优化</span>!</p>
            <p class="demo3">这是第3段测试文字,<span>网站SEO优化</span>!</p>
            <p class="demo4">这是第4段测试文字,<span>网站SEO优化</span>!</p>
            <p class="demo5">这是第5段测试文字,<span>网站SEO优化</span>!</p>
        </div>
    </body>
</html>

border-bottom属性可以通过控制线的粗细、颜色、样式来实现不同的文字下划线样式。

相关文章

文章评论

    发表评论

    电子邮件地址不会被公开。

站点信息
  • 站点运行:227天
  • 网站程序:Wordpress
  • 主题模板:bvseo
  • 文章统计:3199 条
  • 文章评论:21 条
  • 微信公众号:扫描二维码,关注我们