Skip to content

Latest commit

 

History

History
22 lines (15 loc) · 1.34 KB

File metadata and controls

22 lines (15 loc) · 1.34 KB

CSS 样式和类

在 Weex 页面上样式有两种形式:

  • <template> 中的 style 特性
  • <style> 样式表

基础语法

  1. <template> 中的 style 特性 : 样式表包含了多个样式规则,每条规则有一个对应的类,以及由 {...} 包括的若干条样式。
  2. class 特性 : <template> 标签中的 class 特性值用来匹配 <style> 样式表中的一个或多个 class 名,多个 class name 之间由空格分隔。

注意事项

  • 为了简化页面设计和实现,屏幕的宽度统一为 750 像素,不同设备屏幕都会按照比例转化为这一尺寸进行长度计算。
  • 标准 CSS 支持很多样式选择器,但 Weex 目前只支持单个 class name 的选择器。
  • 标准 CSS 支持很多的长度单位,但 Weex 目前只支持像素,并且 px 单位可以忽略不写,直接使用对应的数值。更多详情请查看通用样式。
  • 子元素的样式不会继承自父元素,这一点与标准 CSS 不同,比如 color 和 font-size 等样式作用在 <text> 上层的 <div> 上是无效的。
  • 标准 CSS 包含了非常多的样式属性,但 Weex 只支持了其中的一部分,比如盒模型、flexbox、position 等布局属性,以及 font-size、color 等其它样式。

与数据绑定结合

请查阅数据绑定中有关 style 和 class 特性的相关部分。