CSS 样式可以理解为一系列的键值对,其中的每一对描述了一个特定的样式,例如组件的宽或者高。
.div { width: 400; height: 50; }
键值对的形式是 prop-name: prop-value;
。键名是 prop-name
,键值是 prop-value
。 一般情况下,键名按照连接符的方式进行命名,键和值之间由冒号 :
进行分隔,每对键值之间由分号 ;
进行分隔。
在 Weex 页面上样式有两种形式:
<template>
中的 style
特性<style>
样式表<template>
中的 style
特性在 style
特性中编写样式,例如:
<template> <div style="width: 400; height: 50;"> ... </div> </template>
这段代码的意思是 <div>
组件的宽和高分别为 400 像素和 50 像素。
<style>
样式表例如:
<style> .wrapper { width: 600; } .title { width: 400; height: 50; } .highlight { color: #ff0000; } </style>
样式表包含了多个样式规则,每条规则有一个对应的类,以及由 {...}
包括的若干条样式。例如:
.title { width: 400; height: 50; }
class
特性<template>
标签中的 class
特性值用来匹配 <style>
样式表中的一个或多个 class 名,多个 class name 之间由空格分隔。例如:
<template> <div class="wrapper"> <text class="title">...</text> <text class="title highlight">...</text> </div> </template> <style> .wrapper { width: 600; } .title { width: 400; height: 50; } .highlight { color: #ff0000; } </style>
这段代码的含义是 <div>
组件的宽度是 600 像素,两个 <text>
组件的尺寸为 400x50,其中第二个文本组件是红色字。
注意事项
px
单位可以忽略不写,直接使用对应的数值。更多详情请查看通用样式。color
和 font-size
等样式作用在 <text>
上层的 <div>
上是无效的。font-size
、color
等其它样式。请查阅数据绑定中有关 style
和 class
特性的相关部分。这里简单举个例子:
<template> <div> <text style="font-size: {{fontSize}};">Alibaba</text> <text class="large {{textClass}}">Weex Team</text> </div> </template> <style> .large {font-size: 32;} .highlight {color: #ff0000;} </style> <script> module.exports = { data: { fontSize: 32, textClass: 'highlight' } } </script>
下一篇:事件处理