Web頁面切圖和CSS注意事項

一、Web頁面切圖

1) Web頁面的切圖型別可以歸納為背景（bg）、列表專案的符號（li）、內容中插入的圖片（pic）、按鈕（btn）、圖示等幾種形式（ico）。

2) 建議把用CSS背景載入的圖片拼合成一張圖片。這樣可減少對伺服器的請求。從而提升頁面載入速度。

3) 除頁面頭部大圖儲存格式為JPG外，其他圖片一律採用gif格式

二、CSS相關事項：

1) 所有的xhtml程式碼小寫。

2) 每個標籤都要有開始和結束，且要有正確的層次,沒有結束標籤的，標籤後加上"/"。 如：<img />、<br />

3) 所有的屬性必須用引號""括起來。

4) 文件型別必須宣告，禁止文件型別亂用。

5) 所有<和&特殊符號用編碼表示。

6) 必須正確使用程式碼縮排，縮排時使用tab(鍵盤中的TAB鍵)，禁止無縮排、亂縮排，禁止使用空格縮排。

7) CSS載入的背景圖片要預定義寬度和高度，路徑採用絕對路徑可以直接從訪問者計算機快取中載入，提高頁面載入速度。

8) 要儘可能做到表現與結構完全分離，程式碼中不涉及到表現元素，如style、font、bgColor、border、b。

9) <h1>到<h6>的定義，應遵循從大到小的原則，體現文件的結構，並有利於搜尋引擎的查詢。採用繼承方式，否則個性定義就會失效。

10) Font的縮寫為：樣式 粗細 大小 行高 字型 （font:italic bold 12px/30px “simsun”）。

11) class和id選擇器，id只能在同一頁面中不能重複適用。

12) 給頁面的佈局和重要的區塊加上註釋。如：<!—header -->

13) 給圖片加上alt標籤，利於搜尋引擎的查詢。

14) 所有的標籤必須進行合理的巢狀。

15) 頁面的實現過程中出現的問題是有規律的幾種：3個畫素的bug、雙倍浮動空白邊距、文字溢位bug。儘可能採用合理佈局可以避免不同瀏覽器下所產生的問題。css的hack應該儘量避免採用。

16) 儘可能的合理的去用繼承，好處是程式碼結構清晰，方便其他修改人員辨認頁面結構、減少css的程式碼的重複定義。

17) 網站上經常會出現使用者輸入一大段字元和字母以至於文字無法正常折行，把版式破壞，這樣我們就要參考以下樣式：word-wrap:break-word; overflow:hidden; 當然必須得有寬度屬性值。

18) 文字過長要出現省略號樣式如下：

white-space: nowrap; text-overflow:ellipsis; overflow:hidden;

19) 一個完整的表單應該包括：

<fieldset>
<legend></legend>
<label></label>
<input />
</fieldset>

20) 頁面上的列表元素除了ul ol外，我們還可以採用dl dt dd組合。

21) 合理採用多重樣式定義可以有效的增加樣式的重用性。

22) 我們要清楚那些標籤是塊狀元素和內聯元素。一般我們可以把css元素分為block（塊狀）和inline（內聯）。熟悉這些元素屬性有利於我們深入理解css。

23) 按照推薦Css屬性書寫順序：

顯示屬性：

display || visibility
list-style : list-style-type || list-style-position || list-style-image
position
top || right || bottom || left
z-index
clear
float

自身屬性：   

width
max-width || min-width
height
max-height || min-height
overflow || clip
margin : margin-top || margin-right || margin-bottom || margin-left
padding : padding-top || padding-right || padding-bottom || padding-left
outline : outline-color || outline-style || outline-width
border
background : background-color || background-image || background-repeat || background-attachment || background-position

文字屬性：

color
font : font-style || font-variant || font-weight || font-size || line-height || font-family
font : caption | icon | menu | message-box | small-caption | status-bar
text-overflow
text-align
text-indent
line-height
white-space
vertical-align
cursor