设计一个小程序,分别利用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中使用。