了解css技術基礎之css代碼的編寫規范
一般網站都包含大量的源代碼，運用div+css的頁面排版方式，制作出語義明確、結構清晰的網頁還需要遵循編寫css代碼的規范。
一個大型網站的每個網頁都包含大量的源代碼。以往設計師使用表格來進行頁面布局，使網站的源代碼更加繁瑣，此時要對一個使用表格排版的大型網站進行修改是非常困難的。自從出現了div+css的頁面排版方式后，網頁的源代碼量就大大減少了。但是要制作出語義明確、結構清晰的網頁還需要遵循編寫css代碼的規范。Css代碼的規范并不是一些明文細則，而是網頁設計者在制作和修改網頁代碼時總結的經驗。
css代碼的編寫規范
傳統的HTML代碼本身也是一種容易理解的標記語言。如p標簽代表paragraph，就是段落的意思。b標簽代表bold，就是粗體的意思。在編寫XHTML文檔時，使用有意義的標簽能讓網頁源代碼易懂易改，并且能防止代碼累贅。XHTML中常用的有語義的標簽：
|
標簽 |
語義 |
|
H1-h6 |
標題h1-h6根據重要性依次遞減，h1為最重要的標題 |
|
Ul、ol、dl |
無序列表、有序列表和定義列表 |
|
Captain、summary |
表格的標題和描述，有利于概括表格的內容 |
|
Tbody、thead、tfoot |
表格的頭部中部和尾部 |
|
Blockquote、cite |
引用 |
|
Strong、em |
粗體和斜體 |
|
Fieldset、legend |
用于嵌套表單 |
使用有語義的標簽是符合web標準的首要條件。這樣構架XHTML頁面才能達到形式與表現的合理化。
盡管XHTML提供了很多有語義的標簽，仍然不能滿足實際運用的需求。所以需要為不同功能的標簽增加類選擇器或者ID選擇器。在進行頁面排版時要為不同功能的標簽設置相應的css選擇器名稱。例如：網頁的頭部若用一個div標簽來嵌套，那么這個div標簽的類選擇器就應該命名為header。
|
內容 |
命名 |
內容 |
命名 |
|
網頁頭部 |
header |
標志 |
logo |
|
網頁內容 |
Content/containe |
廣告 |
banner |
|
網頁尾部 |
footer |
網頁主體 |
main |
|
導航 |
Nav/navigation |
熱點 |
hot |
|
側欄 |
sidebar |
新聞 |
news |
|
欄目 |
Col/column |
下載 |
download |
|
頁面外圍控制整體布局寬度 |
wrapper |
子導航 |
subnav |
|
左右中 |
Left right center |
搜索 |
search |
|
登錄框 |
loginbox |
滾動 |
scroll |
|
友情鏈接 |
links |
標簽頁 |
tab |
|
菜單 |
menu |
子菜單 |
submenu |
|
提示信息 |
message |
技巧 |
tips |
|
欄目標題 |
title |
服務 |
service |
|
注冊 |
regsiter |
指南 |
guild |
|
版權 |
copyright |
列表 |
list |
以上的css命名只是一般常用的命名，在網頁制作中會遇到更復雜的元素。例如：文章標題的子標題，命名為subtitle，為了使命名結構更為清晰，常使用駝峰式的命名法，將subtitle寫為subTitle.駝峰式的命名方法就是把命名中的第一個單詞首字母記為小寫，其余單詞首字母記為大寫。例如：leftcolumnbar用駝峰式命名就是leftColumnBar。
之前有介紹過如何縮寫一些css屬性代碼。以下列出了可以縮寫的css屬性及其縮寫的方式。
|
可縮寫屬性 |
縮寫前的形式 |
縮寫后的形式 |
說明 |
|
顏色 |
#000000 |
#000 |
16進制的色彩值，如果每兩位的值相同，可以縮寫一半。 |
|
字體(font) |
font-style:italic; font-variant:small-caps; font-weight:normal; font-size:14px; line-height:28px; font-family:'宋體'; |
font:italic small-caps normal 14px/28px '宋體' |
縮寫字體定義，至少要定義font-size和font-family兩個值。 |
|
列表(list-style) |
list-style-type:square; list-style-position:outside; list-style-image:url(picture.jpg); |
list-style:square outside url(picture.jpg) |
取消默認的圓點和序號的方法：list-style:none |
|
背景(background) |
background-color:#FFF; background-image:url(picture.jpg); background-repeat:no-repeat; background-attachment:fixed; background-position:center left; |
background:#FFF url(picture.jpg) no-repeat fixed center left; |
語法是background:color image repeat attachment position; |
|
盒模型 |
margin:5px 5px 5px 5px margin:10px 5px 10px 5px margin:10px 5px 30px 5px margin:1px 2px 3px 4px |
margin:5px; margin:10px 5px; margin:10px 5px 30px; 不能縮寫 |
方便的記憶方法是順時針，上右下左。Property:valueA；表示所有邊都是一個值valueA；Property:valueA valueB 表示top和bottom的值是valueA；left和right的值是valueB；Property:valueA valueB valueC；表示top的值是valueA，right和left的值是valueB；bottom的值是valueC；Property:valueA valueB valueC valueD；四個值依次表示top，right，bottom，left |
|
邊框(border) |
border-width:2px; border-style:solid; border-color:#F00 |
border:2px solid #F00 |
Border:width style color |
在制作標準網頁的過程中合理使用注釋能給文檔創建者和修改者提供很大的幫助，文檔創建者在編寫css文檔時可能非常清楚各個代碼的意義，但是半年或者一年后再次修改該文檔就不會那么清晰了。當別的設計師要修改這個文檔，若沒有注釋的話，修改起來非常困難。常見使用css注釋的地方有以下幾個：
1、解釋某個css樣式的作用。這種注釋是文檔創建者和修改者留下的提示信息，避免后期引起的困惑和麻煩。代碼如下：
*{ margin:0px; padding:0px; }/*設置整個網頁的邊距和補白都為0*/
沒有必要為每一個css樣式都加上注釋，只需要為某些重要的css樣式標明注釋即可。如用用于布局的css樣式就應該添加注釋。?
2、文檔的作者和創建文檔的時間。一般在css文件的頭部會添加該文件的作者、時間等信息。這些信息對于日后查找文件和修改文件有很大幫助。 /*文檔創建者：張明 文檔創建時間：2018-7-25 文檔關聯XHTML頁面：index.html*/?
3、使用div+css的布局方式制作XHTML頁面常會用到不同的區塊。在css文檔中，最好是將每個區塊所有用到的css代碼放在一起，然后注釋指明其區塊名稱。例如：網頁頭部的區塊名稱為header，則可以把header中用到的css代碼集中到一起，然后用注釋指明，代碼： /*--header--*/ .header { width:150px;background:#ffffff; } .header h2{font-size:14px;} .header p{ line-height:20px;} /*--header--*/ 在header代碼塊的開始和結束都加上一行注釋，指示注釋之間的代碼都屬于網頁頭部header區塊。
注釋不要使用特別多，要合理使用注釋才能提高效率。注釋過多，會使css文件過大，影響載入速度。
新聞資訊
關于我們
浙江網盛生意寶股份有限公司（股票代碼：002095，以下簡稱生意寶）是一家專業從事互聯網信息服務、電子商務、專業搜索引擎和企業應用軟件開發的高新企業。公司總部位于“電子商務之都”杭州，從化工行業B2B起家，目前已發展成為國內領先的行業電子商務運營商和綜合B2B運營商。
聯系人：王經理
電話：024-83959235
郵箱：wy@netsun.com
