【小程序】使用WXSS编写样式介绍以及与CSS的区别

WXSS编写样式

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式, WXSS 用来决定 WXML 的组件应该怎么显示。

官方文档中说到: 与 CSS 相比，WXSS 扩展的特性有：

尺寸单位 样式导入

小程序的样式写法

页面样式的三种写法：

行内样式、页面样式(当前页面生效)、全局样式(全部页面生效) 三种样式都可以作用于页面的组件

行内样式: 针对当前组件生效

<!-- 只针对当前组件生效 -->
<text style="color: red">哈哈哈哈</text>

页面样式: 编写在页面单独的wxss文件当中的, 只在当前页面生效

.active {
          
   
	color: skyblue;
	font-size: 20px;
	font-weight: 700;
}

<!-- 只能在当前页面中使用 -->
<text class="active">哈哈哈哈</text>

全局样式: 声明在app.wxss文件中的样式, 在任何页面中都会生效

.title {
          
   
	color: red;
	font-size: 20px;
}

<!-- 在任何页面中都可以使用 -->
<text class="title">哈哈哈哈</text>

如果有相同的样式：

优先级依次是：行内样式 > 页面样式 > 全局样式

WXSS支持的选择器

官方支持的选择器如下 (其实除此之外还有一些选择器也是支持的, 但是官方推荐使用的就是下面这些)

WXSS选择器优先级与CSS类似，权重如图

WXSS扩展-尺寸单位

尺寸单位也是和我们css最大的区别

尺寸单位

rpx（responsive pixel） : 可以根据屏幕宽度进行自适应，规定屏幕宽为750rpx。 比如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素， 1 rpx = 0.5px = 1物理像素。

也就是说, 我们使用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;
}