本文為菜鳥窩編輯吳佳林的連載。
介紹完了WXML，下面就開始介紹WXSS。 WXSS，全稱是WeiXin Style Sheets，用來決定 WXML 的組件顯示樣式。WXSS 具有 CSS 大部分特性，包括選擇器，內(nèi)聯(lián)樣式......在這基礎(chǔ)之上，還拓展了尺寸單位，樣式導(dǎo)入。下面具體介紹一下。
尺寸單位
在移動(dòng)端，無論是 Android 或者是 iOS 都有自己的尺寸單位，小程序也有自己的尺寸單位 - rpx（responsive pixel）。這個(gè)尺寸單位可以根據(jù)可屏幕寬度進(jìn)行自適應(yīng)，規(guī)定屏幕寬為750rpx，rpx 跟 px 的換算公式是：屏幕寬度/750，px跟rpx 換算公式是：750/屏幕寬度。 比如在 iPhone6 上，屏幕寬度為375px。那么轉(zhuǎn)化成便是 750/375=2rpx,也就是 1px=2rpx，那么在 iPhone6 上轉(zhuǎn)化便是 1rpx = 0.5px，這樣如果設(shè)計(jì)稿如果用 iPhone6 為標(biāo)準(zhǔn)，轉(zhuǎn)化起來也是方便許多。官方也建議開發(fā)微信小程序時(shí)設(shè)計(jì)師可以用 iPhone6 作為視覺稿的標(biāo)準(zhǔn) 。
樣式導(dǎo)入
WXML 有 引入功能，使用的 import語句，WXSS 也是用 import 語句導(dǎo)入外聯(lián)樣式表。使用起來也是非常簡單。
1.創(chuàng)建公共的 .wxss 文件，寫入樣式
.small-p {
padding:5px;
}
2.在需要使用的地方 用@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑，用;表示語句結(jié)束。
@import "common.wxss";
.middle-p {
padding:15px;
}
這樣就完成一次樣式導(dǎo)入了。
內(nèi)聯(lián)樣式
內(nèi)聯(lián)樣式就是把 WXSS 代碼直接寫在現(xiàn)有的 WXML標(biāo)簽,小程序的框架組件上支持使用 style、class 屬性來控制組件的樣式。
- style：在
style=""里面使用樣式屬性，然后嵌在組件的標(biāo)簽里面。
<view style="color:{{color}};" />
- class：用于指定樣式規(guī)則，其屬性值是樣式規(guī)則中類選擇器名(樣式類名)的集合，樣式類名不需要帶上.，樣式類名之間用空格分隔。
<view class="normal_view" />
注意：靜態(tài)的樣式統(tǒng)一寫到 class 中。style 接收動(dòng)態(tài)的樣式，在運(yùn)行時(shí)會(huì)進(jìn)行解析，請(qǐng)盡量避免將靜態(tài)的樣式寫進(jìn) style 中，以免影響渲染速度。
選擇器
前端的 CSS 里面提供非常豐富的選擇器，WXSS雖然不像 CSS 那樣豐富，但是目前支持的選擇器也是足以使用。
小程序目前支持的選擇器有：
.class, #id , element , :: fter: , ::before
全局樣式與局部樣式
定義在 app.wxss 中的樣式為全局樣式，作用于每一個(gè)頁面。在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對(duì)應(yīng)的頁面，并會(huì)覆蓋 app.wxss 中相同的選擇器。
更多內(nèi)容，請(qǐng)關(guān)注菜鳥窩（微信公眾號(hào)ID: cniao5），程序猿的在線學(xué)習(xí)平臺(tái)。 轉(zhuǎn)載請(qǐng)注明出處，本文出自菜鳥窩，原文鏈接http://www.cniao5.com/forum/thread/a7030902202811e7887b00163e0230fa
