1. 首先在如何寫CSS之前，要先了解頁面的整個布局結構，例如：主頁面內容、站點導航(主菜單)、子菜單、搜索框、功能區、頁腳，清楚了頁面的結構，才能更好的去設計CSS樣式。

2. 樣式表優先級：外部<內部<內聯。有個例外的情況，就是如果外部樣式放在內部樣式的后面，則外部樣式將覆蓋內部樣式。

3. 在編寫樣式表之前一定要注意CSS文檔的編碼類型一定要和HTML文檔的字符集類型一致。

4. 網站一般采取HTML結構與樣式分離的純CSS布局形式，所以采取外部樣式表導入的方法。樣式表按區塊分為幾個不同的CSS文件，是為了使結構更加清晰，也是為了站點的訪問及維護更加容易。

5. 先定義全局的CSS文件來定義例如body，a，p，form，input這些標簽統一的規則，具體的還可以把文字，邊框，鏈接，寬高都具體定義多個樣式、。之后再定義各個部分的樣式創建各自的CSS文件。

6. 選擇器的優先級：標簽（HTML標簽，如：a{...}）<類（以"."開頭，class="top"，如：top{...}）<Id（以“#”開頭，id="ppp"，如：#ppp{...}）。

注意在同一組屬性設置中標有“!important”規則的優先級最大。

7. 群選擇器：定義多個標簽的樣式規則(標簽間用逗號隔開)。 例如：p,form,ul,li{...;...;...;}；

8. 派生選擇器：給一個元素里的子元素定義樣式。

　　①用不同規則定義不同內容塊的樣式， 例如：#globalnav a:link或者 #subnav a:link或者#content a:link

　　②用不同規則定義相同元素的不同樣式， 例如：#content p和#footer p分別定義#content和#footer中p的樣式

1. float: none || left || right;

在層布局中經常用到的一個屬性，可以left/right浮動任何元素:圖片、段落、div、標題、表格、列表等等，使用float屬性，必須給這個浮動元素定義一個寬度。

2. clear：none || left || right || both;

不允許有浮動元素，有時可以利用clear:both;來解決浮動超出的問題達到布局效果。

3. display: block || none || inline;

設置或檢索對象是否及如何顯示， block:默認值，顯示； none:層內容不可見，不保留層所占據的物理空間； inline:層內容不可見，但保留層所占據的物理空間。 visibility: inherit || visible || hidden;設置或檢索是否顯示對象。 inherit:默認值，繼承父對象的可見性； visible:對象可視，hidden:對象隱藏。 與 display 屬性不同，此屬性為隱藏的對象保留其占據的物理空間。

4. border : border-width || border-style || border-color;

設置對象的邊框樣式。 當你指定了邊框顏色( border-color )和邊框寬度( border-widtd )時，你必須同時指定邊框樣式( border-style )，否則邊框不會被呈現。
border-width : medium | thin | thick | length；設置對象邊框的寬度。
border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset；設置對象邊框的樣式。
border-color : color；設置對象邊框的顏色。
border-collapse: collapse;可以使表格無邊框。

5. magin x x x x(檢索或設置對象四邊的外補丁); padding x x x x(檢索或設置對象四邊的內補丁);

如果提供全部(x x x x)四個參數值，將按順時針的順序作用于四邊。
如果只提供一個，將用于全部的四邊。
如果提供兩個，第一個用于上下，第二個用于左右。
如果提供三個，第一個用于上，第二個用于左右，第三個用于下。
也可以單方向進行設置： magin-top/-right/-bottom/-left； padding-top/-right/-bottom/-left。

6. list-style-type : none;

可以設定ul/ol列表的li為無樣式顯示，通常與div相結合可實現表格的布局形式。

7. overflow: hidden;

不使用滾動條，也不顯示超過對象范圍的內容，有時要對層或者層里的對象進行clear的時候，也可以用。 還有overflow-x和overflow-y，他們可以分別設置x或y軸方向的滾動條。

8. text-decoration: none || underline || blink || overline || line-through;

設置對象中的文本的裝飾。 none:無裝飾;underline:下劃線;blink:閃爍;overline:上劃線;line-through:貫穿線。

9. a:link、a:visited、a:hover、a:active

CSS中用四個偽類來定義鏈接的樣式。
a:link{ text-decoration:none; color:#c00;}鏈接未訪問原來的樣式
a:visited { text-decoration:none; color:#c30;} 鏈接已被訪問的樣式
a:hover { text-decoration:underline; color:#f60;} 鼠標懸停在鏈接上的樣式
a:active { text-decoration:none; color:#F90;} 在被用戶激活(在鼠標點擊與釋放之間發生的事件)時的樣式。

10. background: background-color | background-image | background-repeat | background-attachment | background-position;

使用該復合屬性定義其單個參數，則其他參數的默認值將無條件覆蓋各自對應的單個屬性設置。
background-color: transparent | color；設置對象的背景顏色。
background-image: none | url ( url )；設置對象的背景圖像。
background-repeat: repeat | no-repeat | repeat-x | repeat-y；設置對象的背景圖像是否及如何鋪排。
background-attachment: scroll | fixed；設置對象的背景圖像是隨對象內容滾動還是固定的。
background-position:x y;設置對象的背景圖像的位置，注意，x是圖片相對于層x軸方向的位置，y是圖片相對于層y軸方向的位置，x、y如果他們的值是具體的像素值或百分比，那就是他們相對于層的間距；
如果值是x( left | center | right) y(top | center | bottom)這種方位,就是他們相對于層的定位。

11. text-align: left || right || center || justify(兩端對齊);

設置或檢索對象中文本的水平方向的對齊方式。 vertical-align: baseline || sub(對齊文本下標) || super(對齊文本上標) || top || text-top || middle || bottom || text-bottom，設置或檢索對象內容的垂直對其方式。 baseline:默認值，對象內容與基線對齊； 注意：baseline、top、text-top、middle、bottom、text-bottom，這些值的參數對象必須支持valign 的特性，這幾個值才有效果。

12. position : static || absolute || relative;

static: 默認值。無特殊定位，對象遵循HTML定位規則；
absolute: 絕對定位，將對象從文檔流中拖出，使用 left ， right ， top ， bottom 等屬性相對于其最接近的一個最有定位設置的父對象進行絕對定位。如果不存在這樣的父對象，則依據 body 對象。而其層疊通過 z-index 屬性定義 relative: 相對定位，對象不可層疊，但將依據 left ， right ， top ， bottom 等屬性在正常文檔流中偏移位置

1. 樣式的命名規范：全部小寫，類選擇器和ID選擇器的命名可以為了表明語義采用Camel命名法。另外要盡量使用縮寫形式，不僅可以減少CSS文件的大小，而且更加容易閱讀

2. 只有兩個例外情況可以不定義單位：行高和0值。除此以外，其他值都必須緊跟單位，而且一定不要在數值和單位之間加空格。

3. 為了避免層布局受到最大化和最小化的影響，都采用固定寬高規則。(可根據情況靈活運用)

4. 在一個標簽定義多個類樣式時，注意用空格隔開，要盡量避免重復的樣式。

5. 調試布局時，通常在出問題的層上定義一個背景顏色，這樣就能很明顯看到層占據多大空間。而不要用邊框，例如”border:solid 1px;”，如果是添加邊框的方法會增加元素的尺寸并破壞橫/縱向margin的值，所以使用background更加清晰合理。