小程序CSS入门

小程序样式课程-第9课-文本-text-decoration文本装饰

时间:2019/1/2 15:00:42  作者:互联网  来源:网络转载  查看:25867  评论:0
内容摘要: 语法接下来,我们讨论 text-decoration 属性,这是一个很有意思的属性,它提供了很多非常有趣的行为。text-decoration 有 5 个值:none | underline | overline | line-through | blink不出所料,...

 

语法

接下来,我们讨论 text-decoration 属性,这是一个很有意思的属性,它提供了很多非常有趣的行为。

text-decoration 5 个值:none | underline | overline | line-through | blink

不出所料,underline 会对元素加下划线,就像 HTML 中的 U 元素一样。overline 的作用恰好相反,会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线,等价于 HTML 中的 S strike 元素。blink 会让文本闪烁,类似于 Netscape 支持的颇招非议的 blink 标记。

none 值会关闭原本应用到一个元素上的所有装饰。通常,无装饰的文本是默认外观,但也不总是这样。例如,链接默认地会有下划线。如果您希望去掉超链接的下划线,可以使用以下 CSS 来做到这一点:

a {text-decoration: none;}

注意:如果显式地用这样一个规则去掉链接的下划线,那么锚与正常文本之间在视觉上的唯一差别就是颜色(至少默认是这样的,不过也不能完全保证其颜色肯定有区别)。

小程序应用

Wxml代码

<view>

  <text class='cls1'>顶端线条</text>

  <text class='cls2'>底部线条</text>

  <text class='cls3'>中间贯穿线</text>

</view>

Wxss代码

view{

  margin-top: 10px;/*距离顶部的外边距*/

}

/*文本装饰*/

.cls1{

 text-decoration: overline;/*上划线*/

}

.cls2{

 text-decoration: underline;/*下划线*/

}

.cls3{

 text-decoration: line-through;/*中间画一个贯穿线*/

}

效果下图

  小程序样式课程-第9课-文本-text-decoration文本装饰

欢迎大家支持我的视频课程:微信小程序样式开发入门 
小程序样式课程-第1课-样式基础-元素选择器



相关评论
评论者:      验证码:  点击获取验证码
咨询QQ/微信:45157718 点击这里给我发消息 | 电话:13516821613 | 浙江杭州余杭区东港路118号雷恩科技创新园 | 网站支持:杭州摇亿网络科技 | 浙ICP备06056032号-6 |