基礎(chǔ)語(yǔ)法
CSS樣式可以理解為一系列的鍵值對(duì), 其中的每一對(duì)描述了一個(gè)特定的樣式, 例如組件的寬或者高.
width: 400; height: 50; ...
鍵值對(duì)的形式是 prop-name: prop-value;. 鍵名是prop-name, 鍵值是 prop-value. 一般情況下,鍵名按照連接符的方式進(jìn)行命名, 鍵值可以是數(shù)字(默認(rèn)的單位是px);鍵和值由:分隔,每對(duì)鍵值之間由;分隔.
在Weex頁(yè)面上樣式有兩種形式:
- <template>中標(biāo)簽的style屬性
- <style> 中樣式表
style屬性
在style屬性中編寫(xiě)樣式, 例如:
<template>
<container style="width: 400; height: 50;">
...
</container>
</template>
這段代碼的意思是<container>組件的寬和高分別為400像素和50像素.
<style> 標(biāo)簽
例如:
<style>
.wrapper {width: 600;}
.title {width: 400; height: 50;}
.highlight {color: #ff0000;}
</style>
樣式表包含了多個(gè)樣式規(guī)則, 每條規(guī)則有一個(gè)對(duì)應(yīng)的類(lèi), 以及由{...}包括的多條樣式. 例如:
.title {width: 400; height: 50;}
以上為一條樣式規(guī)則.
Class 屬性
<style> 標(biāo)簽的選擇器會(huì)去匹配 <template> 標(biāo)簽中的class屬性, 多個(gè)屬性值之間由空格分隔. 例如:
<template>
<container class="wrapper">
<text class="title">...</text>
<text class="title highlight">...</text>
</container>
</template>
<style>
.wrapper {width: 600;}
.title {width: 400; height: 50;}
.highlight {color: #ff0000;}
</style>
這段代碼的含義是container組件的寬度是600px, 兩個(gè)title文本的尺寸為400px高50px寬, 其中第二個(gè)文本是紅色.
注意事項(xiàng)
為了簡(jiǎn)化頁(yè)面設(shè)計(jì)和實(shí)現(xiàn), 屏幕的寬度統(tǒng)一為750像素, 不同屏幕會(huì)按照比例轉(zhuǎn)化為這一尺寸.
標(biāo)準(zhǔn)CSS支持很多樣式選擇器, 但Weex目前只支持單個(gè)類(lèi)的選擇器.
標(biāo)準(zhǔn)CSS支持很多的長(zhǎng)度單位,Weex目前只支持像素,并且px在樣式中可以忽略不寫(xiě), 直接使用對(duì)應(yīng)的數(shù)值.
子元素的樣式不會(huì)繼承自父元素, 這一點(diǎn)與標(biāo)準(zhǔn)CSS不同, 比如color和font-size等屬性.
標(biāo)準(zhǔn)CSS包含了非常多的樣式屬性, 但Weex只支持了其中的一部分, 包括盒模型,flexbox,position等布局屬性. 以及font-size, color等樣式.
與數(shù)據(jù)綁定結(jié)合
<template>
<container>
<text style="font-size: {{fontSize}};">Alibaba</text>
<text class="large {{textClass}}">Weex Team</text>
</container>
</template>
<style>
.large {font-size: 32;}
.highlight {color: #ff0000;}
</style>
<script>
module.exports = {
data: {
fontSize: 32,
textClass: 'highlight'
}
}
</script>
