微信小程序中WXSS和CSS有什么用

这篇文章主要介绍了微信小程序中WXSS和CSS有什么用，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

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类命名的元素的属性组合。记一下这些名字就好，属性的具体内容可以参考小程序开发文档。

编程语言的变量定义都有一个作用域的概念，一个变量被重复定义时，语义上距离近的定义有效。同样的道理，如果页面式样表中定义了与公共式样表中相同的内容，那么对于这个页面来说，页面式样表中的定义优先。

感谢你能够认真阅读完这篇文章，希望小编分享的“微信小程序中WXSS和CSS有什么用”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!