往期鸿蒙5.0全套实战文章必看:(文中附带鸿蒙5.0全栈学习资料)


通用样式

组件普遍支持的可以在style或css中设置组件外观样式。

名称 类型 默认值 必填 描述
width <length> | <percentage>5+ -

设置组件自身的宽度。

未设置时组件宽度默认为0。

height <length> | <percentage>5+ -

设置组件自身的高度。

未设置时组件高度默认为0。

padding <length> 0

使用简写属性设置所有的内边距属性。

该属性可以有1到4个值:

- 指定一个值时,该值指定四个边的内边距。

- 指定两个值时,第一个值指定上下两边的内边距,第二个指定左右两边的内边距。

- 指定三个值时,第一个指定上边的内边距,第二个指定左右两边的内边距,第三个指定下边的内边距。

- 指定四个值时分别为上、右、下、左边的内边距(顺时针顺序)。

padding-[left|top|right|bottom] <length> 0 设置左、上、右、下内边距属性。
margin <length> | <percentage>5+ 0

使用简写属性设置所有的外边距属性,该属性可以有1到4个值。

- 只有一个值时,这个值会被指定给全部的四个边。

- 两个值时,第一个值被匹配给上和下,第二个值被匹配给左和右。

- 三个值时,第一个值被匹配给上, 第二个值被匹配给左和右,第三个值被匹配给下。

- 四个值时,会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

margin-[left|top|right|bottom] <length> | <percentage>5+ 0 设置左、上、右、下外边距属性。
border-width <length> 0 使用简写属性设置元素的所有边框宽度。
border-color <color> black 使用简写属性设置元素的所有边框颜色。
border-radius <length> - border-radius属性是设置元素的外边框圆角半径。
background-color <color> - 设置背景颜色。
opacity5+ number 1 元素的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。
display string flex

确定一个元素所产生的框的类型,可选值为:

- flex:弹性布局。

- none:不渲染此元素。

[left|top] <length> | <percentage>6+ -

left|top确定元素的偏移位置。

- left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。

- top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

说明

通用样式都不是必填项。

目前,样式支持的颜色格式如下:

  • rgb(255, 255, 255)

  • rgba(255, 255, 255, 1.0)

  • HEX格式:#rrggbb,#aarrggbb

  • 枚举格式:black,white等,详见 表1 当前支持的颜色枚举。Script脚本中不支持枚举格式。

表1 当前支持的颜色枚举

枚举名称 对应颜色 颜色
aliceblue #f0f8ff

antiquewhite #faebd7

aqua #00ffff

aquamarine #7fffd4

azure #f0ffff

beige #f5f5dc

bisque #ffe4c4

black #000000

blanchedalmond #ffebcd

blue #0000ff

blueviolet #8a2be2

brown #a52a2a

burlywood #deB887

cadetblue #5f9ea0

chartreuse #7fff00

chocolate #d2691e

coral #ff7f50

cornflowerblue #6495ed

cornsilk #fff8dc

crimson #dc143c

cyan #00ffff

darkblue #00008b

darkcyan #008b8b

darkgoldenrod #b8860b

darkgray #a9a9a9

darkgreen #006400

darkgrey #a9a9a9

darkkhaki #bdb76b

darkmagenta #8b008b

darkolivegreen #556b2f

darkorange #ff8c00

darkorchid #9932cc

darkred #8b0000

darksalmon #e9967a

darkseagreen #8fbc8f

darkslateblue #483d8b

darkslategray #2f4f4f

darkslategrey #2f4f4f

darkturquoise #00ced1

darkviolet #9400d3

deeppink #ff1493

deepskyblue #00bfff

dimgray #696969

dimgrey #696969

dodgerblue #1e90ff

firebrick #b22222

floralwhite #fffaf0

forestgreen #228b22

fuchsia #ff00ff

gainsboro #dcdcdc

ghostwhite #f8f8ff

gold #ffd700

goldenrod #daa520

gray #808080

green #008000

greenyellow #adff2f

grey #808080

honeydew #f0fff0

hotpink #ff69b4

indianred #cd5c5c

indigo #4b0082

ivory #fffff0

khaki #f0e68c

lavender #e6e6fa

lavenderblush #fff0f5

lawngreen #7cfc00

lemonchiffon #fffacd

lightblue #add8e6

lightcoral #f08080

lightcyan #e0ffff

lightgoldenrodyellow #fafad2

lightgray #d3d3d3

lightgreen #90ee90

lightpink #ffb6c1

lightsalmon #ffa07a

lightseagreen #20b2aa

lightskyblue #87cefa

lightslategray #778899

lightslategrey #778899

lightsteelblue #b0c4de

lightyellow #ffffe0

lime #00ff00

limegreen #32cd32

linen #faf0e6

magenta #ff00ff

maroon #800000

mediumaquamarine #66cdaa

mediumblue #0000cd

mediumorchid #ba55d3

mediumpurple #9370db

mediumseagreen #3cb371

mediumslateblue #7b68ee

mediumspringgreen #00fa9a

mediumturquoise #48d1cc

mediumvioletred #c71585

midnightblue #191970

mintcream #f5fffa

mistyrose #ffe4e1

moccasin #ffe4b5

navajowhite #ffdead

navy #000080

oldlace #fdf5e6

olive #808000

olivedrab #6b8e23

orange #ffa500

orangered #ff4500

orchid #da70d6

palegoldenrod #eee8aa

palegreen #98fb98

paleturquoise #afeeee

palevioletred #db7093

papayawhip #ffefd5

peachpuff #ffdab9

peru #cd853f

pink #ffc0cb

plum #dda0dd

powderblue #b0e0e6

purple #800080

rebeccapurple #663399

red #ff0000

rosybrown #bc8f8f

royalblue #4169e1

saddlebrown #8b4513

salmon #fa8072

sandybrown #f4a460

seagreen #2e8b57

seashell #fff5ee

sienna #a0522d

silver #c0c0c0

skyblue #87ceeb

slateblue #6a5acd

slategray #708090

slategrey #708090

snow #fffafa

springgreen #00ff7f

steelblue #4682b4

tan #d2b48c

teal #008080

thistle #d8Bfd8

tomato #ff6347

turquoise #40e0d0

violet #ee82ee

wheat #f5deb3

white #ffffff

whitesmoke #f5f5f5

yellow #ffff00

yellowgreen #9acd32

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐