2021-04-21 分類: 微信小程序
width:設置元素寬度。
height:設置元素高度。
position:設置元素定位方式。
color:設置元素內文本的顏色。
border:設置元素的邊框樣式。
WXSS的補充和修改
1. 尺寸單位rpx
rpx是響應式像素。因為微信小程序不能識別rem等像素單位。不過rpx和rem很相似,可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。如在 iPhone6 上,屏幕寬度為375px,共有750個物理像素,則750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
注:rem(font size of the root element)是指相對于根元素的字體大小的單位。簡單的說它就是一個相對單位。看到rem大家一定會想起em單位,em(font size of the element)是指相對于父元素的字體大小的單位。它們之間其實很相似,只不過一個計算的規則是依賴根元素一個是依賴父元素計算。
設備像素(device pixel):設備能控制的屏幕顯示的最小物理單位,這些物理單位是顯示屏幕上的一個個點,這些點是固定的。
CSS像素(CSS pixels):web編程中的邏輯像素。
PPI/DPI(pixel per inch):每英寸擁有的像素數目。數值越高代表顯示屏能以越高的密度顯示圖像。
DPR(devicepixelRatio):手機的某一方向上設備像素和CSS像素之比。在微信開發者工具里模擬器上方切換不同設備時,就可以看到對應的DPR數值。
2. 外聯樣式導入
使用@import標識符來導入外聯樣式。@import后跟需要導入的外聯樣式表的相對路徑,用;表示語句結束。
外聯樣式是有執行順序的,從上到下,從左到右。
<!-- index.wxml -->
<view class="container">
Hello,world!
</view>
/** index.wxss **/
@import './assets.wxss';
.container{
color: red;
}
/**assets.wxss**/
.container{
border: 1px solid #000;
}
如果index.wxss中的container標簽設置border屬性為別的顏色,就會覆蓋assets.wxss里設置的黑色邊框。
3. 內聯樣式
框架組件上支持使用 style、class 屬性來控制組件的樣式。
style:靜態的樣式統一寫到 class 中。style 接收動態的樣式,在運行時會進行解析,請盡量避免將靜態的樣式寫進 style 中,以免影響渲染速度。
<!--index.wxml-->
<view style="width:500rpx;height:30px;background-color:{{colorValue}};">
Hello,world!
</view>
//index.js
Page({
data:{
colorValue:'red'
}
})
過綁定背景顏色的值為變量,在index.js里data設置了一個colorValue值為紅色。
class:用于指定樣式規則,其屬性值是樣式規則中類選擇器名(樣式類名)的集合,樣式類名不需要帶上.,樣式類名之間用空格分隔。
所以一般把靜態樣式屬性寫入class中,把動態樣式屬性寫入style。
4. 選擇器
其他還有實際測試過的nth-type-of(n)(匹配屬于父元素的特定類型的第 N 個子元素的每個元素) 等選擇器也能在微信小程序里使用,所以以實際表現為準,官方文檔漏缺的地方可以在開發者社區反饋。
選擇器的優先級
!important (不算做選擇器,只是提升權重) — 權重 無窮大
style (標簽內聯樣式) — 權重 1000
#element(id選擇器) — 權重 100
.element (class選擇器) — 權重 10
element — 權重 1
當在一個樣式中申明了一個!important 的規則時,這個規則會覆蓋其他任何申明。因為!important 的權重是高的,所以使用時盡量小心,因為它會破壞樣式表中固有的規則。
在制作小程序插件時,可以把某個功能封裝起來,做成插件分享給別人使用。而我們使用別人的插件時,想要修改插件對應元素的樣式,除了可以在插件的代碼里修改,也可以在引入插件的外層使用!important 這個申明規則來直接修改。
/** index.wxss **/
.title{
color: red !important;
}
強制修改title里的文字顏色為紅色。
分享名稱:學習微信小程序WXSS與CSS的不同
網站路徑:http://vcdvsql.cn/news22/109172.html
網站建設、網絡推廣公司-創新互聯,是專注品牌與效果的網站制作,網絡營銷seo公司;服務項目有微信小程序等
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯
猜你還喜歡下面的內容