1、善用css縮寫可以減少頁面文件大小，提高下載速度，同時(shí)使代碼簡潔可讀。
如：

可以寫為


再如：


可以改寫為：


(詳細(xì)請參考：css2參考手冊、常用css縮寫總結(jié))

2、可以同時(shí)為一個(gè)html元素的class屬性設(shè)定多個(gè)規(guī)則(多重class定義)。
通常我們寫法為：<p class=”a”></p>
實(shí)際上我們可以為p元素指定多個(gè)規(guī)則，如：


注意：多個(gè)規(guī)則之間用空格分開。

3、明確定義單位，除非值為0
忘記定義尺寸是css初學(xué)者新手普遍存在的問題。在html我們可以寫width=”100”，但在css中應(yīng)該給出一個(gè)準(zhǔn)確的單位。如：width:100px;height:50px;font-size:9pt ，0值除外，因?yàn)椴徽搶τ谌魏螁挝弧?值的大小都是相等的。

注意：不要在數(shù)值和單位之間加空格。

4、區(qū)分大小寫
在xhtml中，css定義的元素名稱是區(qū)分大小寫的，class和id的值在html和xhtml中也是區(qū)分大小寫的，所以為了避免錯(cuò)誤，推薦一律使用小寫。
如#aaa,與#AAA是不同的，在xhtml中，p和P也是不同的.他們之間不會(huì)覆蓋。
如果在css中定義了#aaa，在html元素中使用AAA來應(yīng)用將不能得到#aaa中定義的樣式。
示例代碼：


5、CSS的最近優(yōu)先原則
如果對一個(gè)元素定義了多次樣式，則以最近的一級優(yōu)先，最近一級的樣式將覆蓋其他的樣式定義。
如：


注意：
（1）注意樣式的幾個(gè)優(yōu)先順序(優(yōu)先級由上至下遞減)：
–元素style設(shè)定
–head區(qū)<style></style>中的設(shè)定
–外部引用css文件
（2）優(yōu)先級不是按訪問順序來設(shè)定的，而是又css中的聲明順序來設(shè)定的。
如上例中<p class=”yellow blue”>此處顯示為黃色</p>也顯示為黃色，因?yàn)樵赾ss定義中.yellow在.blue的后面。

6、使用子選擇器減少id和class的定義
例如：


可以更改為：


7、不要給背景圖片路徑加引號
將background:url(“xxx.gif”)改為background:url(xxx.gif)
因?yàn)閷τ诓糠譃g覽器加引號反而會(huì)引起錯(cuò)誤。

8、背景圖片的路徑是相對與當(dāng)前css頁面的路徑。

例如：
有如下目錄結(jié)構(gòu)
|–images
   |–xxx.gif
|–css
   |–xx.css
|–index.html
代碼內(nèi)容
index.html引用xx.css文件。<link rel=”stylesheet” href=”css/xx.css” />
xx.css要引用xxx.gif圖片其寫法為：background:url(../images/xxx.gif)

9、使用組選擇器為不同元素應(yīng)用相同的樣式
如h1,h2,h3,div{font-size:16px;font-weight:bold}
則h1,h2,h3,div元素的樣式都為字體16像素，字體粗體

10、書寫正確的鏈接樣式
當(dāng)用css定義鏈接的各種狀態(tài)時(shí)，一定要注意其書寫順序，即：:link :visited :hover :active。
如果不按照該順序書寫可能無法達(dá)到自己希望的效果。為了記憶該順序我們抽取每個(gè)單詞的首字母：L V H A，你可以通過記憶LoVe,Hate,兩個(gè)單詞來記住其順序。

11、禁止內(nèi)容換行與強(qiáng)制內(nèi)容換行
在表格或?qū)又形覀兛赡芟Ｍ麅?nèi)容不換行或強(qiáng)制換行，我們可以通過一些css屬性來達(dá)到這些要求。
禁止換行：white-space:nowrap
強(qiáng)制換行：word-wrap: break-word; word-break: normal;

12、區(qū)別relative和absolute
Absolute，CSS中的寫法是：position:absolute; 他的意思是絕對定位，他是參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進(jìn)行定位，在沒有設(shè)定TRBL，默認(rèn)依據(jù)父級的做標(biāo)原始點(diǎn)為原始點(diǎn)。如果設(shè)定TRBL并且父級沒有設(shè)定position屬性，那么當(dāng)前的absolute則以瀏覽器左上角為原始點(diǎn)進(jìn)行定位，位置將由TRBL決定。

Relative，CSS中的寫法是：position:relative;  他的意思是絕對相對定位，他是參照父級的原始點(diǎn)為原始點(diǎn)，無父級則以BODY的原始點(diǎn)為原始點(diǎn)，配合TRBL進(jìn)行定位，當(dāng)父級內(nèi)有padding等CSS屬性時(shí)，當(dāng)前級的原始點(diǎn)則參照父級內(nèi)容區(qū)的原始點(diǎn)進(jìn)行定位。

13、區(qū)別div和span
div是一個(gè)塊級元素，可以包含段落，表格等內(nèi)容，用于放置不同的內(nèi)容。一般我們在網(wǎng)頁通過div來布局定位網(wǎng)頁中的每個(gè)區(qū)塊。
span是一個(gè)內(nèi)聯(lián)元素，沒有實(shí)際意義，它的存在純粹是為了應(yīng)用樣式，給一段內(nèi)容加上<span></span>標(biāo)記可以通過在span上定義樣式來設(shè)定其內(nèi)容的樣式。

14、區(qū)別display和visibility
display:none和visibility:hidden都可以隱藏一個(gè)元素
但visibility:hidden只是隱藏了元素的內(nèi)容，但其使用的位置空間仍然被保留。
而display:none則相當(dāng)把元素從頁面中去除，其占用位置也將被刪除。