EA&UML日拱一卒-0基础学习微信小程序(7)-WXSS和CSS

时间：2019-12-30 08:24:02

关键字：小程序微信

手机看文章

扫描二维码
随时随地手机看文章

[导读]我们按照信息的参照关系来说明小程序中的各类文件，今天的内容是页面样式文件wxss。 WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。说到样式文件大

我们按照信息的参照关系来说明小程序中的各类文件，今天的内容是页面样式文件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;
}