文章目录
- WXSS编写样式
- 小程序的小程序使写样样式写法
- WXSS支持的选择器
- WXSS扩展-尺寸单位
- WXSS样式导入
WXSS编写样式
WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的式介绍及组件样式, WXSS 用来决定 WXML 的组件应该怎么显示。
WXSS和CSS之间没有太大的区别区别, 为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。小程序使写样同时为了更适合开发微信小程序，式介绍及WXSS 对 CSS 进行了扩充以及修改。区别
官方文档中说到: 与 CSS 相比，小程序使写样WXSS 扩展的式介绍及特性有：
尺寸单位
样式导入
小程序的样式写法
页面样式的三种写法：
行内样式、页面样式(当前页面生效)、区别全局样式(全部页面生效)
三种样式都可以作用于页面的小程序使写样组件
- 行内样式: 针对当前组件生效
哈哈哈哈 - 页面样式: 编写在页面单独的wxss文件当中的, 只在当前页面生效
.active { color: skyblue; font-size: 20px; font-weight: 700;}哈哈哈哈 - 全局样式: 声明在app.wxss文件中的样式, 在任何页面中都会生效
.title { color: red; font-size: 20px;}哈哈哈哈 如果有相同的样式：
优先级依次是：行内样式 >页面样式 >全局样式
WXSS支持的选择器
官方支持的选择器如下 (其实除此之外还有一些选择器也是支持的, 但是官方推荐使用的就是下面这些)
| 选择器 | 样例 | 样例描述 |
|---|---|---|
| .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 组件前边插入内容 |
WXSS选择器优先级与CSS类似，权重如图
WXSS扩展-尺寸单位
尺寸单位也是式介绍及和我们css最大的区别
尺寸单位
rpx（responsive pixel） : 可以根据屏幕宽度进行自适应，规定屏幕宽为750rpx。区别
比如在 iPhone6 上，小程序使写样屏幕宽度为375px，式介绍及共有750个物理像素，区别则
750rpx = 375px = 750物理像素，1 rpx = 0.5px = 1物理像素。
建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准, 一般情况下也都是会以iPhone6位标准。
也就是说, 我们使用rpx单位, 以iPhone6位设计稿的话, 当我们想要设置100px的大小时, 改为设置200rpx (px单位的值 * 2 = rpx的值)
设置rpx单位后的元素, 会根据屏幕的大小自适应
WXSS样式导入
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用 ; 表示语句结束。
- 例如在test.wxss文件中定义一些css文件
/** test.wxss **/.small-p { padding:5px;}- 在app.wxss中导入test.wxss文件, 可以使用test.wxss文件中的样式
/** app.wxss **/@import "test.wxss";.middle-p { padding:15px;}
