css单位
em Relative to the font-size of the element (2em means 2 times the size of the current fon
ex Relative to the x-height of the current font (rarely used)
ch Relative to width of the "0" (zero)
rem Relative to font-size of the root element
vw Relative to 1% of the width of the viewport*
vh Relative to 1% of the height of the viewport*
vmin Relative to 1% of viewport's* smaller dimension
vmax Relative to 1% of viewport's* larger dimension
%
cm centimeters
mm millimeters
in inches (1in = 96px = 2.54cm)
px * pixels (1px = 1/96th of 1in)
pt points (1pt = 1/72 of 1in)
pc picas (1pc = 12 pt)
css颜色表示法
十六进制颜色
所有浏览器都支持十六进制颜色值。
十六进制颜色是这样规定的：#RRGGBB，其中的 RR（红色）、GG（绿色）、BB（蓝色）十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。
RGB 颜色
所有浏览器都支持 RGB 颜色值。
RGB 颜色值是这样规定的：rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度，可以是介于 0 与 255 之间的整数，或者是百分比值（从 0% 到 100%）。
RGBA 颜色
RGBA 颜色值得到以下浏览器的支持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。
RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。
RGBA 颜色值是这样规定的：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。
HSL 颜色
HSL 颜色值得到以下浏览器的支持：IE9+、Firefox、Chrome、Safari 以及 Opera 10+。
HSL 指的是 hue（色调）、saturation（饱和度）、lightness（亮度） - 表示颜色柱面坐标表示法。
HSL 颜色值是这样规定的：hsl(hue, saturation, lightness)。
Hue 是色盘上的度数（从 0 到 360） - 0 (或 360) 是红色，120 是绿色，240 是蓝色。Saturation 是百分比值；0% 意味着灰色，而 100% 是全彩。Lightness 同样是百分比值；0% 是黑色，100% 是白色。
HSLA 颜色
HSLA 颜色值得到以下浏览器的支持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。
HSLA 颜色值是 HSL 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。
HSLA 颜色值是这样规定的：hsla(hue, saturation, lightness, alpha)，其中的 alpha 参数定义不透明度。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。
| 颜色 | 颜色 HEX | 颜色 RGB |
|---|---|---|
| #FF0000 | rgb(255,0,0) | |
| #0000FF | rgb(0,0,255) | |
| #00FFFF | rgb(0,255,255) | |
| #C0C0C0 | rgb(192,192,192) | |
| #000000 | ||
| #080000 | ||
| #100000 | ||
| #180000 | ||
| #200000 | ||
| #280000 | ||
| #300000 | ||
| #380000 | ||
| #400000 | ||
| #480000 | ||
| #500000 | ||
| #580000 | ||
| #600000 | ||
| #680000 | ||
| #700000 | ||
| #780000 | ||
| #800000 | ||
| #880000 | ||
| #900000 | ||
| #980000 | ||
| #A00000 | ||
| #A80000 | ||
| #B00000 | ||
| #B80000 | ||
| #C00000 | ||
| #C80000 | ||
| #D00000 | ||
| #D80000 | ||
| #E00000 | ||
| #E80000 | ||
| #F00000 | ||
| #F80000 | ||
| #FF0000 |
| #080808 | rgb(8,8,8) | ||||||
| #181818 | rgb(24,24,24) | ||||||
| #282828 | rgb(40,40,40) | ||||||
| #383838 | rgb(56,56,56) | ||||||
| #484848 | rgb(72,72,72) | ||||||
| #585858 | rgb(88,88,88) | ||||||
| #686868 | rgb(104,104,104) | ||||||
| #787878 | rgb(120,120,120) | ||||||
| #888888 | rgb(136,136,136) | ||||||
| #989898 | rgb(152,152,152) | ||||||
| #A8A8A8 | rgb(168,168,168) | ||||||
| #B8B8B8 | rgb(184,184,184) | ||||||
| #C8C8C8 | rgb(200,200,200) | ||||||
| #D8D8D8 | rgb(216,216,216) | ||||||
| #E8E8E8 | rgb(232,232,232) | ||||||
| #F8F8F8 | rgb(248,248,248) | ||||||
| 实色效果 | 英文名称 | R.G.B | 16色 | 实色效果 | 英文名称 | R.G.B | 16色 |
|---|---|---|---|---|---|---|---|
| PaleTurquoise1 | 187 255 255 | #BBFFFF | |||||
| PaleTurquoise2 | 174 238 238 | #AEEEEE | |||||
| PaleTurquoise3 | 150 205 205 | #96CDCD | |||||
| PaleTurquoise4 | 102 139 139 | #668B8B | |||||
| CadetBlue1 | 152 245 255 | #98F5FF | |||||
| CadetBlue2 | 142 229 238 | #8EE5EE | |||||
| CadetBlue3 | 122 197 205 | #7AC5CD | |||||
| CadetBlue4 | 83 134 139 | #53868B | |||||
| Turquoise1 | 0 245 255 | #00F5FF | |||||
| Turquoise2 | 0 229 238 | #00E5EE | |||||
| Turquoise3 | 0 197 205 | #00C5CD | |||||
| Turquoise4 | 0 134 139 | #00868B | |||||
| Cyan1 | 0 255 255 | #00FFFF | |||||
| Cyan2 | 0 238 238 | #00EEEE | |||||
| Cyan3 | 0 205 205 | #00CDCD | |||||
| Cyan4 | 0 139 139 | #008B8B | |||||
| DarkSlateGray1 | 151 255 255 | #97FFFF | |||||
| DarkSlateGray2 | 141 238 238 | #8DEEEE | |||||
| DarkSlateGray3 | 121 205 205 | #79CDCD | |||||
| DarkSlateGray4 | 82 139 139 | #528B8B | |||||
| Aquamarine1 | 127 255 212 | #7FFFD4 | |||||
| Aquamarine2 | 118 238 198 | #76EEC6 | |||||
| Aquamarine3 | 102 205 170 | #66CDAA | |||||
| Aquamarine4 | 69 139 116 | #458B74 | |||||
| DarkSeaGreen1 | 193 255 193 | #C1FFC1 | |||||
| DarkSeaGreen2 | 180 238 180 | #B4EEB4 | |||||
| DarkSeaGreen3 | 155 205 155 | #9BCD9B | |||||
| DarkSeaGreen4 | 105 139 105 | #698B69 | |||||
| SeaGreen1 | 84 255 159 | #54FF9F | |||||
| SeaGreen2 | 78 238 148 | #4EEE94 | |||||
| SeaGreen3 | 67 205 128 | #43CD80 | |||||
| SeaGreen4 | 46 139 87 | #2E8B57 | |||||
| PaleGreen1 | 154 255 154 | #9AFF9A | |||||
| PaleGreen2 | 144 238 144 | #90EE90 | |||||
| PaleGreen3 | 124 205 124 | #7CCD7C | |||||
| PaleGreen4 | 84 139 84 | #548B54 | |||||
| SpringGreen1 | 0 255 127 | #00FF7F | |||||
| SpringGreen2 | 0 238 118 | #00EE76 | |||||
| SpringGreen3 | 0 205 102 | #00CD66 | |||||
| SpringGreen4 | 0 139 69 | #008B45 | |||||
| Green1 | 0 255 0 | #00FF00 | |||||
| Green2 | 0 238 0 | #00EE00 | |||||
| Green3 | 0 205 0 | #00CD00 | |||||
| Green4 | 0 139 0 | #008B00 | |||||
| Chartreuse1 | 127 255 0 | #7FFF00 | |||||
| Chartreuse2 | 118 238 0 | #76EE00 | |||||
| Chartreuse3 | 102 205 0 | #66CD00 | |||||
| Chartreuse4 | 69 139 0 | #458B00 | |||||
| OliveDrab1 | 192 255 62 | #C0FF3E | |||||
| OliveDrab2 | 179 238 58 | #B3EE3A | |||||
| OliveDrab3 | 154 205 50 | #9ACD32 | |||||
| OliveDrab4 | 105 139 34 | #698B22 | |||||
| DarkOliveGreen1 | 202 255 112 | #CAFF70 | |||||
| DarkOliveGreen2 | 188 238 104 | #BCEE68 | |||||
| DarkOliveGreen3 | 162 205 90 | #A2CD5A | |||||
| DarkOliveGreen4 | 110 139 61 | #6E8B3D | |||||
| Khaki1 | 255 246 143 | #FFF68F | |||||
| Khaki2 | 238 230 133 | #EEE685 | |||||
| Khaki3 | 205 198 115 | #CDC673 | |||||
| Khaki4 | 139 134 78 | #8B864E | |||||
| LightGoldenrod1 | 255 236 139 | #FFEC8B | |||||
| LightGoldenrod2 | 238 220 130 | #EEDC82 | |||||
| LightGoldenrod3 | 205 190 112 | #CDBE70 | |||||
| LightGoldenrod4 | 139 129 76 | #8B814C | |||||
| LightYellow1 | 255 255 224 | #FFFFE0 | |||||
| LightYellow2 | 238 238 209 | #EEEED1 | |||||
| LightYellow3 | 205 205 180 | #CDCDB4 | |||||
| LightYellow4 | 139 139 122 | #8B8B7A | |||||
| Yellow1 | 255 255 0 | #FFFF00 | |||||
| Yellow2 | 238 238 0 | #EEEE00 | |||||
| Yellow3 | 205 205 0 | #CDCD00 | |||||
| Yellow4 | 139 139 0 | #8B8B00 | |||||
| Gold1 | 255 215 0 | #FFD700 | |||||
| Gold2 | 238 201 0 | #EEC900 | |||||
| Gold3 | 205 173 0 | #CDAD00 | |||||
| Gold4 | 139 117 0 | #8B7500 | |||||
| Goldenrod1 | 255 193 37 | #FFC125 | |||||
| Goldenrod2 | 238 180 34 | #EEB422 | |||||
| Goldenrod3 | 205 155 29 | #CD9B1D | |||||
| Goldenrod4 | 139 105 20 | #8B6914 | |||||
| DarkGoldenrod1 | 255 185 15 | #FFB90F | |||||
| DarkGoldenrod2 | 238 173 14 | #EEAD0E | |||||
| DarkGoldenrod3 | 205 149 12 | #CD950C | |||||
| DarkGoldenrod4 | 139 101 8 | #8B658B | |||||
| RosyBrown1 | 255 193 193 | #FFC1C1 | |||||
| RosyBrown2 | 238 180 180 | #EEB4B4 | |||||
| RosyBrown3 | 205 155 155 | #CD9B9B | |||||
| RosyBrown4 | 139 105 105 | #8B6969 | |||||
| IndianRed1 | 255 106 106 | #FF6A6A | |||||
| IndianRed2 | 238 99 99 | #EE6363 | |||||
| IndianRed3 | 205 85 85 | #CD5555 | |||||
| IndianRed4 | 139 58 58 | #8B3A3A | |||||
| Sienna1 | 255 130 71 | #FF8247 | |||||
| Sienna2 | 238 121 66 | #EE7942 | |||||
| Sienna3 | 205 104 57 | #CD6839 | |||||
| Sienna4 | 139 71 38 | #8B4726 | |||||
| Burlywood1 | 255 211 155 | #FFD39B | |||||
| Burlywood2 | 238 197 145 | #EEC591 | |||||
| Burlywood3 | 205 170 125 | #CDAA7D | |||||
| Burlywood4 | 139 115 85 | #8B7355 | |||||
| Wheat1 | 255 231 186 | #FFE7BA | |||||
| Wheat2 | 238 216 174 | #EED8AE | |||||
| Wheat3 | 205 186 150 | #CDBA96 | |||||
| Wheat4 | 139 126 102 | #8B7E66 | |||||
| Tan1 | 255 165 79 | #FFA54F | |||||
| Tan2 | 238 154 73 | #EE9A49 | |||||
| Tan3 | 205 133 63 | #CD853F | |||||
| Tan4 | 139 90 43 | #8B5A2B | |||||
| Chocolate1 | 255 127 36 | #FF7F24 | |||||
| Chocolate2 | 238 118 33 | #EE7621 | |||||
| Chocolate3 | 205 102 29 | #CD661D | |||||
| Chocolate4 | 139 69 19 | #8B4513 | |||||
| Firebrick1 | 255 48 48 | #FF3030 | |||||
| Firebrick2 | 238 44 44 | #EE2C2C | |||||
| Firebrick3 | 205 38 38 | #CD2626 | |||||
| Firebrick4 | 139 26 26 | #8B1A1A | |||||
| Brown1 | 255 64 64 | #FF4040 | |||||
| Brown2 | 238 59 59 | #EE3B3B | |||||
| Brown3 | 205 51 51 | #CD3333 | |||||
| Brown4 | 139 35 35 | #8B2323 | |||||
| Salmon1 | 255 140 105 | #FF8C69 | |||||
| Salmon2 | 238 130 98 | #EE8262 | |||||
| Salmon3 | 205 112 84 | #CD7054 | |||||
| Salmon4 | 139 76 57 | #8B4C39 | |||||
| LightSalmon1 | 255 160 122 | #FFA07A | |||||
| LightSalmon2 | 238 149 114 | #EE9572 | |||||
| LightSalmon3 | 205 129 98 | #CD8162 | |||||
| LightSalmon4 | 139 87 66 | #8B5742 | |||||
| Orange1 | 255 165 0 | #FFA500 | |||||
| Orange2 | 238 154 0 | #EE9A00 | |||||
| Orange3 | 205 133 0 | #CD8500 | |||||
| Orange4 | 139 90 0 | #8B5A00 | |||||
| DarkOrange1 | 255 127 0 | #FF7F00 | |||||
| DarkOrange2 | 238 118 0 | #EE7600 | |||||
| DarkOrange3 | 205 102 0 | #CD6600 | |||||
| DarkOrange4 | 139 69 0 | #8B4500 | |||||
| Coral1 | 255 114 86 | #FF7256 | |||||
| Coral2 | 238 106 80 | #EE6A50 | |||||
| Coral3 | 205 91 69 | #CD5B45 | |||||
| Coral4 | 139 62 47 | #8B3E2F | |||||
| Tomato1 | 255 99 71 | #FF6347 | |||||
| Tomato2 | 238 92 66 | #EE5C42 | |||||
| Tomato3 | 205 79 57 | #CD4F39 | |||||
| Tomato4 | 139 54 38 | #8B3626 | |||||
| OrangeRed1 | 255 69 0 | #FF4500 | |||||
| OrangeRed2 | 238 64 0 | #EE4000 | |||||
| OrangeRed3 | 205 55 0 | #CD3700 | |||||
| OrangeRed4 | 139 37 0 | #8B2500 | |||||
| Red1 | 255 0 0 | #FF0000 | |||||
| Red2 | 238 0 0 | #EE0000 | |||||
| Red3 | 205 0 0 | #CD0000 | |||||
| Red4 | 139 0 0 | #8B0000 | |||||
| DeepPink1 | 255 20 147 | #FF1493 | |||||
| DeepPink2 | 238 18 137 | #EE1289 | |||||
| DeepPink3 | 205 16 118 | #CD1076 | |||||
| DeepPink4 | 139 10 80 | #8B0A50 | |||||
| HotPink1 | 255 110 180 | #FF6EB4 | |||||
| HotPink2 | 238 106 167 | #EE6AA7 | |||||
| HotPink3 | 205 96 144 | #CD6090 | |||||
| HotPink4 | 139 58 98 | #8B3A62 | |||||
| Pink1 | 255 181 197 | #FFB5C5 | |||||
| Pink2 | 238 169 184 | #EEA9B8 | |||||
| Pink3 | 205 145 158 | #CD919E | |||||
| Pink4 | 139 99 108 | #8B636C | |||||
| LightPink1 | 255 174 185 | #FFAEB9 | |||||
| LightPink2 | 238 162 173 | #EEA2AD | |||||
| LightPink3 | 205 140 149 | #CD8C95 | |||||
| LightPink4 | 139 95 101 | #8B5F65 | |||||
| PaleVioletRed1 | 255 130 171 | #FF82AB | |||||
| PaleVioletRed2 | 238 121 159 | #EE799F | |||||
| PaleVioletRed3 | 205 104 137 | #CD6889 | |||||
| PaleVioletRed4 | 139 71 93 | #8B475D | |||||
| Maroon1 | 255 52 179 | #FF34B3 | |||||
| Maroon2 | 238 48 167 | #EE30A7 | |||||
| Maroon3 | 205 41 144 | #CD2990 | |||||
| Maroon4 | 139 28 98 | #8B1C62 | |||||
| VioletRed1 | 255 62 150 | #FF3E96 | |||||
| VioletRed2 | 238 58 140 | #EE3A8C | |||||
| VioletRed3 | 205 50 120 | #CD3278 | |||||
| VioletRed4 | 139 34 82 | #8B2252 | |||||
| Magenta1 | 255 0 255 | #FF00FF | |||||
| Magenta2 | 238 0 238 | #EE00EE | |||||
| Magenta3 | 205 0 205 | #CD00CD | |||||
| Magenta4 | 139 0 139 | #8B008B | |||||
| Orchid1 | 255 131 250 | #FF83FA | |||||
| Orchid2 | 238 122 233 | #EE7AE9 | |||||
| Orchid3 | 205 105 201 | #CD69C9 | |||||
| Orchid4 | 139 71 137 | #8B4789 | |||||
| Plum1 | 255 187 255 | #FFBBFF | |||||
| Plum2 | 238 174 238 | #EEAEEE | |||||
| Plum3 | 205 150 205 | #CD96CD | |||||
| Plum4 | 139 102 139 | #8B668B | |||||
| MediumOrchid1 | 224 102 255 | #E066FF | |||||
| MediumOrchid2 | 209 95 238 | #D15FEE | |||||
| MediumOrchid3 | 180 82 205 | #B452CD | |||||
| MediumOrchid4 | 122 55 139 | #7A378B | |||||
| DarkOrchid1 | 191 62 255 | #BF3EFF | |||||
| DarkOrchid2 | 178 58 238 | #B23AEE | |||||
| DarkOrchid3 | 154 50 205 | #9A32CD | |||||
| DarkOrchid4 | 104 34 139 | #68228B | |||||
| Purple1 | 155 48 255 | #9B30FF | |||||
| Purple2 | 145 44 238 | #912CEE | |||||
| Purple3 | 125 38 205 | #7D26CD | |||||
| Purple4 | 85 26 139 | #551A8B | |||||
| MediumPurple1 | 171 130 255 | #AB82FF | |||||
| MediumPurple2 | 159 121 238 | #9F79EE | |||||
| MediumPurple3 | 137 104 205 | #8968CD | |||||
| MediumPurple4 | 93 71 139 | #5D478B | |||||
| Thistle1 | 255 225 255 | #FFE1FF | |||||
| Thistle2 | 238 210 238 | #EED2EE | |||||
| Thistle3 | 205 181 205 | #CDB5CD | |||||
| Thistle4 | 139 123 139 | #8B7B8B | |||||
| grey11 | 28 28 28 | #1C1C1C | |||||
| grey21 | 54 54 54 | #363636 | |||||
| grey31 | 79 79 79 | #4F4F4F | |||||
| grey41 | 105 105 105 | #696969 | |||||
| grey51 | 130 130 130 | #828282 | |||||
| grey61 | 156 156 156 | #9C9C9C | |||||
| grey71 | 181 181 181 | #B5B5B5 | |||||
| gray81 | 207 207 207 | #CFCFCF | |||||
| gray91 | 232 232 232 | #E8E8E8 | |||||
| DarkGrey | 169 169 169 | #A9A9A9 | |||||
| DarkBlue | 0 0 139 | #00008B | |||||
| DarkCyan | 0 139 139 | #008B8B | |||||
| DarkMagenta | 139 0 139 | #8B008B | |||||
| DarkRed | 139 0 0 | #8B0000 | |||||
| LightCyan4 | 122 139 139 | #7A8B8B | LightGreen | 144 238 144 | #90EE90 |