Weex CSS 属性快查（英）

background-color CSS Property standard name

Summary

The background color of an element.

Details

• unit: color
• default value: transparent
• apply to: all elements except <indicator>

Compares with CSS Standard

• The color unit definition is a subset of CSS Standard. See more.

Example

<template>
  <div>
    <div style="width: 400px; height: 400px; "></div>
  </div>
</template>

color CSS Property standard name

Summary

The text color of an element.

Details

• unit: color
• default value: depends on the system (in most cases: #000000)
• apply to: <text>, <input>

Compares with CSS Standard

• The effect not apply to all elements, just <text> and <input>. In another way, it's not inherited.
• The color unit definition is a subset of CSS Standard. See more.

Example

<template>
  <div>
    <text style="color: #ff0000;">I am Red.</text>
  </div>
</template>

font-family CSS Property standard name

Summary

Specify a font family name for a certain element.

Details

• values: <family-name> or <generic-name> (serif, sans-serif, monospace, cursive, fantasy)
• default value: system font
• apply to: <text>, <input>

see more about generic-name

Compares with CSS Standard

• The effect not apply to all elements, just <text> and <input>. In another way, it's not inherited.

Example

<template>
  <div>
    <text style="text-family: monospace;">Hello World</text>
  </div>
</template>

font-size CSS Property standard name

Summary

The size of the font for an element.

Details

• type: length
• default value:
  • iOS: 32px
  • Android: platform specify
  • HTML5: 32px
• apply to: <text>, <input>

Compares with CSS Standard

• The effect not apply to all elements, just <text> and <input>. In another way, it's not inherited.
• The length unit definition is different with CSS Standard. See more.
• Some standard values like small, large, xx-large, larger are not supported.
• The percentage unit is not supported.

Example

<template>
  <div>
    <text style="font-size: 48px;">Hello World</text>
  </div>
</template>

font-style CSS Property standard name

Summary

Set the italic style of the font for an element.

Details

• values: normal, italic
• default value: normal
• apply to: <text>, <input>

Compares with CSS Standard

• The effect not apply to all elements, just <text> and <input>. In another way, it's not inherited.

Example

<template>
  <div>
    <text style="font-style: italic;">Hello World</text>
  </div>
</template>

font-weight CSS Property standard name

Summary

The weight of the font for an element.

Details

• values: normal, bold
• default value: normal
• apply to: <text>, <input>

Compares with CSS Standard

• Some standard values like lighter, bolder, number unit are not supported.
• The effect not apply to all elements, just <text> and <input>. In another way, it's not inherited.

Example

<template>
  <div>
    <text style="font-weight: bold;">Hello World</text>
  </div>
</template>

line-height CSS Property standard name

Summary

Specifies the minimum height of a text line.

Details

• type: length
• default value: depends on system default line height
• apply to: <text>

Compares with CSS Standard

• The effect not apply to all elements, just <text>. In another way, it's not inherited.
• The length unit definition is different with CSS Standard. See more.
• The number unit (1.5), percentage unit (150%) and normal value are not supported.

Example

<template>
  <div>
    <text style="font-size: 48px;">Hello World</text>
  </div>
</template>

lines CSS Property

Summary

non-standard

Determines the max lines the text will be wrapped to.

Additionally, this CSS property could work together with text-overflow.

Details

• values: number
• default value: 0 (means no maximum lines limitation)
• apply to: <text>

Example

<template>
  <div>
    <text style="
      lines: 3;
    ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non ex id odio feugiat ullamcorper. Fusce posuere nisi vitae eros pretium aliquam. Proin molestie nisl eros, nec commodo ex congue porttitor. Sed ut semper risus, nec mattis neque. Sed ullamcorper nunc eget suscipit tincidunt. Donec a lorem vitae quam aliquet blandit. Suspendisse dictum, nunc in faucibus tincidunt, risus ligula aliquam dui, sed efficitur nisl nibh non ante. Quisque purus felis, maximus convallis condimentum eget, dapibus id elit. Nulla vitae eros orci. Vestibulum sed erat vitae felis dignissim feugiat. In at urna fringilla, semper nisi quis, ornare ligula. Sed consequat bibendum ante, non tincidunt urna consectetur sed. Nam at fermentum nulla. In massa erat, ultricies at consequat quis, cursus pharetra ante. Nulla dolor nisi, hendrerit sit amet ipsum at, tempus efficitur est. Vestibulum eget sem commodo, vehicula eros vitae, malesuada metus.</text>
  </div>
</template>

opacity CSS Property standard name

Summary

The transparency degree to an element and its children. 1 means fully opaque, 0 means fully transparent.

Details

• type: number
• range: 0 ~ 1
• default value: 1
• apply to: all elements

Example

<template>
  <div style="opacity: 0.8; ">
    <text>Hello World</text>
  </div>
</template>

position CSS Property standard name

Summary

The rule for positioning an element.

Details

• values: relative, absolute, fixed, sticky
• default value: relative
• apply to: all elements except <indicator>

Compares with CSS Standard

• static value is not supported.
• The default value is relative not static.

Example

<template>
  <div style="height: 10000px;">
    <text style="position: fixed; bottom: 40px;" onclick="scrollToTop">Go to top</text>
  </div>
</template>

text-align CSS Property standard name

Summary

Describes how text content is aligned.

Details

• values: left, center, right
• default value: left
• apply to: <text>, <input>

Compares with CSS Standard

• Some standard values like justify, justify-all are not supported.
• The effect not apply to all elements, just <text> and <input>. In another way, it's not inherited.

Example

<template>
  <div>
    <text style="text-align: center;">Hello World</text>
  </div>
</template>

text-decoration CSS Property standard name

Summary

Draw text decoration (underline, line-through) for an element.

Details

• values: none, underline, line-through
• default value: none
• apply to: <text>, <input>

Compares with CSS Standard

• Some standard values like overline are not supported.
• The effect not apply to all elements, just <text> and <input>. In another way, it's not inherited.

Example

<template>
  <div>
    <text style="text-decoration: underline;">Hello World</text>
  </div>
</template>

text-overflow CSS Property standard name

Summary

Determines how overflowed content that is not displayed.

Note: It must use with lines style together.

Details

• values: clip, ellipsis
• default value: clip
• apply to: <text>

Compares with CSS Standard

• The effect not apply to all elements, just <text>. In another way, it's not inherited.
• The string unit is not supported.

Example

<template>
  <div>
    <text style="
      width: 200;
      lines: 1;
      text-overflow: ellipsis;
    ">Hello World World World World World</text>
  </div>
</template>