900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 初识微信小程序 字体样式设置

初识微信小程序 字体样式设置

时间:2022-09-10 05:54:09

相关推荐

初识微信小程序  字体样式设置

设计一个小程序,分别利用style和class属性设置字体样式,在index.wxss中定义样式类。所有的文字都包含在一个边框内,边框内上方有标题文字,边框和标题样式利用class属性来设置,在app.wxss中定义样式类。

<!--index.wxml--><view class='box'><view class='title'>字体样式设置</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>字体:Cursive、25像素、倾斜、加粗</view></view></view>

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

/**index.wxss**/.fontStyle {font-family: cursive;font-size: 25px;font-style: italic;font-weight: bold;}

利用style和class设置字体样式

view组件支持使用style、class属性来设置组件的样式。利用style可直接在WXML文件中设置,利用class需要先在WXSS文件中定义样式类。静态样式一般使用class设置,动态样式一般使用style设置,这样可以提高渲染速度。

在index.wxss和app.wxss中定义样式类

在app.wxss中定义的样式类属于全局样式类,可以在项目的任何文件中使用。在index.wxss中定义的样式类一般只在index.wxml中使用。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。