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

clipboard.png

.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 */
}

wikilike7
120 声望7 粉丝

努力成为一个好前端