• 技术文章 >web前端 >html教程

    高手教您如何取消(加上)下划线样式?两大方法汇总

    云罗郡主云罗郡主2018-10-23 13:39:48原创1859
    html怎么取消(加上)下划线样式?css怎么取消(加上)下划线样式?这对于刚刚入门前端学员来说,却是一道难题,那么如何取消(加上)下划线样式?下面高手为您如何取消(加上)下划线样式。

    其中给文字加上下划线样式,有两种方法,一种是利用html直接对文字进行设置,另外一种就是使用css下划线对样式的设置,下面我们来讲解一下对这两种方法。

    一:html如何取消(加上)下划线

    在html标签中,我们可以使用<u></u>就可以加上下划线,取消的话,就把<u></u>去掉就可以了。

    例如:

    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8" /> 
    <title>html下划线标签实例讲解</title> 
    </head> 
    <body> 
    我是高手!<br />  
    php是网址!<br />  
    <u>//m.sbmmt.com/</u>
    </body> 
    </html>

    html代码效果:

    微信截图_20181023133459.png

    二:使用css样式进行下划线样式的设置

    css可以利用text-decoration:underline进行下划线的取消和加上,例如:

    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8" /> 
    <title>下划线 删除线 上划线实例</title> 
    <style> 
    .php5{text-decoration:underline} /* underline下划线 */ 
    .php5_1{text-decoration:line-through} /* line-through删除线贯穿线 */ 
    .php5_2{text-decoration:overline} /* overline上划线 */ 
    .php5_3{text-decoration:none;} /* none是去掉下划线 */ 
    </style> 
    </head> 
    <body> 
    <div class="php5">我被加下划线</div>  
    <div class="php5_1">我被加贯穿删除线</div>  
    <div class="php5_2">我被加上划线</div> 
    <div class="php5_3">我是去掉下滑线</div> 
    </body> 
    </html> 
    </html>

    代码效果:

    微信截图_20181023133633.png

    以上就是对高手教您如何取消(加上)下划线样式?两大方法汇总的全部介绍,如果你想了解更多有关HTML视频教程,请关注php中文网。

    以上就是高手教您如何取消(加上)下划线样式?两大方法汇总的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:如何用HTML5中的canvas实现渐变文字的效果 下一篇:html标签元素有哪些种类?html的常用标签元素的介绍
    Web大前端开发直播班

    相关文章推荐

    • CSS小例子(只显示下划线的文本框,像文字一样的按钮)_经验交流• css下划线颜色一句话代码_经验交流• 关于超链接的下划线 使用说明_经验交流

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网