1、CSS樣式可以理解爲一系列的鍵值對, 其中的每一對描述了一個特定的樣式, 例如組件的寬或者高。
鍵值對的形式是 prop-name: prop-value;. 鍵名是prop-name, 鍵值是
prop-value. 一般情況下,鍵名按照連接符的方式進行命名, 鍵值可以是數字(默認的單位是px);鍵和值由:分隔,每對鍵值之間由;分隔。
在Weex頁面上樣式有兩種形式:
<template>中標籤的style屬性<style>中樣式表
2、style屬性
<template>
<container style="width: 400; height: 50;">
...
</container>
</template>
意思是<container>組件的寬和高分別爲400像素和50像素
3、style標籤
<style>
.wrapper {width: 600;}
.title {width: 400; height: 50;}
.highlight {color: #ff0000;}
</style>
樣式表包含了多個樣式規則, 每條規則有一個對應的類, 以及由{...}包括的多條樣式. 例如:.title {width: 400; height: 50;}
4、class屬性
<style> 標籤的選擇器會去匹配 <template> 標籤中的class屬性, 多個屬性值之間由空格分隔
<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, 兩個title文本的尺寸爲400px高50px寬, 其中第二個文本是紅色.
注意事項
- 爲了簡化頁面設計和實現, 屏幕的寬度統一爲750像素, 不同屏幕會按照比例轉化爲這一尺寸.
- 標準CSS支持很多樣式選擇器, 但Weex目前只支持單個類的選擇器.
- 標準CSS支持很多的長度單位,Weex目前只支持像素,並且
px在樣式中可以忽略不寫, 直接使用對應的數值. - 子元素的樣式不會繼承自父元素, 這一點與標準CSS不同, 比如
color和font-size等屬性. - 標準CSS包含了非常多的樣式屬性, 但Weex只支持了其中的一部分, 包括盒模型,flexbox,position等佈局屬性. 以及
font-size,color等樣式.
5、與數據綁定結合
文檔數據綁定有style 和 class屬性相關的內容.
<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>