创建一个微信小程序,利用class属性设置文本样式,包括:文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等
<!--index.wxml-->
<view class="box">
<view class='title'>文本样式设置</view>
<view class='textStyle01'>
文本属可以定义文本的外观。通过设置文本属性,可以
改变文本的颜色、字符间距,对齐文本,装饰文本,对文本
进行缩进,等等。
</view>
=====================
<view class='textStyle02'>
North China University of Technology (NCUT)
is located in the western part of Beijing,which
is a municipal
University founded in 1946.
</view>
</view>
/**index.wxss**/
.textStyle01{
color:red;
letter-spacing: 10px;
text-align: left;
text-indent: 50px;
text-decoration: underline;
text-decoration-color: #00f;
line-height: 30px;
white-space: normal;
}
.textStyle02{
text-align: justify;
word-spacing: 20px;
text-transform: uppercase;
white-space: pre-wrap;
}
/**app.wxss**/
.box{
border:1px solid silver;
margin: 20rpx;
padding: 20rpx;
}
.title{
font-size: 25px;
text-align: center;
margin-bottom: 15px;
color: red;
}
属性名称 | 含义 |
color | 字体颜色 |
text-align | 文本的对齐方式 |
text-indent | 首行缩进 |
letter-spacing | 字母之间的距离 |
word-sapcing | 单词间距,以空格来区分单词 |
white-sapce | 文档中的空白处 |
text-decoration | 文本修饰样式 |
text-decoration-color | 文本修饰颜色 |
设置文本样式的方法
- 利用style和class属性进行设置。