目錄
前言
一、WXSS
1. 什么是 WXSS
2. WXSS 和 CSS 的關(guān)系
二、rpx
1. 什么是 rpx 尺寸單位
2. rpx 的實(shí)現(xiàn)原理
3. rpx 與 px 之間的單位換算
三、樣式導(dǎo)入
1. 什么是樣式導(dǎo)入
2. @import 的語(yǔ)法格式
四、全局樣式和局部樣式
1. 全局樣式
2. 局部樣式
前言
? ? ? ? 上一期我們學(xué)習(xí)了wxml的模版語(yǔ)法，那么這一期我們開(kāi)始學(xué)習(xí)新的知識(shí)點(diǎn)，wxss的模版樣式，在此之前我們學(xué)習(xí)過(guò)了css，有了css的基礎(chǔ)，那wxss就會(huì)很容易理解了，下面就開(kāi)始本期的學(xué)習(xí)吧。
一、WXSS
1. 什么是 WXSS
WXSS (WeiXin Style Sheets)是一套樣式語(yǔ)言，用于美化 WXML 的組件樣式，類似于網(wǎng)頁(yè)開(kāi)發(fā)中的 CSS。
2. WXSS 和 CSS 的關(guān)系
WXSS 具有 CSS 大部分特性，同時(shí)，WXSS 還對(duì) CSS 進(jìn)行了擴(kuò)充以及修改，以適應(yīng)微信小程序的開(kāi)發(fā)。
與 CSS 相比，WXSS 擴(kuò)展的特性有：
- ?rpx 尺寸單位
- ?@import 樣式導(dǎo)入
二、rpx
1. 什么是 rpx 尺寸單位
rpx（responsive pixel）是微信小程序獨(dú)有的，用來(lái)解決屏適配的尺寸單位。
2. rpx 的實(shí)現(xiàn)原理
rpx 的實(shí)現(xiàn)原理非常簡(jiǎn)單：鑒于不同設(shè)備屏幕的大小不同，為了實(shí)現(xiàn)屏幕的自動(dòng)適配，rpx 把所有設(shè)備的屏幕，在寬度上等分為 750 份（即：當(dāng)前屏幕的總寬度為 750rpx）。
- 在較小的設(shè)備上，1rpx 所代表的寬度較小
- 在較大的設(shè)備上，1rpx 所代表的寬度較大
小程序在不同設(shè)備上運(yùn)行的時(shí)候，會(huì)自動(dòng)把 rpx 的樣式單位換算成對(duì)應(yīng)的像素單位來(lái)渲染，從而實(shí)現(xiàn)屏幕適
3. rpx 與 px 之間的單位換算
在 iPhone6 上，屏幕寬度為375px，共有 750 個(gè)物理像素，等分為 750rpx。則：
750rpx = 375px = 750 物理像素
??? 1rpx = 0.5px? = 1物理像素
| 設(shè)備 |
rpx換算px (屏幕寬度/750) |
px換算rpx (750/屏幕寬度) |
| iPhone5 |
1rpx = 0.42px |
1px = 2.34rpx |
| iPhone6 |
1rpx = 0.5px |
1px = 2rpx |
| iPhone6 Plus |
1rpx = 0.552px |
1px = 1.81rpx |
官方建議：開(kāi)發(fā)微信小程序時(shí)，設(shè)計(jì)師可以用 iPhone6 作為視覺(jué)稿的標(biāo)準(zhǔn)。
開(kāi)發(fā)舉例：在 iPhone6 上如果要繪制寬100px，高20px的盒子，換算成rpx單位，寬高分別為 200rpx 和 40rpx?。
三、樣式導(dǎo)入
1. 什么是樣式導(dǎo)入
使用 WXSS 提供的 @import 語(yǔ)法，可以導(dǎo)入外聯(lián)的樣式表。
2. @import 的語(yǔ)法格式
@import 后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑，用 ; 表示語(yǔ)句結(jié)束。示例如下：
wxml代碼：
<view class="box">
IKUN
</view>?在外部我們創(chuàng)建一個(gè)common文件夾，然后創(chuàng)建一個(gè)all.css文件，并且寫入以下樣式：
.box{
background-color: darkkhaki;
}四、全局樣式和局部樣式
1. 全局樣式
定義在 app.wxss 中的樣式為全局樣式，作用于每一個(gè)頁(yè)面。
然后我們?cè)谂cwxml同一個(gè)目錄下的wxss文件寫入以下代碼樣式：
@import '/common/all.css';
.box{
font-size: 40px;
}?結(jié)果展示：
2. 局部樣式
在頁(yè)面的 .wxss 文件中定義的樣式為局部樣式，只作用于當(dāng)前頁(yè)面。
注意：
① 當(dāng)局部樣式和全局樣式?jīng)_突時(shí)，根據(jù) 就近原則 ，局部樣式會(huì) 覆蓋 全局樣式② 當(dāng)局部樣式的 權(quán)重大于或等于 全局樣式的權(quán)重時(shí)，才會(huì)覆蓋全局的樣式
下面看個(gè)示例：
wxml代碼：
<view class="box">
<view>ikun</view>
<view>kk</view>
<view>cxk</view>
</view>然后我們?cè)赼pp.wxss寫下以下樣式：
.box{
color: red;
font-size:50px;
}查看展示結(jié)果：
?再然后，我們回到與wxml文件同一個(gè)目錄下的wxss文件當(dāng)中，寫下新的樣式：
.box{
color: blueviolet;
font-size: 20px;
}查看結(jié)果：
?這里我們可以看出原來(lái)在app.wxss設(shè)置的樣式被覆蓋了。
但如果我們?cè)赼pp.wxss添加以下的一個(gè)新的樣式，然后再去查看結(jié)果：
.box view:nth-child(1){
color:darkgreen;
}
?這里我們可以看到結(jié)果的第一行變?yōu)榫G色的了，為什么呢？
?那是因?yàn)椴粷M足局部樣式的權(quán)重大于或等于全局樣式的權(quán)重的條件，我們把鼠標(biāo)放到這個(gè)樣式中可以查看到權(quán)重，如下圖所示，當(dāng)前是app.wxss下的權(quán)重.
下圖是，與wxml文件同一個(gè)目錄下的wxss文件樣式的權(quán)重，很顯然，前者的權(quán)重（0,2,1）大于后者權(quán)重（0,1,0）。所以最終結(jié)果會(huì)根據(jù)app.wxss下的樣式去展示出來(lái)。?
?
?想要獲取更多的學(xué)習(xí)資源，可以點(diǎn)擊以下鏈接查看。?黑馬程序員web前端視頻教程從入門到精通Web前端視頻教程完整版_Web前端視頻教程從入門到精通_黑馬程序員 (itheima.com)
?以上就是本期的全部?jī)?nèi)容了，我們下次見(jiàn)！文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-797730.html
分享一張壁紙：
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-797730.html
到了這里，關(guān)于微信小程序-----wxss模版樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
