1e41f4b71Sopenharmony_ci# Universal Styles 2e41f4b71Sopenharmony_ci 3e41f4b71Sopenharmony_ci 4e41f4b71Sopenharmony_ciYou can set universal styles for components in the **style** attribute or **.css** files. 5e41f4b71Sopenharmony_ci 6e41f4b71Sopenharmony_ci 7e41f4b71Sopenharmony_ci| Name | Type | Default Value | Mandatory | Description | 8e41f4b71Sopenharmony_ci| ---------------------------------- | ---------------------------------------- | ----- | ---- | ---------------------------------------- | 9e41f4b71Sopenharmony_ci| width | <length> \| <percentage><sup>5+</sup> | - | No | Component width.<br><br>If this attribute is not set, the default value **0** is used. | 10e41f4b71Sopenharmony_ci| height | <length> \| <percentage><sup>5+</sup> | - | No | Component height.<br><br>If this attribute is not set, the default value **0** is used. | 11e41f4b71Sopenharmony_ci| padding | <length> | 0 | No | Shorthand attribute to set the padding for all sides in a declaration.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).| 12e41f4b71Sopenharmony_ci| padding-[left\|top\|right\|bottom] | <length> | 0 | No | Left, top, right, and bottom padding. | 13e41f4b71Sopenharmony_ci| margin | <length> \| <percentage><sup>5+</sup> | 0 | No | Shorthand attribute to set the margin for all sides in a declaration. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).| 14e41f4b71Sopenharmony_ci| margin-[left\|top\|right\|bottom] | <length> \| <percentage><sup>5+</sup> | 0 | No | Left, top, right, and bottom margins. | 15e41f4b71Sopenharmony_ci| border-width | <length> | 0 | No | Shorthand attribute to set the margin for all sides. | 16e41f4b71Sopenharmony_ci| border-color | <color> | black | No | Shorthand attribute to set the color for all borders. | 17e41f4b71Sopenharmony_ci| border-radius | <length> | - | No | Radius of round-corner borders. | 18e41f4b71Sopenharmony_ci| background-color | <color> | - | No | Background color. | 19e41f4b71Sopenharmony_ci| opacity<sup>5+</sup> | number | 1 | No | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. | 20e41f4b71Sopenharmony_ci| display | string | flex | No | Type of the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered| 21e41f4b71Sopenharmony_ci| [left\|top] | <length> \| <percentage><sup>6+</sup> | - | No | Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.| 22e41f4b71Sopenharmony_ci 23e41f4b71Sopenharmony_ci 24e41f4b71Sopenharmony_ci> **NOTE** 25e41f4b71Sopenharmony_ci> 26e41f4b71Sopenharmony_ci> The aforementioned universal styles are not mandatory. 27e41f4b71Sopenharmony_ci> 28e41f4b71Sopenharmony_ci> Currently, the following color formats are supported: 29e41f4b71Sopenharmony_ci> - rgb(255, 255, 255) 30e41f4b71Sopenharmony_ci> 31e41f4b71Sopenharmony_ci> - rgba(255, 255, 255, 1.0) 32e41f4b71Sopenharmony_ci> 33e41f4b71Sopenharmony_ci> - HEX formats: \#rrggbb and \#aarrggbb 34e41f4b71Sopenharmony_ci> 35e41f4b71Sopenharmony_ci> - Enumeration format: as listed in Table 1. The enumeration format is not supported in the script. 36e41f4b71Sopenharmony_ci 37e41f4b71Sopenharmony_ci 38e41f4b71Sopenharmony_ci **Table 1** Color enums 39e41f4b71Sopenharmony_ci 40e41f4b71Sopenharmony_ci| Name | Hexadecimal Code | Color | 41e41f4b71Sopenharmony_ci| -------------------- | -------- | ---------------------------------------- | 42e41f4b71Sopenharmony_ci| aliceblue | \#f0f8ff |  | 43e41f4b71Sopenharmony_ci| antiquewhite | \#faebd7 |  | 44e41f4b71Sopenharmony_ci| aqua | \#00ffff |  | 45e41f4b71Sopenharmony_ci| aquamarine | \#7fffd4 |  | 46e41f4b71Sopenharmony_ci| azure | \#f0ffff |  | 47e41f4b71Sopenharmony_ci| beige | \#f5f5dc |  | 48e41f4b71Sopenharmony_ci| bisque | \#ffe4c4 |  | 49e41f4b71Sopenharmony_ci| black | \#000000 |  | 50e41f4b71Sopenharmony_ci| blanchedalmond | \#ffebcd |  | 51e41f4b71Sopenharmony_ci| blue | \#0000ff |  | 52e41f4b71Sopenharmony_ci| blueviolet | \#8a2be2 |  | 53e41f4b71Sopenharmony_ci| brown | \#a52a2a |  | 54e41f4b71Sopenharmony_ci| burlywood | \#deB887 |  | 55e41f4b71Sopenharmony_ci| cadetblue | \#5f9ea0 |  | 56e41f4b71Sopenharmony_ci| chartreuse | \#7fff00 |  | 57e41f4b71Sopenharmony_ci| chocolate | \#d2691e |  | 58e41f4b71Sopenharmony_ci| coral | \#ff7f50 |  | 59e41f4b71Sopenharmony_ci| cornflowerblue | \#6495ed |  | 60e41f4b71Sopenharmony_ci| cornsilk | \#fff8dc |  | 61e41f4b71Sopenharmony_ci| crimson | \#dc143c |  | 62e41f4b71Sopenharmony_ci| cyan | \#00ffff |  | 63e41f4b71Sopenharmony_ci| darkblue | \#00008b |  | 64e41f4b71Sopenharmony_ci| darkcyan | \#008b8b |  | 65e41f4b71Sopenharmony_ci| darkgoldenrod | \#b8860b |  | 66e41f4b71Sopenharmony_ci| darkgray | \#a9a9a9 |  | 67e41f4b71Sopenharmony_ci| darkgreen | \#006400 |  | 68e41f4b71Sopenharmony_ci| darkgrey | \#a9a9a9 |  | 69e41f4b71Sopenharmony_ci| darkkhaki | \#bdb76b |  | 70e41f4b71Sopenharmony_ci| darkmagenta | \#8b008b |  | 71e41f4b71Sopenharmony_ci| darkolivegreen | \#556b2f |  | 72e41f4b71Sopenharmony_ci| darkorange | \#ff8c00 |  | 73e41f4b71Sopenharmony_ci| darkorchid | \#9932cc |  | 74e41f4b71Sopenharmony_ci| darkred | \#8b0000 |  | 75e41f4b71Sopenharmony_ci| darksalmon | \#e9967a |  | 76e41f4b71Sopenharmony_ci| darkseagreen | \#8fbc8f |  | 77e41f4b71Sopenharmony_ci| darkslateblue | \#483d8b |  | 78e41f4b71Sopenharmony_ci| darkslategray | \#2f4f4f |  | 79e41f4b71Sopenharmony_ci| darkslategrey | \#2f4f4f |  | 80e41f4b71Sopenharmony_ci| darkturquoise | \#00ced1 |  | 81e41f4b71Sopenharmony_ci| darkviolet | \#9400d3 |  | 82e41f4b71Sopenharmony_ci| deeppink | \#ff1493 |  | 83e41f4b71Sopenharmony_ci| deepskyblue | \#00bfff |  | 84e41f4b71Sopenharmony_ci| dimgray | \#696969 |  | 85e41f4b71Sopenharmony_ci| dimgrey | \#696969 |  | 86e41f4b71Sopenharmony_ci| dodgerblue | \#1e90ff |  | 87e41f4b71Sopenharmony_ci| firebrick | \#b22222 |  | 88e41f4b71Sopenharmony_ci| floralwhite | \#fffaf0 |  | 89e41f4b71Sopenharmony_ci| forestgreen | \#228b22 |  | 90e41f4b71Sopenharmony_ci| fuchsia | \#ff00ff |  | 91e41f4b71Sopenharmony_ci| gainsboro | \#dcdcdc |  | 92e41f4b71Sopenharmony_ci| ghostwhite | \#f8f8ff |  | 93e41f4b71Sopenharmony_ci| gold | \#ffd700 |  | 94e41f4b71Sopenharmony_ci| goldenrod | \#daa520 |  | 95e41f4b71Sopenharmony_ci| gray | \#808080 |  | 96e41f4b71Sopenharmony_ci| green | \#008000 |  | 97e41f4b71Sopenharmony_ci| greenyellow | \#adff2f |  | 98e41f4b71Sopenharmony_ci| grey | \#808080 |  | 99e41f4b71Sopenharmony_ci| honeydew | \#f0fff0 |  | 100e41f4b71Sopenharmony_ci| hotpink | \#ff69b4 |  | 101e41f4b71Sopenharmony_ci| indianred | \#cd5c5c |  | 102e41f4b71Sopenharmony_ci| indigo | \#4b0082 |  | 103e41f4b71Sopenharmony_ci| ivory | \#fffff0 |  | 104e41f4b71Sopenharmony_ci| khaki | \#f0e68c |  | 105e41f4b71Sopenharmony_ci| lavender | \#e6e6fa |  | 106e41f4b71Sopenharmony_ci| lavenderblush | \#fff0f5 |  | 107e41f4b71Sopenharmony_ci| lawngreen | \#7cfc00 |  | 108e41f4b71Sopenharmony_ci| lemonchiffon | \#fffacd |  | 109e41f4b71Sopenharmony_ci| lightblue | \#add8e6 |  | 110e41f4b71Sopenharmony_ci| lightcoral | \#f08080 |  | 111e41f4b71Sopenharmony_ci| lightcyan | \#e0ffff |  | 112e41f4b71Sopenharmony_ci| lightgoldenrodyellow | \#fafad2 |  | 113e41f4b71Sopenharmony_ci| lightgray | \#d3d3d3 |  | 114e41f4b71Sopenharmony_ci| lightgreen | \#90ee90 |  | 115e41f4b71Sopenharmony_ci| lightpink | \#ffb6c1 |  | 116e41f4b71Sopenharmony_ci| lightsalmon | \#ffa07a |  | 117e41f4b71Sopenharmony_ci| lightseagreen | \#20b2aa |  | 118e41f4b71Sopenharmony_ci| lightskyblue | \#87cefa |  | 119e41f4b71Sopenharmony_ci| lightslategray | \#778899 |  | 120e41f4b71Sopenharmony_ci| lightslategrey | \#778899 |  | 121e41f4b71Sopenharmony_ci| lightsteelblue | \#b0c4de |  | 122e41f4b71Sopenharmony_ci| lightyellow | \#ffffe0 |  | 123e41f4b71Sopenharmony_ci| lime | \#00ff00 |  | 124e41f4b71Sopenharmony_ci| limegreen | \#32cd32 |  | 125e41f4b71Sopenharmony_ci| linen | \#faf0e6 |  | 126e41f4b71Sopenharmony_ci| magenta | \#ff00ff |  | 127e41f4b71Sopenharmony_ci| maroon | \#800000 |  | 128e41f4b71Sopenharmony_ci| mediumaquamarine | \#66cdaa |  | 129e41f4b71Sopenharmony_ci| mediumblue | \#0000cd |  | 130e41f4b71Sopenharmony_ci| mediumorchid | \#ba55d3 |  | 131e41f4b71Sopenharmony_ci| mediumpurple | \#9370db |  | 132e41f4b71Sopenharmony_ci| mediumseagreen | \#3cb371 |  | 133e41f4b71Sopenharmony_ci| mediumslateblue | \#7b68ee |  | 134e41f4b71Sopenharmony_ci| mediumspringgreen | \#00fa9a |  | 135e41f4b71Sopenharmony_ci| mediumturquoise | \#48d1cc |  | 136e41f4b71Sopenharmony_ci| mediumvioletred | \#c71585 |  | 137e41f4b71Sopenharmony_ci| midnightblue | \#191970 |  | 138e41f4b71Sopenharmony_ci| mintcream | \#f5fffa |  | 139e41f4b71Sopenharmony_ci| mistyrose | \#ffe4e1 |  | 140e41f4b71Sopenharmony_ci| moccasin | \#ffe4b5 |  | 141e41f4b71Sopenharmony_ci| navajowhite | \#ffdead |  | 142e41f4b71Sopenharmony_ci| navy | \#000080 |  | 143e41f4b71Sopenharmony_ci| oldlace | \#fdf5e6 |  | 144e41f4b71Sopenharmony_ci| olive | \#808000 |  | 145e41f4b71Sopenharmony_ci| olivedrab | \#6b8e23 |  | 146e41f4b71Sopenharmony_ci| orange | \#ffa500 |  | 147e41f4b71Sopenharmony_ci| orangered | \#ff4500 |  | 148e41f4b71Sopenharmony_ci| orchid | \#da70d6 |  | 149e41f4b71Sopenharmony_ci| palegoldenrod | \#eee8aa |  | 150e41f4b71Sopenharmony_ci| palegreen | \#98fb98 |  | 151e41f4b71Sopenharmony_ci| paleturquoise | \#afeeee |  | 152e41f4b71Sopenharmony_ci| palevioletred | \#db7093 |  | 153e41f4b71Sopenharmony_ci| papayawhip | \#ffefd5 |  | 154e41f4b71Sopenharmony_ci| peachpuff | \#ffdab9 |  | 155e41f4b71Sopenharmony_ci| peru | \#cd853f |  | 156e41f4b71Sopenharmony_ci| pink | \#ffc0cb |  | 157e41f4b71Sopenharmony_ci| plum | \#dda0dd |  | 158e41f4b71Sopenharmony_ci| powderblue | \#b0e0e6 |  | 159e41f4b71Sopenharmony_ci| purple | \#800080 |  | 160e41f4b71Sopenharmony_ci| rebeccapurple | \#663399 |  | 161e41f4b71Sopenharmony_ci| red | \#ff0000 |  | 162e41f4b71Sopenharmony_ci| rosybrown | \#bc8f8f |  | 163e41f4b71Sopenharmony_ci| royalblue | \#4169e1 |  | 164e41f4b71Sopenharmony_ci| saddlebrown | \#8b4513 |  | 165e41f4b71Sopenharmony_ci| salmon | \#fa8072 |  | 166e41f4b71Sopenharmony_ci| sandybrown | \#f4a460 |  | 167e41f4b71Sopenharmony_ci| seagreen | \#2e8b57 |  | 168e41f4b71Sopenharmony_ci| seashell | \#fff5ee |  | 169e41f4b71Sopenharmony_ci| sienna | \#a0522d |  | 170e41f4b71Sopenharmony_ci| silver | \#c0c0c0 |  | 171e41f4b71Sopenharmony_ci| skyblue | \#87ceeb |  | 172e41f4b71Sopenharmony_ci| slateblue | \#6a5acd |  | 173e41f4b71Sopenharmony_ci| slategray | \#708090 |  | 174e41f4b71Sopenharmony_ci| slategrey | \#708090 |  | 175e41f4b71Sopenharmony_ci| snow | \#fffafa |  | 176e41f4b71Sopenharmony_ci| springgreen | \#00ff7f |  | 177e41f4b71Sopenharmony_ci| steelblue | \#4682b4 |  | 178e41f4b71Sopenharmony_ci| tan | \#d2b48c |  | 179e41f4b71Sopenharmony_ci| teal | \#008080 |  | 180e41f4b71Sopenharmony_ci| thistle | \#d8Bfd8 |  | 181e41f4b71Sopenharmony_ci| tomato | \#ff6347 |  | 182e41f4b71Sopenharmony_ci| turquoise | \#40e0d0 |  | 183e41f4b71Sopenharmony_ci| violet | \#ee82ee |  | 184e41f4b71Sopenharmony_ci| wheat | \#f5deb3 |  | 185e41f4b71Sopenharmony_ci| white | \#ffffff |  | 186e41f4b71Sopenharmony_ci| whitesmoke | \#f5f5f5 |  | 187e41f4b71Sopenharmony_ci| yellow | \#ffff00 |  | 188e41f4b71Sopenharmony_ci| yellowgreen | \#9acd32 |  | 189
