您的位置:CSS5 > CSS笔记 >

html 下划线标签与CSS下划线样式

发布日期:2020-02-18 22:50:18 来源:未知

一、用HTML标签来布局下划线

1、下划线的HTML标签:

U

2、用法:

<u>我被添加下划线了</u>

3、效果:

使用下划线标签
对下划线标签的使用案例

下划线元素标签很简单,就使用“<U>”标签即可对文字加下划线,方便快捷。

二、CSS来布局下划线样式

使用CSS样式来布局,比如对a设置,对span设置,对div内容某段文字设置都可以,想要的灵活都能做到。

1、下划线样式与值

text-decoration:underline

2、用法

css代码:

.abc{text-decoration:underline}

html代码:

<div class="abc">我在div内也被加下划线了</div>

3、效果截图


div内文字加下划线

三、css技巧加下划线

在一段文字中某几个字只加下划线样式,是遇到比较多的情况。

这种情况,如果不使用u标签加下划线,就用span标签,对其设置class引入下划线样式

CSS代码:

.xhx{ text-decoration:underline}

html代码<body>里内容:

<p>我是测试内容,欢迎访问<span class="xhx">CSS5网</span>学习CSS!</p>

技巧特点:因为span默认什么样式都没有,所以在一段文字加span和加没有区别,这个时候可以使用对其设置另外css样式达到我们布局想要样式。

以上那段文字,没有使用u标签下划线,使用span来引入外部css下划线样式。正式利用span特性。

四、超链接的下划线

当然下划线也是通过a超链接使用比较多的。

通常超链接默认不显示下划线,鼠标悬停超链接文字上时显示下划线。

默认超链接自带下划线,这个时候需要对a去掉下划线,对a:hover悬停设置下划线就实现。

具体超链接文字默认去掉下划线,鼠标悬停显示下划线的代码:

a{ text-decoration:none}
a:hover{ text-decoration:underline}

这个也是所有网页最开始CSS设置超链接初始化样式的代码。

标签(Tag): css 下划线 html 标签
本文分享URL地址:https://www.css5.com.cn/biji/1624.shtml

作者:CSS5

上一页:上一篇:css边框样式-拷贝代码就可以试一试掌握边框属性
下一页:下一篇:div隐藏的方法