1、样式的三种写法
页面样式的三种写法：（1）行内样式、（2）页面样式 page.wxss、（3）全局样式 app.wxss。都可以作用于页面的组件
<!--1.行内（内联）样式-->
<view style='color:red; font-size:32px'>你是一只小憨憨</view> <!--样式：键值对的形式-->
<!--2.页内样式-->
<view class='box'>你是一只小憨憨</view> <!--通过类选择器.box{}，到page.wxss中写样式-->
<!--3.全局样式-->
<view class='container'>你是一只小憨憨</view> <!--通过类选择器.container，到app.wxss中写样式-->
如果有相同的样式，优先级依次是：行内样式 > 页面样式 > 全局样式。
2、小程序支持的选择器
| 选择器 | 样例 | 样例描述 | |||
|---|---|---|---|---|---|
| . class | . intr | 选择所有拥有 class="intro" 的组件 | |||
| #id | #firstname | 选择拥有 id="firstname" 的组件 | |||
| element | view | 选择所有 view 组件 | |||
| element,element | view | checkbox 选择所有文档的 view 组件和所有的 checkbox 组件 | |||
| :: after | view :: after | 在 view 组件后边插入内容 | |||
| :: before | view :: before | before 在 view 组件前边插入内容 | |||
| 选择器的权重： | !import ：∞ | style="" ：1000 | #id ：100 | .class ：10 | element ：1 |
3、wxss的扩展-尺寸单位
尺寸单位：rpx（responsive pixel）：可以根据屏幕宽度进行自适应，以达到不同机型适配的效果，规定屏幕宽为 750rpx。 如在 iPhone6 上，屏幕宽度为375px，共有 750个 物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素。
wxss中的单位：rpx，类似前端进行配置尺寸的适配：em/rem/vw/vh，目的就是为了达到不同机型适配的效果，适用于各种组件的样式和字体，开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
| 设备 | rpx换算px（屏幕/750） | px换算rpx（750/屏幕宽度） |
|---|---|---|
| iPhone5 | 1rpx=0.42px | 1px=2.34rpx |
| iPhone6 | 1rpx=0.5px | 1px=2rpx |
| iphone5 Plus | 1rpx=0.552px | 1px=1.81rpx |
4、wxss的扩展-样式导入
在某些情况下，可能会将样式分在多个 wxss 文件中，方便对样式的管理（实际项目中，一般不会将一个页面的所有样式都写到一个 page.wxss 文件中，而是在该页面文件夹下新建一个 style 文件夹，其中新建一些 wxss 文件，方便管理样式），这个时候，就需要使用样式导入（将 style 文件夹下的 wxss 文件导入到 page.wxss 中），从而让单独的 wxss 生效。
在一个 wxss 中导入另一个 wxss 文件：（1）使用 @import 进行导入（2） @import 后跟需要导入的外联样式表的相对路径（或者绝对路径也可以），用 ； 表示语句结束。
/*page.wxss为文件中导入其他 wxss 样式*/
@import './style/box.wxss';
@import './style/container.wxss';
也可以在 app.wxss 中导入一些 wxss 样式文件，比如在实际项目开发中可能会用到很多按钮，为了使这些按钮样式得到统一，就可以在 app.wxss 中导入一个专门为按钮写的样式。上面这种情况在开发中一般会在根目录下新建一个 style 文件夹，然后再在该文件夹下新建一个 btn.wxss 样式文件： .btn{width:100px；height:60px；display:inline-block}; 。然后到 app.wxss 文件中对该文件进行导入： @import './style/btn.wxss'; 。 完成上述步骤之后，在项目开发中，只需要对按钮组件加上一个 .btn类名 即可。
5、官方样式库
小程序为了减少开发者样式开发的工作量，官方提供了 WeUl.wxss 基本样式库：传送门。用微信web开发者工具打开 dist 目录（请注意，是 dist 目录，不是整个项目），打开即可看到各种各样微信官方提供的各种组件的各种样式，需要使用时直接将需要的组件的 wxml 代码 和根目录下的 style/weui.wxss ****拷贝到项目中，注意：还需要组件对应的 js 文件（实现组件功能）。
如果只是需要引入一个组件的样式，其实不需要为了一个组件引入style/weui.wxss ****一整套样式到项目中。比如想要引入一个 button 组件的样式，可以直接把 widget/weui-button/weui-button.wxss 的样式引入到项目中，然后到指定文件中把样式导入，注意：还需要组件对应的 js 文件（实现组件功能）。
