初识⼩程序⽂本样式设置
创建⼀个⼩程序,利⽤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;
text align center
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⾸⾏缩进
text-indent⾸⾏缩进
letter-spacing字母之间的距离
word-sapcing单词间距,以空格来区分单词
white-sapce⽂档中的空⽩处
text-decoration⽂本修饰样式
text-decoration-
⽂本修饰颜⾊
color
设置⽂本样式的⽅法
利⽤style和class属性进⾏设置。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论