您的位置:CSS主页 > CSS基础 >

DIV CSS text-decoration下划线、删除线、上划线样式属性教程

 

本节介绍使用div+css样式CSS text-decoration属性实现文字字体CSS下划线、文字CSS删除线CSS上划线样式。

CSS划线目录
  1. css语法
  2. 去掉html划线样式
  3. 下划线删除线上划线案例
  4. 在线演示
  5. 总结CSS下划线删除线

一、css语法   -   TOP

text-decoration:none 无装饰,通常对html下划线标签去掉下划线样式
text-decoration:underline 下划线样式
text-decoration:line-through 删除线样式-贯穿线样式
text-decoration:overline 上划线样式

上划线、删除线、上划线CSS样式解析图:


css下划线、css删除线、css上划线样式解析图

二、去掉html划线样式   -   TOP

如果我们想去掉对应html删除线s标签删除线样式、去掉html下划线u标签样式、去掉html上划线样式。

1、去掉html s删除线贯穿线样式
.thinkcss s{text-decoration:none}
去掉thinkcss类对象盒子里s标签删除线样式属性

2、去掉html u下划线样式
.thinkcss u{text-decoration:none}
去掉thinkcss类对象盒子里u标签下划线线样式属性

三、下划线删除线上划线案例   -   TOP

我们进行对3个盒子对象分别设置对象内文字下划线、文字删除线样式、字体上划线样式。

1、css代码片段:
.thinkcss{text-decoration:underline}
.thinkcss1{text-decoration:line-through}
.thinkcss2{text-decoration:overline}

2、html代码片段:
<div class="thinkcss">我被加下划线</div>
<div class="thinkcss1">我被加贯穿删除线</div>
<div class="thinkcss2">我被加上划线</div>

3、css删除线、css下划线、css上划线案例截图


删除线、下划线、上划线案例演示截图

四、在线演示   -   TOP

http://www.thinkcss.com/yanshi/css-text-decoration.html

五、总结下划线删除线上划线css样式   -   TOP

对应对象内的文字设置下划线、删除线(贯穿线)、上划线我们只需要对该内添加text-decoration css样式单词+样式值即可实现。如果要对去掉html s删除线样式和去掉html u下划线样式,我们只需对html uhtml s设置text-decoration:none即可去掉html删除线样式和html下划线样式(如上教程二)。

标签(Tag): 下划线 删除线 上划线

更多

 

HTML必备基础教程

 

CSS必备基础教程

 

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解。
CSS教程文章修订日期:2012-10-07     点击:
原创来源:ThinkCSS     来源网址:http://www.thinkcss.com/view/c78.html
本文WWW.ThinkCSS.COM(DIV CSS) ThinkCSS版权所有,欢迎转载,并注明出处来源及URL!

 

推荐信息