页面样式文件WXSS:小程序版CSS

WXSS（WeiXin Stytle Sheets）是一套样式语言，用于描述WXML的组件样式。它决定WXML该怎么显示。具有CSS的大部分属性。

WXSS与CSS的区别

1、引入了新的尺寸单位rpx；
2、与选择器相比CSS有缩减；
3、有全局样式和局部样式的明确区分；
4、可自动优化；

尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

注意： 建议使用iPhone6作为视觉稿的标准。在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

选择器与优先级

选择器	样例	样例描述
.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前边插入内容

选择器的用法：
1、标签内样式：动态样式，如特定场景下的属性设置；
2、ID选择器：针对某个特定的组件进行属性的设置；
3、类选择器：针对某一类组件进行属性的设定；
3、标签选择器：针对全局某一组件进行属性的设定；
选择器的优先级决定了那个选择器优先级被优先选择。WXSS选择器的优先级如下所示：

优先级优先规则：权重越高，优先级越高；相同权重以 后面出现的的选择器为最后的规则。例：
view.content
view权重为1，.content的权重为10
最终权重为11.
view#content
权重为101即：view权重1加上#content权重100

内联样式

同HTML一样，样式除了写在WXSS中，也可以通过设置style、class属性控制样式。
1、class：用于指定样式规则，其属性值是样式样式规则中类选择器名（样式类名）的集合，样式类名之间用空格隔开，不需要带上“.”。示例：
<view class=“normal_view”/>
2、style：接收动态样式，在运行时解析。
<view style="color:{{color}};" />

一般静态样式可以统一写在class中，style样式会在运行时解析，如非特别需要，尽量避免将静态样式写在style中，以避免影响渲染速度。

样式导入

通常在项目中为了便于管理会将WXSS按职责分为多个文件，这是需要@import语句在当前WXSS语句中导入其他WXSS文件，@impor后写入需要导入WXSS文件的相对路径，用“；”表示语句结束。例如：在app.wxss中导入common.wxss。代码如下：

/**common.wxss**/
.small-p{
padding:5px;
}
/**app.wxss**/
@import “common.wxss”;
.page-container{
padding:10px;
}