本文為菜鳥窩編輯吳佳林的連載第练。
介紹完了WXML二驰，下面就開始介紹WXSS。 WXSS稿静，全稱是WeiXin Style Sheets梭冠，用來決定 WXML 的組件顯示樣式。WXSS 具有 CSS 大部分特性自赔，包括選擇器妈嘹，內(nèi)聯(lián)樣式......在這基礎(chǔ)之上柳琢，還拓展了尺寸單位绍妨，樣式導(dǎo)入。下面具體介紹一下柬脸。
尺寸單位
在移動(dòng)端他去，無(wú)論是 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語(yǔ)句望门，WXSS 也是用 import 語(yǔ)句導(dǎo)入外聯(lián)樣式表。使用起來也是非常簡(jiǎn)單锰霜。
1.創(chuàng)建公共的 .wxss 文件筹误，寫入樣式
.small-p {
padding:5px;
}
2.在需要使用的地方 用@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑，用;表示語(yǔ)句結(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è)頁(yè)面拖叙。在 page 的 wxss 文件中定義的樣式為局部樣式氓润，只作用在對(duì)應(yīng)的頁(yè)面，并會(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
