units&color
| unit | relative to |
|---|---|
| em | font size of the element |
| ex | x-height of the element’s font |
| ch | width of the "0" (ZERO, U+0030) glyph in the element’s font |
| rem | font size of the root element |
| vw | 1% of viewport’s width |
| vh | 1% of viewport’s height |
| vmin | 1% of viewport’s smaller dimension |
| vmax | 1% of viewport’s larger dimension |
| unit | name | equivalence |
|---|---|---|
| cm | centimeters | 1cm = 96px/2.54 |
| mm | millimeters | 1mm = 1/10th of 1cm |
| Q | quarter-millimeters | 1Q = 1/40th of 1cm |
| in | inches | 1in = 2.54cm = 96px |
| pc | picas | 1pc = 1/6th of 1in |
| pt | points | 1pt = 1/72th of 1in |
| px | pixels | 1px = 1/96th of 1in |
em unit
Equal to the computed value of the font-size property of the element on which it is used.
h1 { line-height: 1.2em }
means that the line height of h1 elements will be 20% greater than the font size of h1 element. On the other hand:
h1 { font-size: 1.2em }
means that the font size of h1 elements will be 20% greater than the computed font size inherited by h1 elements.
rem unit
Equal to the computed value of font-size on the root element.
If used in the font-size property of the root element, or in a document with no root element, 1rem is equal to the initial value of the font-size property.
px
All of the absolute length units are compatible, and px is their canonical unit.
For a CSS device, these dimensions are anchored either
- by relating the physical units to their physical measurements, or
- by relating the pixel unit to the reference pixel.
For print media at typical viewing distances, the anchor unit should be one of the standard physical units (inches, centimeters, etc). For screen media (including high-resolution devices), low-resolution devices, and devices with unusual viewing distances, it is recommended instead that the anchor unit be the pixel unit. For such devices it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel.
fr
Flexible Lengths: the fr unit
A flexible length or <flex> is a dimension with the fr unit, which represents a fraction of the leftover space in the grid container. Tracks sized with fr units are called flexible tracks as they flex in response to leftover space similar to how flex items with a zero base size fill space in a flex container.
The distribution of leftover space occurs after all non-flexible track sizing functions have reached their maximum. The total size of such rows or columns is subtracted from the available space, yielding the leftover space, which is then divided among the flex-sized rows and columns in proportion to their flex factor.
Each column or row’s share of the leftover space can be computed as the column or row’s <flex> * <leftover space> / <sum of all flex factors>.
<flex> values between 0fr and 1fr have a somewhat special behavior: when the sum of the flex factors is less than 1, they will take up less than 100% of the leftover space.
When the available space is infinite (which happens when the grid container’s width or height is indefinite), flex-sized grid tracks are sized to their contents while retaining their respective proportions. The used size of each flex-sized grid track is computed by determining the max-content size of each flex-sized grid track and dividing that size by the respective flex factor to determine a “hypothetical 1fr size”. The maximum of those is used as the resolved 1fr length (the flex fraction), which is then multiplied by each grid track’s flex factor to determine its final size.
Note: <flex> values are not <length>s (nor are they compatible with <length>s, like some <percentage> values), so they cannot be represented in or combined with other unit types in calc() expressions.
https://www.w3.org/TR/2018/REC-css-color-3-20180619/
↑website ↓The table below provides a list of the X11 colors [X11COLORS] supported by popular browsers with the addition of gray/grey variants from SVG 1.0.
| Named | Numeric | Color name | Hex rgb | Decimal |
|---|---|---|---|---|
| aliceblue | #F0F8FF | 240,248,255 | ||
| antiquewhite | #FAEBD7 | 250,235,215 | ||
| aqua | #00FFFF | 0,255,255 | ||
| aquamarine | #7FFFD4 | 127,255,212 | ||
| azure | #F0FFFF | 240,255,255 | ||
| beige | #F5F5DC | 245,245,220 | ||
| bisque | #FFE4C4 | 255,228,196 | ||
| black | #000000 | 0,0,0 | ||
| blanchedalmond | #FFEBCD | 255,235,205 | ||
| blue | #0000FF | 0,0,255 | ||
| blueviolet | #8A2BE2 | 138,43,226 | ||
| brown | #A52A2A | 165,42,42 | ||
| burlywood | #DEB887 | 222,184,135 | ||
| cadetblue | #5F9EA0 | 95,158,160 | ||
| chartreuse | #7FFF00 | 127,255,0 | ||
| chocolate | #D2691E | 210,105,30 | ||
| coral | #FF7F50 | 255,127,80 | ||
| cornflowerblue | #6495ED | 100,149,237 | ||
| cornsilk | #FFF8DC | 255,248,220 | ||
| crimson | #DC143C | 220,20,60 | ||
| cyan | #00FFFF | 0,255,255 | ||
| darkblue | #00008B | 0,0,139 | ||
| darkcyan | #008B8B | 0,139,139 | ||
| darkgoldenrod | #B8860B | 184,134,11 | ||
| darkgray | #A9A9A9 | 169,169,169 | ||
| darkgreen | #006400 | 0,100,0 | ||
| darkgrey | #A9A9A9 | 169,169,169 | ||
| darkkhaki | #BDB76B | 189,183,107 | ||
| darkmagenta | #8B008B | 139,0,139 | ||
| darkolivegreen | #556B2F | 85,107,47 | ||
| darkorange | #FF8C00 | 255,140,0 | ||
| darkorchid | #9932CC | 153,50,204 | ||
| darkred | #8B0000 | 139,0,0 | ||
| darksalmon | #E9967A | 233,150,122 | ||
| darkseagreen | #8FBC8F | 143,188,143 | ||
| darkslateblue | #483D8B | 72,61,139 | ||
| darkslategray | #2F4F4F | 47,79,79 | ||
| darkslategrey | #2F4F4F | 47,79,79 | ||
| darkturquoise | #00CED1 | 0,206,209 | ||
| darkviolet | #9400D3 | 148,0,211 | ||
| deeppink | #FF1493 | 255,20,147 | ||
| deepskyblue | #00BFFF | 0,191,255 | ||
| dimgray | #696969 | 105,105,105 | ||
| dimgrey | #696969 | 105,105,105 | ||
| dodgerblue | #1E90FF | 30,144,255 | ||
| firebrick | #B22222 | 178,34,34 | ||
| floralwhite | #FFFAF0 | 255,250,240 | ||
| forestgreen | #228B22 | 34,139,34 | ||
| fuchsia | #FF00FF | 255,0,255 | ||
| gainsboro | #DCDCDC | 220,220,220 | ||
| ghostwhite | #F8F8FF | 248,248,255 | ||
| gold | #FFD700 | 255,215,0 | ||
| goldenrod | #DAA520 | 218,165,32 | ||
| gray | #808080 | 128,128,128 | ||
| green | #008000 | 0,128,0 | ||
| greenyellow | #ADFF2F | 173,255,47 | ||
| grey | #808080 | 128,128,128 | ||
| honeydew | #F0FFF0 | 240,255,240 | ||
| hotpink | #FF69B4 | 255,105,180 | ||
| indianred | #CD5C5C | 205,92,92 | ||
| indigo | #4B0082 | 75,0,130 | ||
| ivory | #FFFFF0 | 255,255,240 | ||
| khaki | #F0E68C | 240,230,140 | ||
| lavender | #E6E6FA | 230,230,250 | ||
| lavenderblush | #FFF0F5 | 255,240,245 | ||
| lawngreen | #7CFC00 | 124,252,0 | ||
| lemonchiffon | #FFFACD | 255,250,205 | ||
| lightblue | #ADD8E6 | 173,216,230 | ||
| lightcoral | #F08080 | 240,128,128 | ||
| lightcyan | #E0FFFF | 224,255,255 | ||
| lightgoldenrodyellow | #FAFAD2 | 250,250,210 | ||
| lightgray | #D3D3D3 | 211,211,211 | ||
| lightgreen | #90EE90 | 144,238,144 | ||
| lightgrey | #D3D3D3 | 211,211,211 | ||
| lightpink | #FFB6C1 | 255,182,193 | ||
| lightsalmon | #FFA07A | 255,160,122 | ||
| lightseagreen | #20B2AA | 32,178,170 | ||
| lightskyblue | #87CEFA | 135,206,250 | ||
| lightslategray | #778899 | 119,136,153 | ||
| lightslategrey | #778899 | 119,136,153 | ||
| lightsteelblue | #B0C4DE | 176,196,222 | ||
| lightyellow | #FFFFE0 | 255,255,224 | ||
| lime | #00FF00 | 0,255,0 | ||
| limegreen | #32CD32 | 50,205,50 | ||
| linen | #FAF0E6 | 250,240,230 | ||
| magenta | #FF00FF | 255,0,255 | ||
| maroon | #800000 | 128,0,0 | ||
| mediumaquamarine | #66CDAA | 102,205,170 | ||
| mediumblue | #0000CD | 0,0,205 | ||
| mediumorchid | #BA55D3 | 186,85,211 | ||
| mediumpurple | #9370DB | 147,112,219 | ||
| mediumseagreen | #3CB371 | 60,179,113 | ||
| mediumslateblue | #7B68EE | 123,104,238 | ||
| mediumspringgreen | #00FA9A | 0,250,154 | ||
| mediumturquoise | #48D1CC | 72,209,204 | ||
| mediumvioletred | #C71585 | 199,21,133 | ||
| midnightblue | #191970 | 25,25,112 | ||
| mintcream | #F5FFFA | 245,255,250 | ||
| mistyrose | #FFE4E1 | 255,228,225 | ||
| moccasin | #FFE4B5 | 255,228,181 | ||
| navajowhite | #FFDEAD | 255,222,173 | ||
| navy | #000080 | 0,0,128 | ||
| oldlace | #FDF5E6 | 253,245,230 | ||
| olive | #808000 | 128,128,0 | ||
| olivedrab | #6B8E23 | 107,142,35 | ||
| orange | #FFA500 | 255,165,0 | ||
| orangered | #FF4500 | 255,69,0 | ||
| orchid | #DA70D6 | 218,112,214 | ||
| palegoldenrod | #EEE8AA | 238,232,170 | ||
| palegreen | #98FB98 | 152,251,152 | ||
| paleturquoise | #AFEEEE | 175,238,238 | ||
| palevioletred | #DB7093 | 219,112,147 | ||
| papayawhip | #FFEFD5 | 255,239,213 | ||
| peachpuff | #FFDAB9 | 255,218,185 | ||
| peru | #CD853F | 205,133,63 | ||
| pink | #FFC0CB | 255,192,203 | ||
| plum | #DDA0DD | 221,160,221 | ||
| powderblue | #B0E0E6 | 176,224,230 | ||
| purple | #800080 | 128,0,128 | ||
| red | #FF0000 | 255,0,0 | ||
| rosybrown | #BC8F8F | 188,143,143 | ||
| royalblue | #4169E1 | 65,105,225 | ||
| saddlebrown | #8B4513 | 139,69,19 | ||
| salmon | #FA8072 | 250,128,114 | ||
| sandybrown | #F4A460 | 244,164,96 | ||
| seagreen | #2E8B57 | 46,139,87 | ||
| seashell | #FFF5EE | 255,245,238 | ||
| sienna | #A0522D | 160,82,45 | ||
| silver | #C0C0C0 | 192,192,192 | ||
| skyblue | #87CEEB | 135,206,235 | ||
| slateblue | #6A5ACD | 106,90,205 | ||
| slategray | #708090 | 112,128,144 | ||
| slategrey | #708090 | 112,128,144 | ||
| snow | #FFFAFA | 255,250,250 | ||
| springgreen | #00FF7F | 0,255,127 | ||
| steelblue | #4682B4 | 70,130,180 | ||
| tan | #D2B48C | 210,180,140 | ||
| teal | #008080 | 0,128,128 | ||
| thistle | #D8BFD8 | 216,191,216 | ||
| tomato | #FF6347 | 255,99,71 | ||
| turquoise | #40E0D0 | 64,224,208 | ||
| violet | #EE82EE | 238,130,238 | ||
| wheat | #F5DEB3 | 245,222,179 | ||
| white | #FFFFFF | 255,255,255 | ||
| whitesmoke | #F5F5F5 | 245,245,245 | ||
| yellow | #FFFF00 | 255,255,0 | ||
| yellowgreen | #9ACD32 | 154,205,50 |
