微信小程序界面设计入门课程-样式wxss中使用css课程-文本-text-decoration文本装饰

心已赠人 2024-02-19 15:54 58阅读 0赞

### text-decoration文本装饰 ###

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]

**语法**  
接下来，我们讨论 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;/*中间画一个贯穿线*/
    }

效果下图  
![微信小程序界面设计入门课程-样式wxss中使用css课程-文本-text-decoration文本装饰][-_wxss_css_-_-text-decoration]

[欢迎大家收看我的视频教程：微信小程序样式入门到精通(wxss,css)（微信小程序界面设计必备技能）][wxss_css]  
![微信小程序界面设计入门课程-样式wxss中使用css课程-文本-text-decoration文本装饰][-_wxss_css_-_-text-decoration 1]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[-_wxss_css_-_-text-decoration]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/05052c704cc84b65ba19e1e4c9c983ab.png
[wxss_css]: https://ke.qq.com/course/368613?tuin=2b10d56
[-_wxss_css_-_-text-decoration 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/7537f2b3e65c4f95a09da27722a0e292.png