1、font
常用字型：宋體（SimSon）、黑體（SimHei）、微軟雅黑

{
  font:italic bold 12px/20px arial,sans-serif;
  }

font簡寫中size和family位置固定 size在前 且都不可省略

font-style：字型樣式
normal—— 預設值。瀏覽器顯示一個標準的字型樣式。
italic——瀏覽器會顯示一個斜體的字型樣式。
oblique——瀏覽器會顯示一個傾斜的字型樣式。
inherit——規定應該從父元素繼承字型樣式。

font-variant：設定小型大寫字母
normal——預設值。瀏覽器會顯示一個標準的字型。
small-caps——瀏覽器會顯示小型大寫字母的字型。
inherit——規定應該從父元素繼承 font-variant 屬性的值。

font-weight：字型粗細
normal——預設值。定義標準的字元。
bold——定義粗體字元。
bolder——定義更粗的字元。
lighter——定義更細的字元。
inherit——規定應該從父元素繼承字型的粗細。
100
200
300
400
500
600
700
800
900
定義由粗到細的字元。400 等同於 normal，而 700 等同於 bold。

font-size/line-height：字型大小和行高

font-family：字型型別
規定元素的字體系列。
font-family 可以把多個字型名稱作為一個“回退”系統來儲存。如果瀏覽器不支援第一個字型，則會嘗試下一個。也就是說，font-family 屬性的值是用於某個元素的字型族名稱或/及類族名稱的一個優先表。瀏覽器會使用它可識別的第一個值。
有兩種型別的字體系列名稱：
指定的系列名稱：具體字型的名稱，比如：”times”、”courier”、”arial”。
通常字體系列名稱：比如：”serif”、”sans-serif”、”cursive”、”fantasy”、”monospace”
提示：使用逗號分割每個值，並始終提供一個類族名稱作為最後的選擇。
注意：使用某種特定的字體系列（Geneva）完全取決於使用者機器上該字體系列是否可用；這個屬性沒有指示任何字型下載。因此，強烈推薦使用一個通用字體系列名作為後路。

2、顏色形式
顏色英文名：white
#ffffff
#fff
rgb（255，255，255）
rgba（255，255，255，1）

3、顏色漸變（引用菜鳥教程）
線性漸變

#grad {
  background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
 

  background: linear-gradient(red, blue); /* 標準的語法 */
}
#grad {//左右線性漸變
  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, red , blue); /* 標準的語法 */
}
#grad {//對角線線性漸變
  background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to bottom right, red , blue); /* 標準的語法 */
}
#grad {//重複線性漸變
  /* Safari 5.1 - 6.0 */
  background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Opera 11.1 - 12.0 */
  background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Firefox 3.6 - 15 */
  background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* 標準的語法 */
  background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

角度線性漸變：
角度是指水平線和漸變線之間的角度，逆時針方向計算。換句話說，0deg 將建立一個從下到上的漸變，90deg 將建立一個從左到右的漸變。
但是，請注意很多瀏覽器(Chrome,Safari,fiefox等)的使用了舊的標準，即 0deg 將建立一個從左到右的漸變，90deg 將建立一個從下到上的漸變。換算公式 90 - x = y 其中 x 為標準角度，y為非標準角度。

#grad {
  background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(180deg, red, blue); /* 標準的語法 */
}

徑向漸變：

#grad {
  background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
  background: radial-gradient(red, green, blue); /* 標準的語法 */
}
#grad {//顏色不均勻徑向漸變
  background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
  background: radial-gradient(red 5%, green 15%, blue 60%); /* 標準的語法 */
}
#grad {//設定形狀circle ellipse（橢圓）
  background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
  background: radial-gradient(circle, red, yellow, green); /* 標準的語法 */
}
#grad //重複徑向漸變
  /* Safari 5.1 - 6.0 */
  background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* Opera 11.6 - 12.0 */
  background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* Firefox 3.6 - 15 */
  background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* 標準的語法 */
  background: repeating-radial-gradient(red, yellow 10%, green 15%);
}

不同尺寸大小徑向漸變（一般用不到）
closest-side
farthest-side
closest-corner
farthest-corner

#grad1 {
  /* Safari 5.1 - 6.0 */
  background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); 
  /* Opera 11.6 - 12.0 */
  background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
  /* Firefox 3.6 - 15 */
  background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
  /* 標準的語法 */
  background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
}

#grad2 {
  /* Safari 5.1 - 6.0 */
  background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
  /* Opera 11.6 - 12.0 */ 
  background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
  /* Firefox 3.6 - 15 */
  background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
  /* 標準的語法 */
  background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
}