一、規則說明

1）、所有的命名最好採用一種命名規範，比方全部小寫或者駝峰命名

2）、屬性的值一定要用雙引號（“”）括起來，且一定要有值，例如class=“web”，id=“web”

3）、每個標籤都要有開始和結束，且要有正確的層次，排版有規律工整

4）、表現與結構一定分離，程式碼中不涉及任何的表現元素，如style、font、bgColor、border等

5）、

到

的定義，應遵循從大到小的原則，體現文件的結構，並有利於搜尋引擎的查詢。

6）、給每一個表格和表單加上一個唯一的、結構標記id，給圖片加上alt標籤

7）、儘量使用英文命名原則，儘量不縮寫，除非一看就明白的單詞

二、CSS命名規則參考表

CSS樣式命名

說明

#wrapper

頁面外圍控制整體佈局寬度

#container或#content

容器，用於最外層

#layout

佈局

#head， #header

頁頭部分

#foot， #footer

頁尾部分

#nav

主導航

#subnav

二級導航

#menu

選單

#submenu

子選單

#sideBar

側欄

#sidebar_a， #sidebar_b

左邊欄或右邊欄

#main

頁面主體

#tag

標籤

#msg #message

提示資訊

#tips

小技巧

#vote

投票

#friendlink

友情連線

#title

標題

#summary

摘要

#loginbar

登入條

#searchInput

搜尋輸入框

#hot

熱門熱點

#search

搜尋

#search_output

搜尋輸出和搜尋結果相似

#searchBar

搜尋條

#search_results

搜尋結果

#copyright

版權資訊

#branding

商標

#logo

網站LOGO標誌

#siteinfo

網站資訊

#siteinfoLegal

法律宣告

#siteinfoCredits

信譽

#joinus

加入我們

#partner

合作伙伴

#service

服務

#regsiter

註冊

arr/arrow

箭頭

#guild

指南

#sitemap

網站地圖

#list

列表

#homepage

首頁

#subpage

二級頁面子頁面

#tool， #toolbar

工具條

#drop

下拉

#dorpmenu

下拉選單

#status

狀態

#scroll

滾動

。tab

標籤頁

。left 。right 。center

居左、中、右

。news

新聞

。download

下載

。banner

廣告條（頂部廣告條）

。products

產品

。products_prices

產品價格

。products_description

產品描述

。products_review

產品評論

。editor_review

編輯評論

。news_release

最新產品

。publisher

生產商

。screenshot

縮圖

。faqs

常見問題

。keyword

關鍵詞

。blog

部落格

。forum

論壇

CSS檔案命名

說明

master。css，style。css

主要的

module。css

模組

base。css

基本共用

layout。css

佈局，版面

themes。css

主題

columns。css

專欄

font。css

文字、字型

forms。css

表單

mend。css

補丁

print。css

列印

三、藉助翻譯工具

如果遇到不常用的一些名稱，可以藉助翻譯工具進行翻譯取其英文命名。平時我用的比較多的就是有道翻譯或者谷歌線上翻譯。

谷歌線上翻譯：

http：//

translate。google。cn/

有道線上翻譯：

http：//

fanyi。youdao。com/

我們為了規範命名最好使用英文命名，通常命名與自己佈局內容相符。

四、常用CSS程式碼

css的屬性雖然很多，但是我們經常使用的屬性，真的不多的，這個也是我自己之前收集整理的一些CSS常用屬性程式碼，希望可以幫助到一些新人，對於老司機就忽略吧。

字型屬性：(font)

大小 {font-size： x-large；}（特大） xx-small；（極小） 一般中文用不到，只要用數值就可以，單位：PX、PD

樣式 {font-style： oblique；}（偏斜體） italic；（斜體） normal；（正常）

行高 {line-height： normal；}（正常） 單位：PX、PD、EM

粗細 {font-weight： bold；}（粗體） lighter；（細體） normal；（正常）

變體 {font-variant： small-caps；}（小型大寫字母） normal；（正常）

大小寫 {text-transform： capitalize；}（首字母大寫） uppercase；（大寫） lowercase；（小寫） none；（無）

修飾 {text-decoration： underline；}（下劃線） overline；（上劃線） line-through；（刪除線） blink；（閃爍）

常用字型：（font-family）

“Courier New”， Courier， monospace， “Times New Roman”， Times， serif， Arial， Helvetica， sans-serif， Verdana

背景屬性：(background)

色彩 {background-color： #FFFFFF；}

圖片 {background-image： url（）；}

重複 {background-repeat： no-repeat；}

滾動 {background-attachment： fixed；}（固定） scroll；（滾動）

位置 {background-position： left；}（水平） top（垂直）；

簡寫方法 {background：#000 url（。。） repeat fixed left top；} /*簡寫·這個在閱讀程式碼中經常出現，要認真的研究*/

區塊屬性：（Block） /*這個屬性第一次認識，要多多研究*/

字間距 {letter-spacing： normal；} 數值 /*這個屬性似乎有用，多實踐下*/

對齊 {text-align： justify；}（兩端對齊） left；（左對齊） right；（右對齊） center；（居中）

縮排 {text-indent： 數值px；}

垂直對齊 {vertical-align： baseline；}（基線） sub；（下標） super；（下標） top； text-top； middle； bottom； text-bottom；

詞間距word-spacing： normal； 數值

空格white-space： pre；（保留） nowrap；（不換行）

顯示 {display：block；}（塊） inline；（內嵌） list-item；（列表項） run-in；（追加部分） compact；（緊湊） marker；（標記） table； inline-table； table-raw-group； table-header-group； table-footer-group； table-raw； table-column-group； table-column； table-cell； table-caption；（表格標題） /*display 屬性的瞭解很模糊*/

方框屬性：(Box)

width：； height：； float：； clear：both； margin：； padding：；

順序：上右下左

邊框屬性：（Border）

border-style： dotted；（點線） dashed；（虛線） solid（實線）； double；（雙線） groove；（槽線） ridge；（脊狀） inset；（凹陷） outset；

border-width：； 邊框寬度

border-color：#；

簡寫方法border：width style color； /*簡寫*/

列表屬性：（List-style）

型別list-style-type： disc；（圓點） circle；（圓圈） square；（方塊） decimal；（數字） lower-roman；（小羅碼數字） upper-roman； lower-alpha； upper-alpha；

位置list-style-position： outside；（外） inside；

影象list-style-image： url（。。）；

定位屬性：（Position）

Position： absolute； relative； static；

visibility： inherit； visible； hidden；

overflow： visible； hidden； scroll； auto；

clip： rect（12px，auto，12px，auto） （裁切）

CSS文字屬性

color ： #999999； /*文字顏色*/

font-family ： 宋體，sans-serif； /*文字字型*/

font-size ： 9pt； /*文字大小*/

font-style：itelic； /*文字斜體*/

font-variant：small-caps； /*小字型*/

letter-spacing ： 1pt； /*字間距離*/

line-height ： 200%； /*設定行高*/

font-weight：bold； /*文字粗體*/

vertical-align：sub； /*下標字*/

vertical-align：super； /*上標字*/

text-decoration：line-through； /*加刪除線*/

text-decoration： overline； /*加頂線*/

text-decoration：underline； /*加下劃線*/

text-decoration：none； /*刪除連結下劃線*/

text-transform ： capitalize； /*首字大寫*/

text-transform ： uppercase； /*英文大寫*/

text-transform ： lowercase； /*英文小寫*/

text-align：right； /*文字右對齊*/

text-align：left； /*文字左對齊*/

text-align：center； /*文字居中對齊*/

text-align：justify； /*文字分散對齊*/

vertical-align屬性

vertical-align：top； /*垂直向上對齊*/

vertical-align：bottom； /*垂直向下對齊*/

vertical-align：middle； /*垂直居中對齊*/

vertical-align：text-top； /*文字垂直向上對齊*/

vertical-align：text-bottom； /*文字垂直向下對齊*/

邊框空白

padding-top：10px； /*上邊框留空白*/

padding-right：10px； /*右邊框留空白*/

padding-bottom：10px； /*下邊框留空白*/

padding-left：10px； /*左邊框留空白

符號屬性

list-style-type：none； /*不編號*/

list-style-type：decimal； /*阿拉伯數字*/

list-style-type：lower-roman； /*小寫羅馬數字*/

list-style-type：upper-roman； /*大寫羅馬數字*/

list-style-type：lower-alpha； /*小寫英文字母*/

list-style-type：upper-alpha； /*大寫英文字母*/

list-style-type：disc； /*實心圓形符號*/

list-style-type：circle； /*空心圓形符號*/

list-style-type：square； /*實心方形符號*/

list-style-image：url（/dot。gif）； /*圖片式符號*/

list-style-position： outside； /*凸排*/

list-style-position：inside； /*縮排*/

背景樣式

background-color：#F5E2EC； /*背景顏色*/

background：transparent； /*透視背景*/

background-image ： url（/image/bg。gif）； /*背景圖片*/

background-attachment ： fixed； /*浮水印固定背景*/

background-repeat ： repeat； /*重複排列-網頁預設*/

background-repeat ： no-repeat； /*不重複排列*/

background-repeat ： repeat-x； /*在x軸重複排列*/

background-repeat ： repeat-y； /*在y軸重複排列*/

指定背景位置

background-position ： 90% 90%； /*背景圖片x與y軸的位置*/

background-position ： top； /*向上對齊*/

background-position ： buttom； /*向下對齊*/

background-position ： left； /*向左對齊*/

background-position ： right； /*向右對齊*/

background-position ： center； /*居中對齊*/

連線屬性

a /*所有超連結*/

a：link /*超連結文字格式*/

a：visited /*瀏覽過的連結文字格式*/

a：active /*按下連結的格式*/

a：hover /*滑鼠轉到連結*/

滑鼠游標樣式

連結手指 CURSOR： hand

十字型 cursor：crosshair

箭頭朝下 cursor：s-resize

十字箭頭 cursor：move

箭頭朝右 cursor：move

加一問號 cursor：help

箭頭朝左 cursor：w-resize

箭頭朝上 cursor：n-resize

箭頭朝右上 cursor：ne-resize

箭頭朝左上 cursor：nw-resize

文字I型 cursor：text

箭頭斜右下 cursor：se-resize

箭頭斜左下 cursor：sw-resize

漏斗 cursor：wait

游標圖案（IE6） p {cursor：url（“游標檔名。cur”），text；}

CSS框線一覽表：

border-top ： 1px solid #6699cc； /*上框線*/

border-bottom ： 1px solid #6699cc； /*下框線*/

border-left ： 1px solid #6699cc； /*左框線*/

border-right ： 1px solid #6699cc； /*右框線*/

以上是建議書寫方式，但也可以使用常規的方式 如下：

border-top-color ： #369 /*設定上框線top顏色*/

border-top-width ：1px /*設定上框線top寬度*/

border-top-style ： solid/*設定上框線top樣式*/

其他框線樣式

solid /*實線框*/

dotted /*虛線框*/

double /*雙線框*/

groove /*立體內凸框*/

ridge /*立體浮雕框*/

inset /*凹框*/

outset /*凸框*/

CSS邊界樣式

margin-top：10px； /*上邊界*/

margin-right：10px； /*右邊界值*/

margin-bottom：10px； /*下邊界值*/

margin-left：10px； /*左邊界值*/

字型樣式(Font Style)

字型樣式 {font：font-style font-variant font-weight font-size font-family}

字型型別 {font-family：“字型1”，“字型2”，“字型3”，。。。}

字型大小 {font-size：數值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}

字型風格 {font-style：inherit|italic|normal|oblique}

字型粗細 {font-weight：100-900|bold（粗體）|bolder（特粗）|lighter（細體）|normal（正常）；}

字型顏色 {color：數值；}

陰影顏色 {text-shadow：16位色值}

字型行高 {line-height：數值|inherit|normal；}

字 間 距 {letter-spacing：數值|inherit|normal}

單詞間距 {word-spacing：數值|inherit|normal}

字型變形 {font-variant：inherit|normal|small-cps }

英文轉換 {text-transform：inherit|none|capitalize|uppercase|lowercase}

字型變形 {font-size-adjust：inherit|none}

字型 {font-stretch：condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}

文字樣式(Text Style)

行 間 距 {line-height：數值|inherit|normal；}

文字修飾 {text-decoration：inherit|none|underline|overline|line-through|blink}

段首空格 {text-indent：數值|inherit}

水平對齊 {text-align：left|right|center|justify}

垂直對齊 {vertical-align：inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}

書寫方式 {writing-mode：lr-tb|tb-rl}

背景樣式

背景顏色 {background-color：數值}

背景圖片 {background-image： url（URL）|none}

背景重複 {background-repeat：inherit|no-repeat|repeat|repeat-x|repeat-y}

背景固定 {background-attachment：fixed|scroll}

背景定位 {background-position：數值|top|bottom|left|right|center}

背影樣式 {background：背景顏色|背景圖象|背景重複|背景附件|背景位置}

框架樣式(Box Style)

邊界留白： {margin：margin-top margin-right margin-bottom margin-left}

補 白： {padding：padding-top padding-right padding-bottom padding-left}

邊框寬度： {border-width：border-top-width border-right-width border-bottom-width border-left-width}

寬度值：thin|medium|thick|數值

邊框顏色： {border-color：數值 數值 數值 數值} 數值：分別代表top、right、bottom、left顏色值

邊框風格：

{border-style：none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove} 邊 框 {border：border-width border-style color}

上 邊 框 {border-top：border-top-width border-style color}

右 邊 框 {border-right：border-right-width border-style color}

下 邊 框 {border-bottom：border-bottom-width border-style color}

左 邊 框 {border-left：border-left-width border-style color}

寬 度 {width：長度|百分比| auto}

高 度 {height：數值|auto}

漂 浮 {float：left|right|none}

清 除 {clear：none|left|right|both}

分類列表

控制顯示 {display：none|block|inline|list-item}

控制空白 {white-space：normal|pre|nowarp}

符號列表 {list-style-type：disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}

圖形列表 {list-style-image：URL}

位置列表 {list-style-position：inside|outside}

目錄列表 {list-style：目錄樣式型別|目錄樣式位置|url}

滑鼠形狀 {cursor：hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}