微信小程序界面设计入门课程-样式wxss中使用css课程-文本-text-transform字符转换

骑猪看日落 2024-02-19 15:54 15阅读 0赞

### 样式wxss中使用css课程-文本-text-transform字符转换 ###

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

基础用法  
text-transform 属性处理文本的大小写。

> 这个属性有 4 个值：none | uppercase | lowercase | capitalize

作为一个属性，text-transform 可能无关紧要，不过如果您突然决定把所有 h1 元素变为大写，这个属性就很有用。不必单独地修改所有 h1 元素的内容，只需使用 text-transform 为你完成这个修改：
    
    h1 {text-transform: uppercase}

使用 text-transform 有两方面的好处。首先，只需写一个简单的规则来完成这个修改，而无需修改 h1 元素本身。其次，如果您以后决定将所有大小写再切换为原来的大小写，可以更容易地完成修改。

属性值如下  
值 描述  
none 默认。定义带有小写字母和大写字母的标准的文本。  
capitalize 文本中的每个单词以大写字母开头。  
uppercase 定义仅有大写字母。  
lowercase 定义无大写字母，仅有小写字母。  
inherit 规定应该从父元素继承 text-transform 属性的值。

### 小程序应用 ###

> Wxml代码

<view class='cls1'>
    huang ju HUA
    </view>
    
    <view class='cls2'>
    huang ju HUA
    </view>
    
    <view class='cls3'>
    huang ju HUA
    </view>

> Wxss代码

.cls1{
       text-transform: uppercase;/*大写*/
    }
    .cls2{
       text-transform:lowercase;/*小写*/
    }
    .cls3{
       text-transform: capitalize;/*首字母大写开头*/
    }

效果如下图  
![微信小程序界面设计入门课程-样式wxss中使用css课程-文本-text-transform字符转换][-_wxss_css_-_-text-transform]

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

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[-_wxss_css_-_-text-transform]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/59a33efe4fee42268049004ff79bb5bd.png
[wxss_css]: https://ke.qq.com/course/368613?tuin=2b10d56
[-_wxss_css_-_-text-transform 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/7b693f6e49114d428d7d11e36f9b8f7e.png