微信小程序 WXSS


当前第2页 返回上一页

示例代码:

/** common.wxss **/
.small-p{
  padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

内联样式

框架组件上支持使用style、class属性来控制组件的样式。

  • style:静态的样式统一写到class中。style接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进style中,以免影响渲染速度。
<view style="color:{{color}};" />
  • class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔。
<view class="normal_view" />

选择器

目前支持的选择器有:

选择器 样例 样例描述
.class .intro 选择所有拥有class="intro"的组件
#id #firstname 选择拥有id="firstname"的组件
element view 选择所有view组件
element, element view checkbox 选择所有文档的view组件和所有的checkbox组件
::after view::after 在view组件后边插入内容
::before view::before 在view组件前边插入内容

全局样式与局部样式

定义在app.wxss中的样式为全局样式,作用于每一个页面。在page的wxss文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖app.wxss中相同的选择器。



标签:微信小程序

返回前面的内容

相关阅读 >>

微信小程序api 调起客户端小程序设置界面

微信小程序api 视频-videocontext

微信小程序云开发服务端api 工具类

微信小程序api nfc-监听接受消息事件

微信小程序云开发sdk文档 微信支付查询退款

微信小程序 消息-位置消息

微信小程序视图容器 scroll-view

微信小程序云开发 api数据库插入记录

微信小程序api 绘图-绘制画布 drawcanvas (不推荐使用)

微信小程序 分包加载

更多相关阅读请进入《微信小程序》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...