一、 基本書寫規(guī)范
1、所有的CSS的盡量采用外部調用
<LINK href="/style/style.css" rel="stylesheet" type="text/css">
書寫時重定義的最先，偽類其次，自定義最后（其中a:link a:visited a:hover a:actived 要按照順序寫）便于自己和他人閱讀。
為了保證不同瀏覽器上字號保持一致，字號建議用點數pt和像素px來定義，pt一般使用中文宋體的9pt和11pt，px一般使用中文宋體12pt 和14.7px 這是經過優(yōu)化的字號，黑體字或者宋體字加粗時，一般選用11pt和14.7px 的字號比較合適。
2、CSS推薦模板:
<style type="text/css">
<!—
body { font-size:9pt; font-family:Arial, Helvetica, sans-serif; color:#333333; text-align:center; margin:0px;}
ul { margin:auto; }
img { border:0px; }
a { font-size:9pt; text-decoration:none;color:#FFFFFF; }
a:hover { font-size:9pt; text-decoration:underline; color:#990000; }
a.1 { font-size: 9pt; color: #3366cc; text-decoration: none}
a.1:hover { font-size: 9pt; color: #FF9900; text-decoration: none}
.colorblue,colorblue:hover { color:#003366 ;}
.blue { font-family: "宋體"; font-size: 9pt; line-height: 20px; color: #0099FF; letter-spacing: 5em}
.colorRed,a.colorRed:hover{ color: #FF0000; }
.colorLime,a.colorLime:hover{ color: #00FF00; }
.colorGreen,a.colorGreen:hover{ color: #008000; }
.colorBlue,a.colorBlue:hover{ color: #0000FF; }
.colorOrange,a.colorOrange:hover{ color: #FFA500; }
-->
</style>
為了保證瀏覽器的兼容性，必須設置頁面背景<body bgcolor="#FFFFFF">
3、其中注釋寫法，例：/*header begin!*/
二、CSS命名參考
1、常用的CSS命名規(guī)則：
頭：header
內容：content/container
尾：footer
導航：nav
側欄：sidebar
欄目：column
2、直觀命名
當在設計Web頁面以及需要對一個div進行標識的時候，最自然的想法就是使用可以描述元素所在頁面位置的詞匯來對其命名。這種方法使得類以及id的名稱如下面所示：
自上而下小組：top-panel
橫向：horizontal-nav
左面：left-side
中心-欄目：center-column
右面：right-col
這些是CSS以及XHTML類和id的有效命名方式。這些詞匯簡單并且能夠使人顧名思義，因此滿足了標識頁面元素以及相應的CSS樣式的需要。
但問題是這樣的名稱同頁面內容的特定表達方式相關聯(lián)。這些命名參考了某種特定頁面布局中的頁面元素位置，因此在這樣的布局之外使用就會顯得不合適甚至造成理解混亂。同時，這些命名沒有涉及文檔內容的結構。因此，下面給出了對CSS類以及ID命名更好的方法。
3、結構化命名
結構化的標記意味著表達方式/位置信息同內容的完全分離——這其中包括出現(xiàn)在標記（markup）中的類和id名稱。
有標記的相關信息都是用來描述文檔的結構而不是外觀。這樣的特點使得我們可以通過簡單的改變CSS的方式來對不同外觀格式下的內容（content）以及標記（markup）進行重用。當你理解這種方式時，很容易就可以發(fā)現(xiàn)采用頁面位置來為類以及id命名的方式在處理如音頻（audio）等外觀格式上顯得非常不合適。因此，應當根據在文檔中的使用目的而非出現(xiàn)位置來對類以及id進行結構化命名。
可以按照如下所示的結構化方式來對類以及id名稱命名：
頂部搶眼部分：branding
導航部分：main-nav
主要內容部分：main-content
這些名字同直觀命名方式一樣非常易懂，但他們描述了頁面元素的作用而非位置。這使得代碼更加符合使用純粹的結構化標記（structural markup）的初衷，即開發(fā)人員可以在不改變標記的情況下對各種各樣媒體下的顯示格式進行處理。
即使你不打算在其他的媒體上對Web頁面進行格式修改，使用結構化命名方式還可以幫助你在日后的站點升級或重新設計中更為輕松。例如，結構化命名避免了當一個div同id right-column移動到頁面左邊后所帶來的混亂。對div sidebar的采用這樣的命名方式就顯得更加適當，因為無論它出現(xiàn)在頁面的哪一邊，這個名字仍然對開發(fā)人員來說直觀易懂。
4、慣例
Andy Clarke分析了40份由推崇標準化Web設計理念的開發(fā)人員所設計的Web站點的源代碼。盡管類以及id名稱很不統(tǒng)一，但是還是發(fā)現(xiàn)了一些頻繁出現(xiàn)的常用名稱。這里給出了最常用類/id名稱的示例列表：
header
content
nav
sidebar
footer
如果要查看完整的列表，可以看看最常見命名慣例表
這些常見的類以及id名稱是否標志著一種標準的誕生或是普遍接受慣例的形成呢？盡管這是我所希望的，但我并不這么認為。我的確希望能夠看見一整套對于我們每天都可以看到的常用頁面元素的命名標準。同時，使用標準化的命名方式可以使得尋找頁面元素以及對Web站點升級帶來方便，尤其當需要在由不同開發(fā)人員在不同時間所開發(fā)站點中換來換去工作的時候。
review:
大的布局div可以以外觀的方式命名(如header,footer)，其他的我覺得還是應該以描述所含內容的標準來命名（如menu，news）
5、自定義命名：
根據w3c網站上給出的,最好是用意義命名
比如：是重要的新聞高亮顯示（像紅色）
有兩種
.red{color:red}
.important-news{color:red}
很顯然第二種傳達的意義更加明確,所以盡量不要用意義不明確的作為自己自定義的名字
三、CSS樣式書寫順序
1、顯示屬性
* display * list-style * position * float * clear
2、自身屬性
* width * height * margin * padding * border * background
3、文本屬性
* color * font * text-decoration * text-align
* vertical-align * white-space * other text * content
規(guī)范參考
本規(guī)范既是一個開發(fā)規(guī)范，也是一個腳本語言參考，本規(guī)范并不是一個一成不變的必須嚴格遵守的條文，特殊情況下要靈活運用，做一定的變通。但是，請大家千萬不要隨意更改規(guī)范。如果有任何問題，請及時與我聯(lián)系，我會及時更改本規(guī)范的相關代碼樣例和文檔。
/基 本 要 求
1. 在網站根目錄中開設images common temp 三個子目錄，根據需要再開設media 子目錄，images目錄中放不同欄目的頁面都要用到的公共圖片，例如公司的標志、banner 條、菜單、按鈕等等；common 子目錄中放css、js,、php、include 等公共文件；temp 子目錄放客戶提供的各種文字圖片等等原始資料；media 子目錄中放flash, avi, quick time 等多媒體文件 。
2. 在根目錄中原則上應該按照首頁的欄目結構，給每一個欄目開設一個目錄，根據需要在每一個欄目的目錄中開設一個images 和media 的子目錄用以放置此欄目專有的圖片和多媒體文件，如果這個欄目的內容特別多，又分出很多下級欄目，可以相應的再開設其他目錄。
3. temp 目錄中的文件往往會比較多，建議以時間為名稱開設目錄，將客戶陸續(xù)提供的資料歸類整理。
4. 除非有特殊情況，目錄、文件的名稱全部用小寫英文字母、數字、下劃線的組合，其中不得包含漢字、空格和特殊字符；目錄的命名請盡量以英文為指導，不到萬不得已不要以拼音作為目錄名稱，經驗證明，用拼音命名的目錄往往連一個月后的自己都看不懂，
/腳 本 編 寫
我們應該有一個腳本整體風格一致的概念，意思是一個月后和一個月前的你寫的腳本風格保持一致，以及同一個工作組中不同的開發(fā)人員編寫的腳本風格保持一致，因為我們不可能永遠孤立的開發(fā)，你隨時都有可能和三個月前的自己合作（你的客戶要求改版），也經常要和工作室中不同的同事共同開發(fā)一個項目，還有可能被要求修改已經離職人員開發(fā)的腳本，當然你自己也有可能會扔下一個項目給后來的同事。
5. Width 和height 的寫法也有統(tǒng)一的規(guī)范，一般情況下只有一列的表格，width 寫在<table> 的標簽內，只有一行的表格，height 寫在 <table> 的標簽內，多行多列的表格，width 和height 寫在第一行或者第一列的 <td> 標簽內。總之遵循一條原則：不出現(xiàn)多于一個的控制同一個單元格大小的height 和width, 保證任何一個width 和height 都是有效的，也就是你改動代碼中任何一個width 和height 的數值，都應該在瀏覽器中看到變化。做到這一條不容易，需要較長時間的練習和思考。
/一 般 原 則
1. 在排布表格之前，請大家一定要好好思考一個最佳的方案，表格的嵌套盡量控制在三層以內，并且應該盡量避免 <colspan> <rowspan> 兩個標記，經驗表明，這兩個標記會帶來許多麻煩。
2. 一個網頁要盡量避免用整個一張大表格，所有的內容都嵌套在這個大表格之內，因為瀏覽器在解釋頁面的元素時，是以表格為單位逐一顯示，如果一張網頁是嵌套在一個大表格之內，那么很可能造成的后果就是，當瀏覽者敲入網址，他要先面對一片空白很長時間，然后所有的網頁內容同時出現(xiàn)。如果必須這樣做，請使用 <tbody>標記，以便能夠使這個大表格分塊顯示。
3. 排版中我們經常會遇到需要進行首行縮進的處理，不要使用或者全角空格來達到效果，規(guī)范的做法是在樣式表中定義 p { text-indent: 2em; } 然后給每一段加上 <p> 標記，注意，一般情況下，請不要省略 </p> 結束標記 。
4. 原則上，我們禁止用 <img width=? height=?> 來人為干預圖片顯示的尺寸，而且建議 <img> 標簽中不要帶上width 和height 兩個屬性，這是因為制作過程中，圖片往往需要反復的修改，這樣可以避免人為干預圖片顯示的尺寸，盡可能的發(fā)揮瀏覽器自身的功能；但是這樣的一個副作用是當網頁還未加載圖片時，不會留出圖片的站位大小，可能會造成網頁在加載過程中抖動（如果圖片是插在一個固定大小的表格里的，不會有這個現(xiàn)象），尤其是當圖片的尺寸較大時，這種現(xiàn)象會很明顯，所以當預料到這種會明顯導致網頁抖動的情況會發(fā)生時，請大家務必在最后給 <img>附上 width 和 height 屬性。
5. 為了最大程度的發(fā)揮瀏覽器自動排版的功能，在一段完整的文字中請盡量不要使用<br> 來人工干預分段。
6. 不同語種的文字之間應該有一個半角空格，但避頭的符號之前和避尾的符號之后除外漢字之間的標點要用全角標點，英文字母和數字周圍的括號應該使用半角括號。
7. 所有的字號都應該用樣式表來實現(xiàn)，禁止在頁面中出現(xiàn) <font size=?> 標記。
8. 請不要在網頁中連續(xù)出現(xiàn)多于一個的也盡量少使用全角空格（英文字符集下，全角空格會變成亂碼），空白應該盡量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 圖片來實現(xiàn)。
9. 中英文混排時，我們盡可能的將英文和數字定義為verdana 和arial 兩種字體。
10. 行距建議用百分比來定義，常用的兩個行距的值是line-height:120%/150%.
11. 網站中的路徑全部采用相對路徑，一般鏈接到某一目錄下的缺省文件的鏈接路徑不必寫全名，如我們不必這樣：<a href=”aboutus/index.htm”> 而應該這樣：<a href=”aboutus/”>
12. 嵌入圖形文本的使用較大的字體，建議不要在圖形中包括文本。
13.“網頁大小”定義為網頁的所有文件大小的總和，包括HTML文件和所有的嵌入的對象。用戶喜歡快的而不是新奇的站點。對于解調器用戶，網頁大小保持在34K以下為合適。
/文 件 命 名 原 則
1. 每一個目錄中應該包含一個缺省的html 文件，文件名統(tǒng)一用index.htm
2.件名稱統(tǒng)一用小寫的英文字母、數字和下劃線的組合。
3. 命名原則的指導思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個文件的意義，二是當我們在文件夾中使用“按名稱排例”的命令時，同一種大類的文件能夠排列在一起，以便我們查找、修改、替換、計算負載量等等操作。
4. 下面以“新聞”（包含“國內新聞”和“國際新聞”）這個欄目來說明html 文件的命名原則 ：
☆ 在根目錄下開設news目 錄
☆ 第一條缺省新聞取名index.htm
☆ 所有屬于“國內新聞”的新聞依次取名為：china_1.htm, china_2.htm, …
☆ 所有屬于“國際新聞”的新聞依次取名為：internation_1.htm, internation _2.htm, …
☆ 如果文件的數量是兩位數，請將前九個文件命名為：china_01.htm, china_02.htm 以保證所有的文件能夠在文件夾中正確排序。
5. 圖片的命名原則遵循以下幾條規(guī)范 ：
☆ 名稱分為頭尾兩兩部分，用下劃線隔開。
☆ 頭部分表示此圖片的大類性質，例如廣告、標志、菜單、按鈕等等。
☆ 一般來說:
放置在頁面頂部的廣告、裝飾圖案等長方形的圖片我們取名：banner
標志性的圖片我們取名為：logo
在頁面上位置不固定并且?guī)в墟溄拥男D片我們取名為button
在頁面上某一個位置連續(xù)出現(xiàn)，性質相同的鏈接欄目的圖片我們取名：menu
裝飾用的照片我們取名：pic
不帶鏈接表示標題的圖片我們取名：title
依照此原則類推。
☆ 尾部分用來表示圖片的具體含義。
☆ 下面是幾個樣例，大家應該能夠一眼看明白圖片的意義：
banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif
title_news.gif logo_police.gif logo_national.gif pic_people.jpg
pic_hill.jpg.
CSS命名慣例
頭：header
內容：content/containe
尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center
登錄條：loginbar
標志：logo
廣告：banner
頁面主體：main
熱點：hot
新聞：news
下載：download
子導航：subnav
菜單：menu
子菜單：submenu
搜索：search
友情鏈接：friendlink
頁腳：footer
版權：copyright
滾動：scroll
內容：content
標簽頁：tab
文章列表：list
提示信息：msg
小技巧：tips
欄目標題：title
加入：joinus
指南：guild
服務：service
注冊：regsiter
狀態(tài)：status
投票：vote