一、WXSS
1.WXSS
WXSS(WeiXin Style Sheets)是一套样式语言，用于美化WXML的组件样式，类似于网页开发中的CSS
2.WXSS和CSS的关系
WXSS具有CSS大部分特性，同时，WXSS还对CSS进行了扩充以及修改，以适应微信小程序的开发。与CSS相比，WXSS扩展的特性有：
（1）rpx尺寸单位
（2）@import样式导入
二、rpx
1.rpx
rpx(responsive pixel)是微信小程序独有的，用来解决屏适配的尺寸单位
2.rpx的实现原理
鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为750份(即：当前屏幕的总宽度是750rpx)
在较小的设备上，1rpx所代表的宽度较小；在较大的设备上，1rpx所代表的宽度较大
小程序在不同设=设备上运行的时候，会自动把rpx的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配
3.rpx和px之间的单位换算
官方建议：在开发小程序时，可以使用iPhone6视觉稿的标准
二、样式导入
1.样式导入
使用WXSS提供的@import 语法，可以导入外联的样式表
2.@import 的语法格式
@import 后跟需要导入的外联样式表的相对路径，用 ; 表示语句结束
例如：
新建一个common文件夹，然后再新建一个common.wxss文件
然后将common.wxss导入到index.wxss
在index.js文件中：
// index.js Page({ //页面的初始数据 data: { arr1:[1,2,3,4,5], userList:[ {id:1,name:'Candy'}, {id:2,name:'Lucy'}, {id:3,name:'Rocky'} ] } })
在index.wxml文件中：
<!--index.wxml--> <view wx:for="{{userList}}" wx:key="id" class="username">{{item.name}}</view>
调试结果为：
我们可以看到页面中显示的数据以及被渲染成红色，说明common.wxss导入成功
三、全局样式
1.全局样式
定义在app.wxss中的样式为全局样式，作用于每一个页面
/**app.wxss**/ .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; } view{ padding: 10rpx; margin: 10rpx; background-color: lightskyblue; }
我们在pages中新建一个test文件夹
{ "pages": [ "pages/test/test", "pages/index/index", "pages/logs/logs" ], "window": { "navigationBarTextStyle": "black", "navigationBarTitleText": "Weixin", "navigationBarBackgroundColor": "#ffffff" }, "style": "v2", "componentFramework": "glass-easel", "sitemapLocation": "sitemap.json", "lazyCodeLoading": "requiredComponents" }
在test.wxml中：
<!--pages/test/test.wxml--> <view>123</view> <view>123</view>
调试后可以看到：
此时将index页面调至前面保存后我们可以看到背景色也变成了蓝色
说明在app.wxss中的样式作用于每一个页面
但是如果个别页面需要特殊化，此时就需要用到局部样式
2.局部样式
在页面的.wxss文件中定义的样式为局部样式，只作用于当前页面
例如：在test.wxss中：
/* pages/test/test.wxss */ view{ color: white; }
调试后可以看到文本颜色变成了白色：
注意：（1）当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
（2）当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式
当我们把鼠标放在view上：
我们发现其权重为（0，0，1）
当我们把鼠标放在view:nth-child上：
我们发现其权重为（0，1，1），大于（0，0，1）
此时第一个文本的背景颜色变成了粉色：
所以当局部样式的权重大于或等于全局样式的权重时，会覆盖全局的样式
