 |
位置：电子教程 > 微信小程序设计教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
|
位置：电子教程 > 微信小程序设计教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
| 当前阅读教程：微信小程序设计教程 > 字符转换（text-transform） | |||||||||||||
| 阅读(22555525) 收藏 赞(5685) 分享 | |||||||||||||
| 上一篇： 文本阴影（text-shadow） | 下一篇： 处理空白符（white-space） | ||||||||||||
1.基础语法text-transform 属性处理文本的大小写。 属性值如下：
作为一个属性，text-transform 可能无关紧要，不过如果你突然决定把所有 h1 元素变为大写，这个属性就很有用。不必单独地修改所有 h1 元素的内容，只需使用 text-transform 为你完成这个修改，代码示例如下： h1 {text-transform: uppercase} 使用 text-transform 有两方面的好处。首先，只需写一个简单的规则来完成这个修改，而无需修改 h1 元素本身。其次，如果你以后决定将所有大小写再切换为原来的大小写，可以更容易地完成修改。 2.小程序应用根据基础的语法，下面在微信小程序中实现字符的大小写转换。 .wxml文件代码示例如下： <view> <!--通过样式转换成全部大写--> huang ju HUA </view> <view> <!--通过样式转换成全部小写--> huang ju HUA </view> <view> <!--通过样式转换成单词首字母大写--> huang ju HUA </view> .wxss文件代码示例如下： .cls1{
text-transform: uppercase;/*大写*/
}
.cls2{
text-transform:lowercase;/*小写*/
}
.cls3{
text-transform: capitalize;/*首字母大写开头*/
}效果如图3-12所示。
|
|||||||||||||
| 上一篇： 文本阴影（text-shadow） | 下一篇： 处理空白符（white-space） | ||||||||||||
