Colors

• Keywords

• Hexadecimal

• RGB

• HSL

Keywords

• Like red,black

• The keywords notation provide limited options and thus are not the most practice

.task {  background: maroon;}.count {  background: yellow;}

Hexadecimal

• Start with #, followed by three or six character

.task {    background: #800000; }  .count {     background: #ff0; }

RGB

• RGB color values are stated using the rgb() function, r means red, g means green, b means blue.

• The integer from 0 to 255.

• The RGB values also include an alpha, change by using the rgba().

• The fourth value between 0 and 1.

.task {  background: rgb(128, 0, 0);}.count {  background: rgb(255, 255, 0);}

.task { background: rgba(128, 0, 0, .25);}.count { background: rgb(255, 255, 0, 1);}

HSL & HSLa Colors

.task {  background: hsl(0, 100%, 25%);}.count {  background: hsl(60, 100%, 50%);}

• The first value represent the color wheel

• The second and third values, the saturation(饱和度) and lightness(亮度)

Length

• Absolute Lengths

• Relative Lengths

Absolute Lengths

• Pixels

• cm

• in

• mm

The pixel is equal to 1/96 of an inch, thus there are 96 pixels in an inch

p {    font-size: 14px;}

Relative Lengths

• em

• %

.col {    width: 50%; /* Base your parent element width */}

.banner {    font-size: 14px;    width: 5em;  /* The em unit relative to the font size of the closest parent elment with a stated font size */}