微信小程序自学笔记-----文本和字体样式设置

微信小程序自学笔记-----文本和字体样式设置

用于自己自学微信小程序知识点总结，新手小白一枚，请大佬勿喷

知识要点
· 各种字体样式属性命名及含义
· 利用style和class设置字体样式的方法
· 在index.wxss和app.wxss定义样式的方法
· 各种文本样式属性命名及其含义
· 设置文本样式的方法
案例描述
设计一个小程序，分别利用style和class属性设置字体样式，在index.wxss中定义样式类。所有的文字都包含在一个边框内，边框内上方有标题。文字，边框和标题样式利用class属性来设置，在app.wxss中定义样式类。利用class属性设置文本样式包括：文本颜色、字符缩进、对齐文本、装饰文本、对文本进行缩进等等。
实现效果

index.wxml文件代码 app.wxml.

<!--index.wxml-->
<view class="box">
  <view class="title">字体样式设置</view>
  <view class="textStyle01">
    文本的属性可以定义文本的外观。通过设置文本的属性，您可以改变文本的颜色、
    字符间距，对齐文本，装饰文本，对文本进行缩进等等。
  </view>
  ==============================
  <view class="textStyle02">
    I have a good friend, and her name is Li Hua. We have become friends for about two years. She is very kind. When I
   step into the classroom for the first time, she helps me to get familiar with the strange environment. The most
    important thing is that we share the same interest, so we have a lot in common. I cherish our friendship so much
  </view>
  ==============================
  <view style="font-family:sans-serif;font-size:30px;">
    <view>利用Style设置字体样式</view>
    <view>字体：sans-serif,30像素</view>
  </view>
  ==============================
  <view class="fontStyle">
    <view>利用Class设置字体样式：</view>
    <view>字体：Curseive。</view>
  </view>
</view>

index.wss文件代码 index.wxss.

/**index.wxss**/
.fontStyle{
  font-family: cursive;
  font-size: 25px;
  font-style: italic;
  font-weight: bold;
}
.textStyle01{
  color: blue;
  letter-spacing: 10px;
  text-align: left;
  text-indent: 50px;
  text-decoration: underline;
  text-decoration-color: chartreuse;
  line-height: 30px;
  white-space: normal;
}
.textStyle00{
  text-align: justify;
  word-spacing: 20px;
  text-transform: uppercase;
  white-space: pre-wrap;
}

app.wss文件代码 app.wxss.

/**app.wxss**/
.box{
  border: 1px solid silver;
  margin: 20rpx;
  padding: 20rpx;
}
.title{
  font-size: 25px;
  text-align: center;
  margin-bottom: 15px;
  color: red;
}

· view组件支持使用 style、class属性来设置组件的样式，静态的样式一般写到class中，动态的样式一般写到style中，这样能够提高渲染的速度
· class引用的样式类可以在index.wxss和app.wxss中定义。
在app.wxss中定义的样式属于全局样式类，可以在项目的任意文件中使用
在index.wxss中定义的样式类一般只在index.wxml中使用

各属性名和含义

打卡微信小程序学习第一天！！！