HTML+CSS編寫規範

文章目錄

•  

 

在任何一個項目或者系統開發之前都需要定製一個開發約定和規則，這樣有利於項目的整體風格統一、代碼維護和擴充。由於Web項目開發的分散性、獨立性、整合的互動性等，所以定製一套完整的約定和規則顯得尤為重要。

第一節 CSS樣式檔案的命名

建立樣式表檔案時，分類編寫樣式到下列樣式表檔案中，並統一放在【CSS】檔案夾裡：

主要	main.css	文字樣式	font.css
表格	table.css	主題	themes.css
列印	print.css	補丁	mend.css

在項目初期，會把不同類別的樣式放於不同的CSS檔案，是為了CSS編寫和調試的方便，在項目後期會為了網站效能上的考慮會整合不同的CSS檔案到一個CSS檔案，必要時可壓縮。

第二節 CSS選擇符的命名

所有選擇符必須有小寫英文字母或“_”底線組成，樣式名必須是表示該樣式的大概含義（禁止出現如Div1、div2、Style1……），參考後面的“樣式命名參考”。對CSS選取器的使用只允許派生選取器、類別選取器和屬性選取器，以及它們的組合使用，嚴禁使用ID選取器（ID是用於JavaScript的編寫）。

如：li span {…}td.fancy {…}input[type="text"]{…}

當定義的樣式名比較複雜時用底線把層次分開，比如：dcrm_logo{ …} dcrm_logo_ico{…}

第三節 圖片的命名與書寫

圖片的命名原則小寫英文字母名稱放在頭尾兩部分，用“_”底線隔開，頭部表示此圖片的大類性質例如廣告、標誌、菜單、按鈕等等；尾部表示圖片的概念。設計人員在PS中儲存圖片時，請使用“檔案”à“儲存為Web和裝置所用的格式”。

廣告	banner	標誌	logo
連結的小圖片	button	裝飾圖	pic
標題的圖片	title
banner_sohu.png 、banner_sina.png、 menu_about_us.png、menu_job.png、 title_news.gif、 logo_police.gif、 logo_national.gif 、pic_people.jpg

第四節 CSS注釋書寫規範4.1 提示和標籤資訊注釋

這是注釋最常用的途徑，可以為自己或其他開發人員留下提示資訊可以避免後期引起的不必要的困惑和麻煩。這種應用簡潔性最為重要。

.search{ border:1px solid #fff; /*Border Color*/ }

注意：注釋內容和前面樣式語句間有3個空格，後面1個空格

4.2 修改樣式注釋（時間和相關人員）

/*__Styles Updated: Thu 4.8.08 @ 5:15 p.m. Author: hour --------------------------------------------------------------------------------------------*/

4.3 文檔結構

/*__Header --------------------------------------------------------------------------------------------*/ .search{ border:1px solid #fff; /*Border Color*/ color:#333; /*Color*/} /*__Menu --------------------------------------------------------------------------------------------*/ .menul_ul{ border:1px solid #fff; /*Border Color*/}

注意：相對獨立的2段內容之間空1行。

第五節 CSS布局編碼通訊協定和建議5.1 建立樣式表索引

樣式表頭部索引定義可以協助你和其它人弄清楚該樣式表檔案的相關資訊，它一般是一段格式化的CSS注釋文本寫在 main.css中。給出該CSS檔案作者的相關資訊；定義網站的布局，記錄檔案版本號碼（利於多作者協作及將來更新）

/*--------------------------------------------------------------------------------------------- *Filename: main.css *Description: Global CSS *Version: 1.0.0(2009-12-28)YYYY-MM-DD *Website: http://www.testsoft.com ==STRUCTURE:=================================== == ==== ===== *Page width: 980px *Number of columns: 2 --------------------------------------------------------------------------------------------*/

5.2 命名錨點 的使用

命名錨點是用來規劃整個CSS檔案結構的（就好像書籤一樣），從而使整個CSS檔案獲得良好的組織。命名錨點一般也是書寫在樣式表頭部的索引注釋中。CSS本身沒有內部的錨點系統，所以我一般採用下面的小技巧來完成。在頭部索引拷貝你想找到的錨點，並在整個文檔中尋找，從而擷取該CSS節。

*==STRUCTURE:=============================================== $__header Header Definitions $__menu Global Site $__content Everything within the content -----------------------------------------------------------------------------------------------*/ /*__header -----------------------------------------------------------------------------------------------*/ {...Header CSS Definitions...} /*__menu ----------------------------------------------------------------------------------------------*/ {...Header CSS Definitions...}

5.3 建立良好的CSS編碼順序

最後定義的 CSS 樣式將會覆蓋在其之前定義的所有已經存在、或與之衝突的樣式，比如下面這個例子：

p { color: red; background: yellow;} p { color: green;}

以上的段落最終將呈現綠色的字型，並帶有黃色的背景，這是因為最後定義的 color:green 將之前定義的 red 覆蓋掉了，至於黃色背景為何沒有消失，那是因為第二個 p 的定義中並沒有與之衝突的定義，因此它還是有效。

5.4 合適的縮寫

在CSS中經常會利用縮寫把多個相同類型的屬性定義指定為一個。CSS縮寫會使CSS文檔更加乾淨、簡潔；縮寫文法參考相關章節。

5.5 CSS映像拼合(即CSS Sprites技術)

CSS Sprites技術：將用到的所有小圖片（表徵圖）合并為一張圖片，使用css背景屬性，來控製圖片的顯示位置和方式。CSS Sprites技術的應用可以大大減少HTTP請求的次數，減輕伺服器壓力，同時縮短了懸停載入圖片所需要的時間延遲，使效果更流暢，不會停頓。

5.6 CSS組合和嵌套

CSS組合

你不必重複有相同屬性的多個選擇符，你只要用英文逗號（,）隔開選擇符就可以了。

h2 { color: red; } .w3cbbs { color: red; } .w3cbbs_52css { color: red; } 則你可以這樣寫h2,.w3cbbs,.w3cbbs_52css { color: red; }

CSS嵌套

CSS結構好的話，沒有必要使用過多的類或者標識選擇符。這是因為你可以指定在選擇符內的選擇符。

.top { background-color: #ccc; padding: 1em;} .top h1 { color: #ff0; } .top p { color: red; font-weight: bold; }

第六節 常用CSS選擇符命名參考

導航	nav	頁頭	header
主導航	mainnav	頁面主體	main
頂導航	topnav	內容	content
子導航	subnav	頁尾	footer
菜單	menu	著作權	copyright
子功能表	submenu	登陸	login
標誌	logo	側欄	sidebar
廣告	banner	搜尋	search
滾動	scroll	標籤頁	tab
小技巧	tips	夥伴	partner
加入	joinus	標題	title
註冊	regsiter	指南	gUIld
新聞	news	下載	download
按鈕	button	狀態	status
服務	service	投票	vote
注釋	note	友情連結	friendlink
提示資訊	msg

注意：命名方式使用“類別_功能”的方式（.bar_news{} .bar_product{}）。

第七節 DIV+CSS頁面的布局

Table布局由於代碼冗餘已經過時，所以HTML頁面普遍採用代碼簡潔Div+CSS的布局，HTML頁面大體可分為top、main和bottom，在main中又可以為left和right，這些CSS的名必須是有意義的名字。如下面代碼：

<body> <div class="body"> <div class="top"> </div> <div class="main"> <div class="left"> </div> <div class="right"> </div> </div> <div class="bottom"> </div> </div> </body>

目前table主要是用來展現資料表，反正在布局中盡量少用table。

第八節 HTML代碼書寫規範

頁面的HTML代碼書寫必須符合XHTML規範，XHTML 可以被所有的支援 XML 的裝置讀取，同時在其餘的瀏覽器升級至支援 XML 之前，XHTML 使我們有能力編寫出擁有良好結構的文檔，這些文檔可以很好地工作於所有的瀏覽器，並且可以向後相容。

XHTML與HTML的不同：

1. XHTML 元素必須被正確地嵌套。

2. XHTML 元素必須被關閉。

3. 標籤名必須用小寫字母。

4. XHTML 文檔必須擁有根項目。

對於第1點：最有可能發生錯誤是在與<table>標籤的結合，<table>的直接子項目只能為：<thead>、<tbody>、<tfoot>和<tr>，而 <thead>、<tbody>和<tfoot>的直接子項目只能為：<tr>，而<tr>的直接子項目只能為<td>和<th>，在<td>和<th>才可以放其它標籤。此外相類似的標籤有：<dl>、<ul>、<ol>、<select>…。

某些標籤不推薦使用，如：<b><strong><i><em> <strong> <dfn> <code> <samp> <kbd><var> <cite>……，因為這些標籤有些是可以用CSS去統一控制，還有一些是不常使用的；某些標籤是有特殊意義的，如：<h1>…<h6>，這些標籤是專門用於內容標題的，本人也希望只允許使用<h1>…<h6>來表示內容標題。

在編寫HTML代碼時請注意縮排，在VS中按Ctrl+E+D可格式化文本。

第九節 網站基礎CSS的定義

網站CSS必須得有個統一的架構，複用CSS，盡量減少重複CSS的定義。基礎CSS就是那些常用的CSS定義，如：

.clear { clear: both; } .bold { font-weight: bold; } .left { text-align: left; } .error { color: Red; } .succeed { color: Green; } .center { text-align: center; } .fleft { float:left; } .fright { float:right; } .left15 { margin-left: 15px; } .radius { border-radius: 5px; }

CSS元素選取器可以對同一標籤進行統一的樣式定義，有些標籤應該使用元素CSS定義，如：

body { font-size: 12px; font-family: Arial; margin: 0; padding: 0; color: #403f3f; background:url('../images/page_top.png') repeat-x top #d1d2d2; } a, a:link { color: #2a5685; text-decoration: none; line-height: normal; } a:hover { color: #E0303A; text-decoration: none; cursor: pointer; } ul { margin: 0px; padding: 0px; } hr { height: 1px; border: none; border-bottom: #dcdddd 1px solid; } h1, h2 { font-size: 1.5em; color: #000; } h3 { font-size: 1.2em; } h4 { font-size: 1.1em; }

第十節 CSS調試心得

目前的瀏覽器基本上都有用戶端調試工具，所以當對頁面進行設計或調試時，請盡量使用此類工具，而不是改源檔案，然後再重新整理頁面，使用用戶端工具可及時增、刪、改HTML元素所對應的CSS，還可以得到HTML元素所在布局的具體數值，如：

在項目後期進行CSS調試時應，著重於頁面展現給瀏覽器後形成的HTML+CSS代碼，而不是關注於源檔案，因為頁面上很多元素是源檔案裡沒有的，是動態產生的，對於那些動態產生的HTML元素，看看作用在它上面的CSS是哪些，再去修改其CSS或添加新的CSS。

對於CSS3，如果CSS3能達到更好的視覺效果，那就使用，不用去管那些不支援CSS3的瀏覽器，畢竟CSS3是一發展趨勢，對於靜態頁面的設計人員也應該熟悉CSS3的那些效果（比如圓角、文字陰影……），來代替之前需要用圖片來實現的效果。