小程序从零入手之WXSS模版语法汇总

什么是WXSS？

WXSS（WeiXin Style Sheets）是小程序的样式语言，类似于 HTML 的 CSS。

WXSS 直接基于 CSS 标准，可以使用大部分 CSS 的特性，同时为了更适合于小程序的开发进行了修改和补充。例如：

• 在小程序中，可以直接使用尺寸单位 rpx，可以根据屏幕宽度自适应。
• 可以使用数据绑定，动态设置样式。
• 支持内联样式和外部样式引用，具体使用和 CSS 相同。

WXSS 模版语法

样式规则

样式规则由选择器和声明块构成。每个选择器可以对应多个声明。

选择器和声明块用 {} 包围，声明间用 ; 隔开。

/* 选择器 */
selector {
  /* 声明 */
  property: value;
  property: value;
}

选择器

选择器是用于匹配 HTML 元素的模式。

• 类选择器用 . 开头。
• ID 选择器用 # 开头。
• 标签选择器直接使用标签名称。
• 后代选择器用空格隔开。
• 子选择器用 > 隔开。

/* 类选择器 */
.demo {}

/* ID 选择器 */
#demo {}

/* 标签选择器 */
div {}

/* 后代选择器 */
.parent .child {}

/* 子选择器 */
.parent > .child {}

属性和值

声明由属性和值构成。属性指定了需要设置的样式属性，值指定了属性的设置值。

/* 属性和值 */
property: value;

继承性

WXSS 可以继承值，这就是说，某个元素某个属性没有设置值，这个元素会自动继承父元素的对应属性值。

.parent {
  color: red;
}
.child {
  /* 继承父元素 color 属性 */
}

覆盖样式

在 WXSS 中，后写的样式将会覆盖前面的样式。

注释

注释在 WXSS 中使用 /* ... */ 标签。

/* 注释 */

示例说明

基础用法

/* 示例一 */
.title {
  font-size: 24rpx;
  color: #333;
}

/* 示例二 */
#container {
  background-color: #f1f1f1;
  text-align: center;
}

在示例一中定义了类选择器 .title，设置字体大小为 24rpx，颜色为 #333。在示例二中定义了 ID 选择器 #container，设置背景色为 #f1f1f1，文字居中。

继承性

/* 示例三 */
.parent {
  color: red;
}

.child {
  /* 继承父元素 color 属性 */
}

在示例三中，使用类选择器 .parent 设置字体颜色为红色。在子元素添加类选择器 .child，这个元素将会自动继承父元素的 color 属性，字体颜色也为红色。

总结

本文介绍了小程序 WXSS 的基本用法和语法规则，包括样式规则、选择器、属性和值、继承性、注释等。同时，提供了多个示例，便于开发者理解和掌握。

趁着没忘记，再来一个例子：

/* 示例四 */
.device-item {
  display: flex; /* 开启弹性布局 */
  flex: 1; /* 固定宽度 */
  padding: 20rpx;
  align-items: center;
  border-top: 1px solid #eee;
}

.device-item img {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.device-item span {
  color: #333;
  font-size: 30rpx;
  font-weight: bold;
  flex-grow: 1; /* 让左边距撑满整个宽度 */
}

在示例四中，使用类选择器 .device-item 设置了一个设备列表项的样式，开启弹性布局，固定宽度，设置 20rpx 的内边距，使用 flex 布局居中，添加上边框，设置一个左侧图片 img，使用 flex 再次排列，固定图片宽高和圆角，设置右侧 span 的样式，文字颜色、字体大小、加粗，并让其距离左边的距离自动拉伸。