学习CSS3笔记——字体装饰线text-decoration

这个故事发生在某天，到华南植物园周边喝完早茶回公司，上网收集有趣的文字，整理修订多年前写好的《JavaScript》教程，并创作汉语SEO要用的《CSS语言》教程，存起来以后当文化传播作品使用。

一边整理《JavaScript》教程,一边在网上和女粉丝侃大山。突然间，一个说自已是从辽宁沈阳来广州学现代汉语的女粉丝问：“陈老师，最近文化传播教程又打算教点什么新东西？”。
我问：“你们都想学啥？”。
女粉丝说：“陈老师！我想知道去除A标签的下划线方法。“下面就给大家讲下。

在CSS语言中，使用text-decoration属性来定义段落文本的下划线、删除线和顶划线。如语法1和表1。

text-decoration: ...属性值...;

属性值	说明
none	默认值，可以用这个属性值也可以去掉已经有下划线或删除线或顶划线的样式
underline	划线
line-through	删除线
overline	上划线

使用css语言，设计1个css语言的id，控制内容显示时带有下划删除线，内容如css语言1。

#Q2838697670
{
text-decoration:underline;
}

使用css语言，设计1个css语言的id，控制内容显示时带有删除线，内容如css语言2。

#QQ2838697670
{
text-decoration:line-through;
}

使用css语言，设计1个css语言的id，控制内容显示时带有上划线，内容如css语言3。

#QQQ2838697670
{
text-decoration:overline;
}

使用html语言，设计p标签元素配合本次试验用，并在p标签元素中调用前面设计好的css语言id配合试验用，内容如html语言1。

微信公众号：design-Rabbit
微信公众号：design-Rabbit
微信公众号：design-Rabbit

把前面设计好的把css语言1~3和html语言1，移植到html5基础框架中，内容如综合代码1。

微信公众号：design-Rabbit
微信公众号：design-Rabbit
微信公众号：design-Rabbit

综合代码1，就可以看到图1的效果，如果还不会运行方法，可以看我以前写的Html5，学习代码运行方法。

注：看到图1页面中字体显示乱马时charset="GB2312"可以改成charset="utf-8"或改为其它的编码方式。有的浏览器会阻止脚本运行，这时请大家换下浏览器例如用IE浏览器或看下防火墙或看下杀毒软件有没报错。

图1

我们从图1中可以看出第一行下划线在最低，第二行删除线在中间，第三行上划线在最顶上，看到这个效果就成功了。

好！杰哥CSS3学习笔记分享到这里，要知后事如何请关注、分享、收藏，如果喜欢请打赏。