WXSS 是一套样式语言，用于描述 WXML 的组件样式。

与 CSS 相比，WXSS 扩展的特性有：尺寸单位和样式导入。

.box { width: xxx; // 宽度 display: -webkit-box; // 设置为弹性盒子 overflow: hidden; // 超出隐藏 text-overflow: ellipsis; // 显示省略号 -webkit-line-clamp:1; // 多少行后显示省略号，这里设置为第一行超出后显示省略号 word-break:break-all; // 强制英文单词自动换行 -webkit-box-orient: vertical; // 从上到下垂直排列子元素 }

尺寸单位：

rpx：可以根据屏幕宽度进行自适应。

样式导入：

使用 @import 语句可以导入外联样式表，@import 后跟需要导入的外联样式表的相对路径，用;表示语句结束。

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

内联样式：

框架组件上支持使用 style、class 属性来控制组件的样式。

1. style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。 <view style="color:{ {color}}; margin-right: 10px;" /> data:{ color: #FFF }
2. class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。 // 静态 class <view class="nav"></view> // 动态 class <view class="{ {activited === 0 ? activitedNav : }}"></view> // 静态 class 和动态 class <view class="nav { {activited === 0 ? activitedNav : }}"></view>

全局样式与局部样式：

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。