字下面的下划线怎么打?本文介绍word 文档下面的字打上下划线和html中文字打上下划线,分别实现的方法!
一、word 文档下面的字打上下划线的方法
选中要打下划线的文字,使用快捷键Ctrl+U,即可实现文字下划线效果。
如下图:
二:html中文字下面的下划线
可以通过css的text-decoration或border-bottom属性添加,如下:
文字下面的下划线可以通过css的text-decoration或border-bottom属性添加。text-decoration属性添加的下划线是最简单样式,border-bottom属性可以设置不同样式的下划线。
下面我们通过简单的代码示例,为大家详细介绍一下这两种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属性可以通过控制线的粗细、颜色、样式来实现不同的文字下划线样式。