html5中文学习网

您的位置: 首页 > 视频教程 > CSS3视频教程 » 正文

DIV CSS如何给文字字体添加下划线?_Div+Css教程

[ ] 已经帮助:人解决问题

使用css div如何给文字添加下划线样式呢?使用css对文字字体添加下划线样式方法教程。eRKHTML5中文学习网 - HTML5先行者学习网

对字体文字加下划线样式,有两种方法,一直直接使用html下划线标签,另外一种是使用CSS下划线样式。eRKHTML5中文学习网 - HTML5先行者学习网

接下来为大家介绍对文字字体实现下划线方法教程,通过案例方式让大家作为两种对文字加下划线样式。eRKHTML5中文学习网 - HTML5先行者学习网

一、html标签实现下划线  

在html标签中对需要加下划线的文字加<u></u>即可实现加下划线样式。eRKHTML5中文学习网 - HTML5先行者学习网

1、标签语法:eRKHTML5中文学习网 - HTML5先行者学习网

  1. <u>我被加下划线了</u> 

2、html实例源代码eRKHTML5中文学习网 - HTML5先行者学习网

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8" /> 
  5. <title>html下划线标签实例 www.divcss5.com</title> 
  6. </head> 
  7. <body> 
  8. 我是divcss5!<br />  
  9. divcss5是网址<u>www.divcss5.com</u> !  
  10. </body> 
  11. </html> 

 eRKHTML5中文学习网 - HTML5先行者学习网

二、css样式实现下划线样式 

使用CSS样式单词:text-decoration:underlineeRKHTML5中文学习网 - HTML5先行者学习网

1、语法eRKHTML5中文学习网 - HTML5先行者学习网

  1. div{text-decoration:underline} 
  2. /* css注释说明:这样的表达将让DIV标签内文字字体加上下划线 */ 

2、div css实现下划线实例代码eRKHTML5中文学习网 - HTML5先行者学习网

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8" /> 
  5. <title>下划线 删除线 上划线实例 www.divcss5.com</title> 
  6. <style> 
  7. .divcss5{text-decoration:underline} /* underline下划线 */ 
  8. .divcss5_1{text-decoration:line-through} /* line-through删除线贯穿线 */ 
  9. .divcss5_2{text-decoration:overline} /* overline上划线 */ 
  10. </style> 
  11. </head> 
  12.  
  13. <body> 
  14. <div class="divcss5">我被加下划线</div>  
  15. <div class="divcss5_1">我被加贯穿删除线</div>  
  16. <div class="divcss5_2">我被加上划线</div>  
  17. </body> 
  18. </html> 
(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助