WXSS (WeiXin Style Sheets)是一套樣式語言,用於描述 WXML 的組件樣式。css
WXSS 用來決定 WXML 的組件應該怎麼顯示。前端
爲了適應廣大的前端開發者,WXSS 具備 CSS 大部分特性。同時爲了更適合開發微信小程序,WXSS 對 CSS 進行了擴充以及修改。小程序
與 CSS 相比,WXSS 擴展的特性有:微信小程序
rpx(responsive pixel): 能夠根據屏幕寬度進行自適應。規定屏幕寬爲750rpx。如在 iPhone6 上,屏幕寬度爲375px,共有750個物理像素,則750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。微信
設備像素(device pixels):設備上一個個固定點app
css像素(css pixels):css代碼中用到的邏輯像素框架
PPI/DIP(pixel per inch):每英寸的像素數目xss
DPR(devicepixelRatio):設備像素/cssspa
外聯樣式:code
使用@import
語句能夠導入外聯樣式表,@import
後跟須要導入的外聯樣式表的相對路徑,用;
表示語句結束。
/** common.wxss **/ .small-p { padding:5px; } /** app.wxss **/ @import "common.wxss"; .middle-p { padding:15px; }
框架組件上支持使用 style、class 屬性來控制組件的樣式。
<view style="color:{{color}};" />
.
,樣式類名之間用空格分隔。<view class="normal_view" />
選擇器 | 樣例 | 樣例描述 |
---|---|---|
.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 組件前邊插入內容 |
選擇器優先級
定義在 app.wxss 中的樣式爲全局樣式,做用於每個頁面。在 page 的 wxss 文件中定義的樣式爲局部樣式,只做用在對應的頁面,並會覆蓋 app.wxss 中相同的選擇器。
資料: