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

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

CSS概要

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

公共樣式表

CSS樣式表的基本元素是樣式規(guī)則，他們由選擇器和包裹在一對“{}”中的CSS屬性值所組成。這一點對于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)成，注意這里的屬性名并不包含雙引號，這一點和JSON不同。

頁面式樣表

在HelloWorld例子中有兩個頁面式樣表，我們只是拿出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;
}

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

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

參考文獻

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

WSXX開發(fā)文檔：

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

寫在文章的最后