0.5
Text alike components share some common style rules. The text alike components currently includes text
and input
.
color
: <colors> this property set the foreground color of an component's text content.font-size
: <length> this property specifies the size of the font.font-style
: <enum> normal
| italic
. This property lets you select italic or normal faces within a font-family. Default value is normal
.font-weight
: <enum> normal
| bold
. This property specifies the boldness of the font. Default value is normal
.text-decoration
: <enum> none
| underline
| line-through
. This property is used to set the text formatting to underline or line-through. The default value is none
.text-align
: <enum> left
| center
| right
. This property describes how inline content like text is aligned in its parent component. The default value is left
.font-family
:<string> this property set the font-family of the text. This property doesn't guarantee the given font will always be set to the text. If the specified font cannot be found at the device, a typeface fallback will occur and the default typeface will be load. The fallback mechanism may vary in different devices.text-overflow
:<string> clip
| ellipsis
. This property determines how overflowed content that is not displayed is signaled to users. It can be clipped, display an ellipsis.The property color
support multiple fomats of values, contains rgb, rgba, #fff, #ffffff, named-color.
Example:
.my-class { color: red; } .my-class { color: #f00; } .my-class { color: #ff0000; } .my-class { color: rgb(255, 0, 0); } .my-class { color: rgba(255, 0, 0, 0.5); }
px
, px
can be omitted.rgb(255, 0, 0)
), rgba (rgba(255, 0, 0, 0.5)
), hexadecimal (#ff0000
), short hexadecimal (#f00
), named color (red
).