&

css代碼的編寫規(guī)范

使用語義，明確的標記

傳統(tǒng)的HTML代碼本身也是一種容易理解的標記語言。如p標簽代表paragraph，就是段落的意思。b標簽代表bold，就是粗體的意思。在編寫XHTML文檔時，使用有意義的標簽能讓網(wǎng)頁源代碼易懂易改，并且能防止代碼累贅。XHTML中常用的有語義的標簽：

標簽	語義
H1-h6	標題h1-h6根據(jù)重要性依次遞減，h1為最重要的標題
Ul、ol、dl	無序列表、有序列表和定義列表
Captain、summary	表格的標題和描述，有利于概括表格的內(nèi)容
Tbody、thead、tfoot	表格的頭部中部和尾部
Blockquote、cite	引用
Strong、em	粗體和斜體
Fieldset、legend	用于嵌套表單

使用有語義的標簽是符合web標準的首要條件。這樣構架XHTML頁面才能達到形式與表現(xiàn)的合理化。

使用有意義的css命名

盡管XHTML提供了很多有語義的標簽，仍然不能滿足實際運用的需求。所以需要為不同功能的標簽增加類選擇器或者ID選擇器。在進行頁面排版時要為不同功能的標簽設置相應的css選擇器名稱。例如：網(wǎng)頁的頭部若用一個div標簽來嵌套，那么這個div標簽的類選擇器就應該命名為header。

內(nèi)容	命名	內(nèi)容	命名
網(wǎng)頁頭部	header	標志	logo
網(wǎng)頁內(nèi)容	Content/containe	廣告	banner
網(wǎng)頁尾部	footer	網(wǎng)頁主體	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命名只是一般常用的命名，在網(wǎng)頁制作中會遇到更復雜的元素。例如：文章標題的子標題，命名為subtitle，為了使命名結構更為清晰，常使用駝峰式的命名法，將subtitle寫為subTitle.駝峰式的命名方法就是把命名中的第一個單詞首字母記為小寫，其余單詞首字母記為大寫。例如：leftcolumnbar用駝峰式命名就是leftColumnBar。

css代碼的縮寫

之前有介紹過如何縮寫一些css屬性代碼。以下列出了可以縮寫的css屬性及其縮寫的方式。

可縮寫屬性	縮寫前的形式	縮寫后的形式	說明
顏色	#000000 ? ? ?#224499	#000 ? ? ?#249	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注釋

在制作標準網(wǎng)頁的過程中合理使用注釋能給文檔創(chuàng)建者和修改者提供很大的幫助，文檔創(chuàng)建者在編寫css文檔時可能非常清楚各個代碼的意義，但是半年或者一年后再次修改該文檔就不會那么清晰了。當別的設計師要修改這個文檔，若沒有注釋的話，修改起來非常困難。常見使用css注釋的地方有以下幾個：
1、解釋某個css樣式的作用。這種注釋是文檔創(chuàng)建者和修改者留下的提示信息，避免后期引起的困惑和麻煩。代碼如下： *{ margin:0px; padding:0px; }/*設置整個網(wǎng)頁的邊距和補白都為0*/ 沒有必要為每一個css樣式都加上注釋，只需要為某些重要的css樣式標明注釋即可。如用用于布局的css樣式就應該添加注釋。?

2、文檔的作者和創(chuàng)建文檔的時間。一般在css文件的頭部會添加該文件的作者、時間等信息。這些信息對于日后查找文件和修改文件有很大幫助。 /*文檔創(chuàng)建者：張明文檔創(chuàng)建時間：2018-7-25 文檔關聯(lián)XHTML頁面：index.html*/?

3、使用div+css的布局方式制作XHTML頁面常會用到不同的區(qū)塊。在css文檔中，最好是將每個區(qū)塊所有用到的css代碼放在一起，然后注釋指明其區(qū)塊名稱。例如：網(wǎng)頁頭部的區(qū)塊名稱為header，則可以把header中用到的css代碼集中到一起，然后用注釋指明，代碼： /*--header--*/ .header { width:150px;background:#ffffff; } .header h2{font-size:14px;} .header p{ line-height:20px;} /*--header--*/ 在header代碼塊的開始和結束都加上一行注釋，指示注釋之間的代碼都屬于網(wǎng)頁頭部header區(qū)塊。

注釋不要使用特別多，要合理使用注釋才能提高效率。注釋過多，會使css文件過大，影響載入速度。

亚洲欧美国产vr在线观_啊啊啊啊好爽欧美_国产女同性黄网在线观看_老师穿超短包臀裙办公室爆乳