WXSS是一套樣式語言，用於描述WXML的組件樣式。

　　官方文檔表示，WXSS的選擇器目前支持（“.class”、“#id”、“elemnt”、“element,element”、“::after”、“::before”）,而且本地資源無法通過WXSS獲取，所以WXSS中的樣式都是用的網絡圖片，或者base64。

　　好在微信團隊提供的WXSS具有CSS大部分特性。同時為了更適合開發微信小程序，微信團隊對CSS進行了擴充以及修改。

　　與CSS相比，WXSS擴展的特性有：

　　? 尺寸單位

　　? 樣式導入

　　尺寸單位

　　WXSS新增了針對移動端屏幕的兩種尺寸單位：rpx與rem。

　　rpx：可以根據屏幕度進行自適應。規定屏幕寬為750rpx。iphone6屏幕寬度為375px，共有750個物理像素，則750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。

　　rem：規定屏幕寬度為20rem；1rem=（750/20）rpx。

　　因此建議開發微信小程序時用iphone6作為視覺稿的標準。

　　導入樣式

[email protected]@import後跟需要導入的外鏈樣式表的路徑，並用；表示語句結束。

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

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

　　內聯樣式

　　內聯樣式指的是框架組件上支持使用style、class屬性來控制組件的樣式：

　　? class：用於指定樣式規則，其屬性值是樣式規則中類選擇器名（樣式類名）的集合。

<view class="normal_view" />

　　? style：靜態的樣式統一寫到class中。style接收動態的樣式，在運行時會進行解析，盡量避免將靜態的樣式寫進style中，以免影響渲染速度。

<view style="color:{{color}};"/>

　　全局樣式和局部樣式

　　定義在app.wxss中的樣式為全局樣式，作用於每一個頁面。在page的.wxss文件中定義的樣式為局部樣式，只作用於對應的頁面，並會覆蓋app.wxss中相同的選擇器。

　　框架組件

　　組件是視圖層的基本組成單元，除自帶某些功能外，也具有微信風格的樣式。所有的組件與屬性都需要使用小寫字母。

　　框架組件共有屬性及描述

　　表中的*為通配符，分別對應屬性名（data-*,*代表自定義的屬性）與事件名（bind*或catch*，*代表6種冒泡事件之一）。

　　同時每一個組件也可以有自定義的屬性（稱為“特殊獨有屬性”），用於對該組件的功能或樣式進行修飾。但屬性只支持下面七種數據類型。

微信小程序開發教程（九）視圖層——.wxss詳解