设计一个小程序,分别利用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;
}
属性名称 | 含义 | 说明 |
font-family | 字体类型 | Serif、Sans-serif、Monospace、Cursive、Fantasy |
font-size | 字体大小 | 5px/rpx/cm、large、small、medium、larger、smaller |
font-style | 字体倾斜 | italic、normal、oblique |
font-weight | 字体加粗 | bold、bolder、lighter |
利用style和class设置字体样式
- view组件支持使用style、class属性来设置组件的样式。
- 利用style可直接在WXML文件中设置,利用class需要先在WXSS文件中定义样式类。
- 静态样式一般使用class设置,动态样式一般使用style设置,这样可以提高渲染速度。
在index.wxss和app.wxss中定义样式类
- 在app.wxss中定义的样式类属于全局样式类,可以在项目的任何文件中使用。
- 在index.wxss中定义的样式类一般只在index.wxml中使用。