1. 字体样式设置

注意：如果是在app.wxss中设置的class可以在整个小程序中使用！

静态样式一般用class设置，动态样式一般用style设置，提高渲染速度。

1. 用style，font-family:字体;font-size:大小;

会发现有提供标准的比如large,small这类，也可以用

<view style="font-family:sans-serif;font-size:30px;"><view>利用style设置字体</view><view>字体：sans-serif,大小30像素</view>

在本段的view上用则改变本段内字体效果，本段一共有两段。效果如图所示：

b. 用class，内容和上述差不多，还是font-family,font-size,font-style,font-weight这一套

其中font-style输入，系统会自动联想两种选择，normal是正常，另一种是倾斜。

font-weight:bold是加粗，还可以是bolder，light，lighter……。

.my_style{font-family:cursive;font-size:25px;font-style:italic;font-weight:bold;
}

<view class="my_style"><view>利用class设置字体</view><view>字体:cursive,25像素，倾斜，加粗</view>
</view>

效果如图：

每个段落都可以加框框，没有限制

.box{border:1px solid red;margin:20rpx;padding:20rpx;
}

margin代表对外（对上一段下一段和左右屏幕），上下左右的距离；同理，margin-bottom就是定义对外的下边距

padding代表对内上下左右的距离

1. 文本样式设置

上案例：

.my_style{color:violet;letter-spacing: 10px;text-align:left;text-indent:40px;text-decoration: underline;text-decoration-color: turquoise;line-height:30px;white-space:normal;
}

color是字的颜色

letter-spacing是字符间距（其中由于英语之类的语言是由字母组成，一个字母是一个字符，所以要改为单词间距word-spacing）

text-align左对齐、右对齐、居中的设置（由于英语等语言单词长度不同，左右都要对齐，可选用justify）

text-indent段落缩进

text-decoration文本装饰设置、比如说下划线

text-decoration-color该装饰的颜色

line-height行高

white-space：空白区域怎么处理（正常处理，填满——>飞出屏幕外，prewrap该保留的空白保留该换行的换行——>对字母单词很有用，等等）

另外字母想要全部大写可以用text-transform，选择uppercase

1. 图片与声音

要求：点击一张图片，该图片会发出声音

首先将图片和音频文件放到该程序文件下（强制放在根目录，否则音频无法在手机上播放）。

图片插入方式为image，后面自动弹出的src中要填图片的地址。已知点击事件函数为bindtap。

对于声音，需要在bindtap中和图片绑定在一起。声音的引入方式（可以认为是定义该变量为音频）：wx.createInnerAudioContext()，接下来同样，我们需要给该音频变量提供src。现在变量已经定义完善，最后要表明点击后对该变量的操作。我们这里想要播放音频，可以使用play()。

代码如下：

<view class="box"><view class="title">一张图片</view><view><image src="{{imgSrc}}" bindtap="catcat"/></view>
</view>

const app = getApp()
Page({data: {imgSrc:"/somephoto.jpg"},// 事件处理函数catcat:function(){let audio=wx.createInnerAudioContext();audio.src="/audiovoice.m4a";audio.play();}
})

1. 总结

数据绑定：wxml文件中的数据用{{}}和js文件中的数据进行绑定

函数绑定：bind...=""将...事件和js中的函数进行绑定