我們按照信息的參照關(guān)系來說明小程序中的各類文件，今天的內(nèi)容是頁面樣式文件wxss。
WXSS(WeiXin Style Sheets)是一套樣式語言，用于描述 WXML 的組件樣式。說到樣式文件大家都知道的是CSS（CascadingStyleSheet），wxss具備CSS的大部分功能，但是為了微信小程序進行了修改和擴充。
CSS概要
在 HTML文檔中需要通過使用很多屬性來控制字體，顏色，間距。對于不同的畫面元素，經(jīng)常需要指定不同的屬性組合。但是同時，在一個一定規(guī)模的畫面中或者是 不同的畫面之間經(jīng)常存在著共同的組合。通過將屬性組合定義在HTML以外的CSS文件中可以為屬性設定提供更大的共通性和靈活性。
公共樣式表
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ā)文檔。
編程語言的變量定義都有一個作用域的概念，一個變量被重復定義時，語義上距離近的定義有效。同樣的道理，如果頁面式樣表中定義了與公共式樣表中相同的內(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
寫在文章的最后
下載文檔
