2018-02-12

WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式

WXSS 用来决定 WXML 的组件应该怎么显示。

WXSS 具有 CSS 大部分特性,但是为了更加适用于微信小程序开发,WXSS 对 CSS 进行了扩充以及修改,与 CSS相比,它的扩展特性有:尺寸单位,样式导入。

尺寸单位:rpx(  responsive pixel ) :可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在 iPhone6 上,屏幕宽度为 375px,共有750个物理像素,则 750rpx = 375px = 750 物理像素,1rpx = 0.5px = 1 物理像素。同时针对不同机型有不同的换算比列。

样式导入:使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。

                    /** 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" />

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

选择器:选择器                            样例                                    样例描述

                 .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 组件前边插入内容

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 143. 为什么不能送教材? 我们不提倡送教材,除非他们珍惜,签订读经责任书。要是一套价值百万元的房子,现在总价几...
    俊妈李利阅读 1,410评论 1 1
  • 投资果然是每天都可以精进的事。因为直接涉及到金钱利益,倒逼着自己必须认真观察市场的变化、思考投资决策的过程。其本质...
    唯思不破阅读 1,118评论 0 0
  • 去年在这里写了“关于比特币的5个想法”,貌似是这里的第一篇关于比特币的文章,今天在这里介绍一下比特币的协议。 本文...
    杨硕阅读 7,730评论 0 15
  • 今天早上上班的路上接到一个陌生电话,电话中传来一个陌生男子的声音说:“京东快递,杨先森在家吗”? 我说:“你把快递...
    我叫杨洋阅读 9,790评论 4 9