bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

學習微信小程序WXSS與CSS的不同

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。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯

猜你還喜歡下面的內容

h5響應式網站建設

微信小程序知識

分類信息網