在html中加入如下html,字下面的下划线怎么打?

字下面的下划线怎么打?本文介绍word 文档下面的字打上下划线和html中文字打上下划线,分别实现的方法!

一、word 文档下面的字打上下划线的方法

选中要打下划线的文字,使用快捷键Ctrl+U,即可实现文字下划线效果。

如下图:

72c3e8479476053fdf6352313c89481a.png

二:html中文字下面的下划线

可以通过css的text-decoration或border-bottom属性添加,如下:

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

38e5720c0563967d133d8331f47fc2aa.png

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

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

代码示例:

css 文字添加下划线样式

.demo span{

text-decoration:underline;

}

这是一段测试文字,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属性添加文字下划线样式

代码示例:

css 文字下划线样式

.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;

}

这是第1段测试文字,html中文网!

这是第2段测试文字,html中文网!

这是第3段测试文字,html中文网!

这是第4段测试文字,html中文网!

这是第5段测试文字,html中文网!

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

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值