CSS 那麼多屬性，而且每個屬性都有多個值怎麼記？

12-24

新手表示很苦惱

/**2016.2.19更新，CSS書寫順序推薦（全部）**/

Nicholas C.Zakas (《JavaScript高級程序設計》的作者，NCZOnline - The official website of Nicholas C. Zakas)說過，要想全面理解和掌握JavaScript，關鍵在於弄清楚它的歷史、本質和局限性。對CSS同樣適用。

歷史
混沌未分天地亂，CSS的誕生就是為了終結當時由推動Web世界繁榮的首功之臣HTML引發的混亂局面。在1990~1993年Web世界還處於一片荒蕪的時候，HTML這個勤勞而艱難生存的族群帶著描述段落、標題、超鏈接等結構性內容（後來這些成員榮升HTML國的貴族，經過幾次戰亂並一直生活到現在）的技能給Web世界帶來了生機。而後 Mosaic（早期的一款瀏覽器）的出現讓文字和圖片可以一起顯示出來，也一夜之間讓Web威名遠揚，這裡充滿魔力與神奇。無數的站點冒了出來，無數的站點吸引無數的人，無數的人帶來無數的新功能，我要字體能變色，我要字體能加粗，各種樣式要求不斷增加。HTML為了滿足人們不斷膨脹的慾望和要求努力擴充技能樹，最後弄得自己苦不堪言，一大堆描述樣式的標籤（現在還有的&&等）搞得開發亂七八糟。

結構化標記語言就這樣變成了一坨一坨的字元串。

剛成立的Web世界聯合國W3C並沒有坐視不管，而是在積極的尋找與焦急的等待。終於他們找到了CSS。CSS在現在Web開發中可謂平淡無奇，寫CSS是很自然的事情因為它就屬於開發的一部分，但在當時卻是絕無僅有的。它最初由H?￥kon Wium Lie

於1994.10.10（他當時是Tim Berners-Lee在CERN的同事，Lee發明了萬維網）提出來，由Bert Bos建議，經過W3C的公開和內部討論最終在1996年底推出CSS1，並使之成為標準被推薦，很快瀏覽器廠商也爭相在自家產品中實現以佔領市場。這中間也並非一帆風順，比如網景公司就提交了一種新語言JSSS來實現樣式，但最終並沒有被接受（這種開發標準之爭一直存在，包括後來的JavaScript，以及現在開發中的很多新技術都是這樣）。

CSS接過了HTML手中的樣式表現接力棒，也開始了自己的傳奇之旅。

本質
CSS的本質可以分為宏觀與微觀兩方面。
宏觀上它的存在就是為了控制頁面的顯示樣式。包括布局，顏色，字體等。微觀上則是實現這種控制功能的各種屬性的定義和工作原理。

了解定義就能幹活，知道原理才能把活干好。

題主說屬性太多，其實CSS就是去控制樣式而已，網頁樣式是借鑒於傳統的報紙等印刷品的排版。你隨便在身邊找一份報紙或者雜誌的一頁，用CSS儘可能的還原出來。整體布局還原出來問題應該不大，但是具體到細節的時候可能會有很多問題，比如出來的效果總是跟想的不一樣。這個時候就該去看看單個屬性的工作原理，比如margin是用來控制外邊距的但是用%的時候它是怎麼計算的最終值呢？當發現出乎意料的時候就去Index
查一下屬性的定義和值的計算方法。
常用基礎樣式：

Tips：

常用CSS屬性margin和padding的%取值是基於包含塊（離元素最近的塊級祖先元素）的寬,注意是寬。
行內元素相關的內容區、行內框、基線這幾個概念很重要。
inline-block是，內部被解析為塊級元素，自身被解析為行內元素。
background-image可以同時為一個元素設置多個背景圖配合background-position可以組合出神奇的效果。
浮動的元素會消除外邊距重合，浮動的元素會被解析為塊級元素。
top,right,bottom,left,z-index這些屬性只有用在定位元素(除了position為static值)上才有效。
overflow的值設置為scroll，在移動端可以做橫向滑動效果。
除了做表格不要用table布局。
選擇器都很簡單，只說一類。結構偽類選擇器，原理可以理解為先找到符合條件的元素後，向上找到其父元素然後驗證規則。

局限性
更新中...
番外篇

CSS推薦書寫順序（完整版）

CSS屬性推薦書寫順序

無他，但手熟爾。

【css常用屬性】

前面說了一點css基礎，相信看完後對CSS本身有一定的理解，這篇文章大概羅列出常用的CSS屬性，跟HTML常用的標籤差不多，基本是對這些屬性有一定的了解基本上CSS也算是入門了，本身CSS就是使用這些屬性對網頁內容的美化，所以認識CSS常用屬性是必要的！

我們也可以試著看一些css的基礎視頻，dw教程從基礎到入門這些資源你們自己可以利用一下

CSS字體屬性

字體大小：font-size: px/em/pt;（值使用數值即可）

字體樣式：font-style: oblique;(偏斜體) italic;(斜體) normal;(正常)

字體行高：line-height: normal;(正常) 單位：PX、PD、EM

字體粗細：font-weight: bold;(粗體) lighter;(細體) normal;(正常)

字體變體：font-variant: small-caps;(小型大寫字母) normal;(正常)

文字間距：letter-spacing: normal; 數值 pt/em/pt

文字對齊：text-align: justify;(兩端對齊) left;(左對齊) right;(右對齊) center;(居中)

文字縮進：text-indent: 數值 px;

詞間距：word-spacing: normal; 數值 px;

字體大小寫：text-transform: capitalize;(首字母大寫) uppercase;(大寫) lowercase;(小寫) none;(無)

字體修飾：text-decoration: underline;(下劃線) overline;(上劃線) line-through;(刪除線) blink;(閃爍)

字體：font-family:」Courier New」, Courier, monospace, 「Times New Roman」, Times, serif, Arial, Helvetica, sans-serif, Verdana