EA&UML日拱一卒-0基础学习微信小程序(7)-WXSS和CSS
我们按照信息的参照关系来说明小程序中的各类文件，今天的内容是页面样式文件wxss。
WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。说到样式文件大家都知道的是CSS（CascadingStyleSheet），wxss具备CSS的大部分功能，但是为了微信小程序进行了修改和扩充。
CSS概要
在 HTML文档中需要通过使用很多属性来控制字体，颜色，间距。对于不同的画面元素，经常需要指定不同的属性组合。但是同时，在一个一定规模的画面中或者是 不同的画面之间经常存在着共同的组合。通过将属性组合定义在HTML以外的CSS文件中可以为属性设定提供更大的共通性和灵活性。
公共样式表
CSS样式表的基本元素是样式规则，他们由选择器和包裹在一对“{}”中的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”类命名的元素都适用“{}”中的属性。属性由[属性名：属性值]构成，注意这里的属性名并不包含双引号，这一点和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类命名的元素的属性组合。记一下这些名字就好，属性的具体内容可以参考小程序开发文档。
编程语言的变量定义都有一个作用域的概念，一个变量被重复定义时，语义上距离近的定义有效。同样的道理，如果页面式样表中定义了与公共式样表中相同的内容，那么对于这个页面来说，页面式样表中的定义优先。
参考文献
本文中关于CSS的描述引用了【JavaScript 权威指南】中的一部分内容。
WSXX开发文档：
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxss.html
写在文章的最后