微信小程序中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有什么用”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!