第四篇：微信小程序的【WXSS模板】

前提：建议还没学HTML、CSS、JavaScript、JSON、vue、Ajax的兄弟姐妹们，先去把这些基础补好过一遍，不然不好理解微信小程序

一、什么是wxss？

就是类似css，用于美化WXML组件的样式，是样式语言

二、跟css有什么区别？

扩展性：1、wxss多了个rpx尺寸单位，css里的px在wxss里也可以用，但是css没有rpx单位

               2、多了个@import导入样式

选择器有所不同

三、rpx单位

rpx单位就是自动将每一个设备的宽度分成750份，也就是750rpx，有点类似css的栅格布局，那么这样一来，大的设备1rpx就大，小的设备1rpx就小。

然后rpx会对应大小换算成px像素单位，比如一个iphone 6宽度是375px，那么这里376px = 750rpx，那么1 rpx = 0.5 px = 1 物理像素，知道这个逻辑有的时候就可根据给出的px单位的长和宽，设计对应的rpx单位的长和宽。

四、@import样式导入

在HTML里，导入外部css样式到HTML页面，但是微信小程序是直接在WXSS文件里导入别的外部WXSS样式。

用法很简单：@import "外部WXSS的相对路径" ;  (这里别漏了分号“;”，其他地方可以没有，这个地方必须要有)

五、全局样式和局部样式

其实第一篇也差不多说过了，然后学过css的也知道这个样式权重的问题，我就简单带过了

app.wxss的文件里的就是全局样式，对整个项目所有页面都生效，比如让view背景颜色变蓝，那所有页面的view都会变蓝

单个页面的.wxss的文件里的是局部样式，针对当前页面有效，当全局样式里有和局部样式一样的选择器，那么优先选择局部的样式，会覆盖全局的样式。BUT，如果全局有权重更大的样式，也还是会覆盖回局部样式，这里简单举个例子：比如在局部样式设置view背景颜色都变成蓝色，然后在全局样式设置view:ntd-child(1)背景颜色是红色，那么很明显view:ntd-child(1)的权重更大，第一个view就会变成红色，至于怎么看权重，鼠标悬浮停留在选择器那会看到

前面数字越大说明权重越大

然后好像就没什么好说的了，不知道怎么写样式代码的一定要去b站看一下css的视频，黑马程序员讲的还可以，快速过一遍先，学得快的有能力的可以再学一下bootstrap，这个是一个框架，别人写好的css样式，引入就行的。

下一篇讲：配置