1.善用css縮寫可以減少頁面文件大小，提高下載速度，同時使代碼簡潔可讀。
p{border:1px solid #cccccc}
/*注意上、右、下、左的書寫順序*/
div{margin:10px 20px 30px 40px}
/*注意，數值與單位不能有空格，每個值之間用空格隔開*/
2.可以同時爲一個html元素的class屬性設定多個規則(多重class定義)。
CSS：
.a{…}
.b{….}
HTML：
<p class="a b">該元素同時包括a和b中設定的樣式</p>
3.明確定義單位，除非值爲0 注意：不要在數值和單位之間加空格。
4.區分大小寫
5.CSS的最近優先原則
注意：
（1）注意樣式的幾個優先順序(優先級由上至下遞減)：
--元素style設定
--head區<style></style>中的設定
--外部引用css文件
（2）優先級不是按訪問順序來設定的，而是按css中的聲明順序來設定的。
如上例中<p class="yellow blue">此處顯示爲黃色</p>也顯示爲黃色，
因爲在css定義中.yellow在.blue的後面。
6.使用子選擇器減少id和class的定義
#contain{..}
#contain ul{...}
.contain ul li{...}
<div id="contain">
<ul>
<li></li>
<li></li>
</ul>
</div>
7.不要給背景圖片路徑加引號
將background:url("xxx.gif")改爲background:url(xxx.gif)
因爲對於部分瀏覽器加引號反而會引起錯誤。
8、背景圖片的路徑是相對與當前css頁面的路徑。
例如：
有如下目錄結構
|--images
|--xxx.gif
|--css
|--xx.css
|--index.html
代碼內容
index.html引用xx.css文件。
<link rel="stylesheet" href="css/xx.css" />
xx.css要引用xxx.gif圖片其寫法爲：
background:url(../images/xxx.gif)
9.使用組選擇器爲不同元素應用相同的樣式
如h1,h2,h3,div{font-size:16px;font-weight:bold}
10.書寫正確的鏈接樣式
當用css定義鏈接的各種狀態時，一定要注意其書寫順序，
即：:link :visited :hover :active。
如果不按照該順序書寫可能無法達到自己希望的效果。爲了
記憶該順序我們抽取每個單詞的首字母：L V H A，你可以
通過記憶LoVe,Hate,兩個單詞來記住其順序。
11.禁止內容換行與強制內容換行
在表格或層中我們可能希望內容不換行或強制換行，我們可以
通過一些css屬性來達到這些要求。
禁止換行：white-space:nowrap
強制換行：word-wrap: break-word; word-break: normal;
12.區別relative和absolute
Absolute，CSS中的寫法是：position:absolute; 他的意思是
絕對定位，他是參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、
LEFT(下面簡稱TRBL)進行定位，在沒有設定TRBL，默認依據父
級的做標原始點爲原始點。如果設定TRBL並且父級沒有設定
position屬性，那麼當前的absolute則以瀏覽器左上角爲原始
點進行定位，位置將由TRBL決定。
Relative，CSS中的寫法是：position:relative; 他的意思是
絕對相對定位，他是參照父級的原始點爲原始點，無父級則以
BODY的原始點爲原始點，配合TRBL進行定位，當父級內有padding
等CSS屬性時，當前級的原始點則參照父級內容區的原始點進行定位。
13.區別div和span
div是一個塊級元素，可以包含段落，表格等內容，用於放置不同的內
容。一般我們在網頁通過div來佈局定位網頁中的每個區塊。
span是一個內聯元素，沒有實際意義，它的存在純粹是爲了應用樣式，
給一段內容加上<span></span>標記可以通過在span上定義樣式來設定
其內容的樣式。
14.區別display和visibility
display:none和visibility:hidden都可以隱藏一個元素
但visibility:hidden只是隱藏了元素的內容，但其使用的位置空間仍然
被保留。而display:none則相當把元素從頁面中去除，其佔用位置也將
被刪除。