大家好,又见面了,我是你们的朋友全栈君。
怎么在HTML页面中给文本添加下划线?下面本篇文章就来给大家介绍一下HTML、CSS给文本添加下划线的方法,希望对大家有所帮助。
HTML添加下划线
在HTML中可以使用标签定义下划线文本,即为文本添加下划线。
下划线标签告诉浏览器把加入到u标签的文本加下划线样式呈现显示给浏览者。对于所有浏览器来说,这意味着要把这段文字加下划线样式方式呈现给大家显示。
语法:
我被加下划线了
说明: 标签定义与常规文本风格不同的文本,像拼写错误的单词或者汉语中的专有名词。
示例:
html下划线标签实例
测试文本!加了下划线的文本 !
效果图:
CSS添加下划线
方法1:使用text-decoration:underline;设置
CSS的text-decoration属性用于指定添加到文本的修饰,其underline属性值可以定义文本下的一条线。
语法:
text-decoration:underline;
示例:
css 文字下划线样式
.demo span{
text-decoration:underline;
}
这是一段测试文字,加了下划线的文本!
效果图:
方法2:使用border-bottom属性
CSS的border-bottom属性可以设置元素下边框样式,这样就可以在文字下添加一条线。
语法:
border-bottom: width style color;
参数:
width:规定下边框的宽度。
style:规定下边框的样式。
color:规定下边框的颜色。
示例:
css 文字下划线样式
.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段测试文字,加了下划线的文本!
这是第2段测试文字,加了下划线的文本!
这是第3段测试文字,加了下划线的文本!
这是第4段测试文字,加了下划线的文本!
这是第5段测试文字,加了下划线的文本!
效果图:
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/136247.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...