本文为菜鸟窝编辑吴佳林的连载。
介绍完了WXML，下面就开始介绍WXSS。 WXSS，全称是WeiXin Style Sheets，用来决定 WXML 的组件显示样式。WXSS 具有 CSS 大部分特性，包括选择器，内联样式……在这基础之上，还拓展了尺寸单位，样式导入。下面具体介绍一下。
尺寸单位
在移动端，无论是 Android 或者是 iOS 都有自己的尺寸单位，小程序也有自己的尺寸单位 - rpx（responsive pixel）。这个尺寸单位可以根据可屏幕宽度进行自适应，规定屏幕宽为750rpx，rpx 跟 px 的换算公式是：屏幕宽度/750，px跟rpx 换算公式是：750/屏幕宽度。 比如在 iPhone6 上，屏幕宽度为375px。那么转化成便是 750/375=2rpx,也就是 1px=2rpx，那么在 iPhone6
上转化便是 1rpx = 0.5px，这样如果设计稿如果用 iPhone6 为标准，转化起来也是方便许多。官方也建议开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准 。
样式导入
WXML 有 引入功能，使用的 import语句，WXSS 也是用 import 语句导入外联样式表。使用起来也是非常简单。
1.创建公共的 .wxss 文件，写入样式
.small-p {
padding:5px;
}
2.在需要使用的地方 用@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
@import "common.wxss";
.middle-p {
padding:15px;
}
这样就完成一次样式导入了。
内联样式
内联样式就是把 WXSS 代码直接写在现有的 WXML标签,小程序的框架组件上支持使用 style、class 属性来控制组件的样式。
-
style：在
style=""里面使用样式属性，然后嵌在组件的标签里面。<view style="color:{{color}};" /> -
class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。
<view class="normal_view" />
注意：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
选择器
前端的 CSS 里面提供非常丰富的选择器，WXSS虽然不像 CSS 那样丰富，但是目前支持的选择器也是足以使用。
小程序目前支持的选择器有：
.class, #id , element , :: fter: , ::before
全局样式与局部样式
定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。
关注公众号免费领取" N套客户端实战项目教程"
