我們按照信息的參照關(guān)系來說明小程序中的各類文件，今天的內(nèi)容是頁(yè)面樣式文件wxss。

WXSS(WeiXin Style Sheets)是一套樣式語(yǔ)言，用于描述 WXML 的組件樣式。說到樣式文件大家都知道的是CSS（CascadingStyleSheet），wxss具備CSS的大部分功能，但是為了微信小程序進(jìn)行了修改和擴(kuò)充。

CSS概要

在 HTML文檔中需要通過使用很多屬性來控制字體，顏色，間距。對(duì)于不同的畫面元素，經(jīng)常需要指定不同的屬性組合。但是同時(shí)，在一個(gè)一定規(guī)模的畫面中或者是 不同的畫面之間經(jīng)常存在著共同的組合。通過將屬性組合定義在HTML以外的CSS文件中可以為屬性設(shè)定提供更大的共通性和靈活性。

公共樣式表

CSS樣式表的基本元素是樣式規(guī)則，他們由選擇器和包裹在一對(duì)“{}”中的CSS屬性值所組成。這一點(diǎn)對(duì)于WXSS也同樣適用。

/**app.wxss**/
.container {
????height: 100%;
????display: flex;
????flex-direction: column;
????align-items: center;
????justify-content: space-between;
????padding: 200rpx 0;
????box-sizing: border-box;
}?

本例中.container就是選擇器，它表示任何以“container”類命名的元素都適用“{}”中的屬性。屬性由[屬性名：屬性值]構(gòu)成，注意這里的屬性名并不包含雙引號(hào)，這一點(diǎn)和JSON不同。

頁(yè)面式樣表

在HelloWorld例子中有兩個(gè)頁(yè)面式樣表，我們只是拿出index.wxss來說明。

/**index.wxss**/
.userinfo {
? display: flex;
? flex-direction: column;
? align-items: center;
}

.userinfo-avatar {
? width: 128rpx;
? height: 128rpx;
? margin: 20rpx;
? border-radius: 50%;
}

.userinfo-nickname {
? color: #aaa;
}

.usermotto {
? margin-top: 200px;
}

式樣表中分別定義了適用于以u(píng)serinfo，userinfo-avatar， userinfo-nickname，usermotto類命名的元素的屬性組合。記一下這些名字就好，屬性的具體內(nèi)容可以參考小程序開發(fā)文檔。

編程語(yǔ)言的變量定義都有一個(gè)作用域的概念，一個(gè)變量被重復(fù)定義時(shí)，語(yǔ)義上距離近的定義有效。同樣的道理，如果頁(yè)面式樣表中定義了與公共式樣表中相同的內(nèi)容，那么對(duì)于這個(gè)頁(yè)面來說，頁(yè)面式樣表中的定義優(yōu)先。

參考文獻(xiàn)

本文中關(guān)于CSS的描述引用了【JavaScript 權(quán)威指南】中的一部分內(nèi)容。

WSXX開發(fā)文檔：

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxss.html

寫在文章的最后

既然已經(jīng)讀到這里了，拜托大家再用一分鐘時(shí)間，將文章轉(zhuǎn)發(fā)到各位的朋友圈，微信群中。本公眾號(hào)的成長(zhǎng)需要您的支持！ 閱讀更多更新文章，請(qǐng)掃描下面二維碼，關(guān)注微信公眾號(hào)【面向?qū)ο笏伎肌?