這是網易微專業之《前端工程師》的第二篇學習筆記，講CSS的簡寫和分開寫的問題，什么是簡寫呢，就是多個屬性值按照順序一行寫，那要遵循什么樣的順序寫呢？每種寫法都有什么含義呢？什么是分開寫呢？就是多個屬性分開命名著寫，看到這里你也許可能還不是很明白，沒關系，我們往下面看吧！
01.前言-CSS語法
CSS的語法一般是這樣的，選擇器{屬性名：屬性值；}我們要介紹的就是有時候需要這樣寫：選擇器{屬性名：屬性值 ...多個屬性值}，多個屬性值之間使用空格隔開。什么是屬性名呢，比如，背景background、邊框border之類的，屬性值就是給屬性名定一個值，比如邊框border定一個長寬值等，就是這個意思。
02. CSS的4個簡寫
（一） background 簡寫屬性在一個聲明中設置所有的背景屬性:
background-color
background-image
background-repeat
background-origin
background-clip
background-attachment
background-position
例如：
background: #444444 url(image.png) no-repeat fixed top;
其中
（1） background-repeat：定義背景圖片是否重復；值如下
background-repeat：repeat|repeat-x|repeat-y|no-repeat|inherit（從父元素繼承）//背景圖片是否重復；
（2）background-origin：定義背景圖片的起始點
background-origin:border-box|padding-box|content-box;
這個起始點決定了background-position的值從哪里開始偏移，默認background-origin的值是padding-box，就是從padding的框開始偏移，border-box表示從border的框開始偏移，content-box表示從內容的框邊角處開始偏移。IE6、IE7、IE8不支持這個屬性。
（3）background-clip：規定背景的繪制區域
background-clip:border-box|padding-box|content-box;
background-clip的默認值是border-box，意思是背景繪制在border內，padding-box就是背景繪制在padding內，content-box就是背景繪制在內容區內。IE6、IE7、IE8不支持這個屬性。
（4） background-attachment：定義背景圖片隨滾動軸的移動方式；值如下
background-attachment：scroll | fixed | local；
如果值是scroll就是背景圖片隨著滾動軸不滾動，如果是local的話，則是背景圖片隨滾動軸滾動，一般特效中的視覺差特效就是利用local這個屬性做的。
（5） background-position：定義背景圖像的起始位置；值如下
background-position：x% y%（百分比）|top left之類的|xpx ypx（具體數值）；
注意：比如設置了background-position：top；如果僅規定了一個關鍵詞，那么第二個值將默認是"center"。又比如設置了background-position：30px；僅規定了一個值，納悶另一個值將是50%。
設置background-position的時候需要把 background-attachment 屬性設置為 "fixed"，才能保證該屬性在 Firefox 和 Opera 中正常工作。
（二）border 簡寫屬性在一個聲明設置所有的邊框屬性:
border-width
border-style
border-color
例如：
border:1px solid red;
其中
（1） border-style：定義邊框樣式，包括有這幾種樣式：點狀、實線、雙線、虛線，值如下
border-style：dotted|solid|double|dashed;
（三）font 簡寫屬性在一個聲明中設置所有字體屬性:
font-style
font-variant
font-weight
font-size/line-height
font-family
例如:
font:italic bold 12px/20px arial,sans-serif;
font這個綜合屬性，連寫的時候必須寫字號和定義什么字體這兩個屬性值，如果只是font:12px；這樣寫是沒效果的，必須寫至少寫font:12px arial;才會有效。
其中
（1） font-style：定義字體樣式，包括有這幾種樣式：正常、斜體、強制斜體、繼承父元素，值如下
font-style：normal|italic|oblique|inherit；
（2） font-weight：定義字體粗細，值如下
font-weight：normal|bold|bolder|lighter|數值比如100-900；
400 等同于 normal，而 700 等同于 bold。
（3） font-family：定義什么字體，可以連串，中間用逗號隔開。
比如
font-family:"Times New Roman",Georgia,Serif;
注意：最后一個字體最好寫一個類族名稱作為最后的選擇。比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"有這幾類的字體類族，有興趣可以去查查同類字體類族中還有別的哪些字體，但不管怎么變，最后都會回到上面這幾個字體上。屬于Web安全字體。
當然你可以搭配CSS3中的@font-face使用，使用你想要的炫酷的自定義的字體，只要在@font-face中定義加載自定義的字體文件，就不怕用戶的電腦中沒有安裝你想要的字體了，就可以不用在最后一個字體寫字體類族的名稱。
（四）list-style 簡寫屬性在一個聲明中設置所有的列表屬性:
list-style-type
list-style-position
list-style-image
例如：
list-style:square inside url('/images/images.gif');
其中
（1） list-style-type：定義列表前面的小圓點是空心還是實心還是別的樣式或者沒有樣式。其值有但不限于如下這些
list-style-type：none|disc(實心圓)|circle（空心圓）|square（方塊）|decimal-leading-zero（以0開頭的數字）；
（2） list-style-position：定義列表的小原點之類的標記的位置是往里靠還是偏外面一點，可以看看實例，其值如下
list-style-position：inside|outside|inherit;
（3） list-style-image：定義列表標記的自定義圖片，你可以設置自己的標記，不用默認的小圓點，改用箭頭什么的圖案都可以，一般是PNG或者Gif格式的，帶透明的圖。其格式如下
list-style-image：url("/i/arrow.gif");
02. CSS的盒模型的四個值，三個值，兩個值的方向問題
拿margin為例，其他可以參照margin的。
（1）margin:10px ；意思是所有的外邊距（上下左右）都是 10px。
（2） margin:10px 50px；意思是上下外邊距是 10px，左右外邊距是 50px。
（3） margin:10px 50px 20px；上外邊距是 10px，而左右外邊距是 50px，下外邊距是 20px。
（4） margin:10px 50px 20px 30px；上外邊距是10px，右外邊距是50 px，下外邊距是 20px，左外邊距是 30px。
