1.善用css縮寫可以減少頁面檔案大小，提高下載速度，同時使程式碼簡潔可讀。
如：
div{
border-top:1px solid #cccccc;
border-left:1px solid #cccccc;
border-right:1px soli #cccccc;
border-bottom:1px solid #cccccc;
}
可以寫成
p{border:1px solid #cccccc}
再如：
div{
margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:40px;
}
可以改寫為：
/*注意上、右、下、左的書寫順序*/
div{margin:10px 20px 30px 40px}
/*注意，數值與單位不能有空格，每個值之間用空格隔開*/
(詳細請參考：css2參考手冊、常用css縮寫總結)
2、可以同時為一個html元素的class屬性設定多個規則(多重class定義)。
通常我們寫法為：
實際上我們可以為p元素指定多個規則，如：
CSS：
.a{…}
.b{….}
HTML：
此元素同時包含a和b中設定的樣式
注意：多個規則之間用空格分開。
3、明確定義單位，除非值為0
忘記定義尺寸是css初學者新手普遍存在的問題。在html我們可以寫width=”100”，但在css中應該給出一個準確的單位。如：width:100px;height:50px;font-size:9pt ，0值除外，因為不論任何單位。 0值的大小都是相等的。
注意：不要在數值和單位之間加空格。
4.區分大小寫在xhtml中，css定義的元素名稱是區分大小寫的，class和id的值在html和xhtml中也是區分大小寫的，所以為了避免錯誤，建議一律使用小寫。
如#aaa,與#AAA是不同的，在xhtml中，p和P也是不同的.他們之間不會覆蓋。
如果在css中定義了#aaa，在html元素中使用AAA來應用將無法得到#aaa中定義的樣式。
範例程式碼：
CSS:
#aaa{border:1px solid #ccc}
HTML:
顯示不出來1個像素的邊線
5、CSS的最近優先原則如果對一個元素定義了多次樣式，則以最近的一級優先，最近一級的樣式將覆蓋其他的樣式定義。
如：
CSS:
p{color:red}
.blue{color:blue}
.yellow{color:yellow}
HTML:
此處顯示為紅色
此處顯示為藍色
此處顯示為綠色
此處顯示為黃色
注意：
（1）注意樣式的幾個優先順序(優先順序從上到下遞減)：
--元素style設定
--head區中的設定
--外部引用css檔案（2）優先權不是依照存取順序來設定的，而是又css中的宣告順序來設定的。
如上例中此處顯示為黃色
也顯示為黃色，因為在css定義中.yellow在.blue的後面。
6.使用子選擇器減少id和class的定義例如：
#contain{..}
#contain_ul{...}
.contail_li{...}
可以改為：
#contain{..}
#contain ul{...}
.contain ul li{...}
7、不要給背景圖片路徑加引號將background:url("xxx.gif")改為background:url(xxx.gif)
因為部分瀏覽器加引號反而會造成錯誤。
8.背景圖片的路徑是相對與目前css頁面的路徑。
例如：
有如下目錄結構--images
--xxx.gif
--css
--xx.css
--index.html
程式碼內容
index.html引用xx.css文件。
xx.css要引用xxx.gif圖片其寫法為：background:url(../images/xxx.gif)
9.使用群組選擇器為不同元素套用相同的樣式如h1,h2,h3,div{font- size:16px;font-weight:bold}
則h1,h2,h3,div元素的樣式都為字體16像素，字體粗體
10、書寫正確的連結樣式當用css定義連結的各種狀態時，一定要注意其書寫順序，即：:link : visited :hover :active。
如果不按照該順序書寫可能無法達到自己希望的效果。為了記憶該順序我們抽取每個單字的首字母：LVHA，你可以透過記憶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上定義樣式來設定其內容的樣式。
14.區別display和visibility
display:none和visibility:hidden都可以隱藏一個元素但visibility:hidden只是隱藏了元素的內容，但其使用的位置空間仍然被保留。
而display:none則相當把元素從頁面中移除，其佔用位置也會被刪除。