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

這篇文章主要介紹了微信小程序中WXSS和CSS有什么用，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

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)先。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“微信小程序中WXSS和CSS有什么用”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學習!