穿越小说完本 ,完美世界辰东,遮天

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

使用語(yǔ)義，明確的標(biāo)記

傳統(tǒng)的HTML代碼本身也是一種容易理解的標(biāo)記語(yǔ)言。如p標(biāo)簽代表paragraph，就是段落的意思。b標(biāo)簽代表bold，就是粗體的意思。在編寫(xiě)XHTML文檔時(shí)，使用有意義的標(biāo)簽?zāi)茏尵W(wǎng)頁(yè)源代碼易懂易改，并且能防止代碼累贅。XHTML中常用的有語(yǔ)義的標(biāo)簽：

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

使用有語(yǔ)義的標(biāo)簽是符合web標(biāo)準(zhǔn)的首要條件。這樣構(gòu)架XHTML頁(yè)面才能達(dá)到形式與表現(xiàn)的合理化。

使用有意義的css命名

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

內(nèi)容	命名	內(nèi)容	命名
網(wǎng)頁(yè)頭部	header	標(biāo)志	logo
網(wǎng)頁(yè)內(nèi)容	Content/containe	廣告	banner
網(wǎng)頁(yè)尾部	footer	網(wǎng)頁(yè)主體	main
導(dǎo)航	Nav/navigation	熱點(diǎn)	hot
側(cè)欄	sidebar	新聞	news
欄目	Col/column	下載	download
頁(yè)面外圍控制整體布局寬度	wrapper	子導(dǎo)航	subnav
左右中	Left right center	搜索	search
登錄框	loginbox	滾動(dòng)	scroll
友情鏈接	links	標(biāo)簽頁(yè)	tab
菜單	menu	子菜單	submenu
提示信息	message	技巧	tips
欄目標(biāo)題	title	服務(wù)	service
注冊(cè)	regsiter	指南	guild
版權(quán)	copyright	列表	list

以上的css命名只是一般常用的命名，在網(wǎng)頁(yè)制作中會(huì)遇到更復(fù)雜的元素。例如：文章標(biāo)題的子標(biāo)題，命名為subtitle，為了使命名結(jié)構(gòu)更為清晰，常使用駝峰式的命名法，將subtitle寫(xiě)為subTitle.駝峰式的命名方法就是把命名中的第一個(gè)單詞首字母記為小寫(xiě)，其余單詞首字母記為大寫(xiě)。例如：leftcolumnbar用駝峰式命名就是leftColumnBar。

css代碼的縮寫(xiě)

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

可縮寫(xiě)屬性	縮寫(xiě)前的形式	縮寫(xiě)后的形式	說(shuō)明
顏色	#000000 ? ? ?#224499	#000 ? ? ?#249	16進(jìn)制的色彩值，如果每?jī)晌坏闹迪嗤?，可以縮寫(xiě)一半。
字體(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 '宋體'	縮寫(xiě)字體定義，至少要定義font-size和font-family兩個(gè)值。
列表(list-style)	list-style-type:square; list-style-position:outside; list-style-image:url(picture.jpg);	list-style:square outside url(picture.jpg)	取消默認(rèn)的圓點(diǎn)和序號(hào)的方法：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;	語(yǔ)法是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; 不能縮寫(xiě)	方便的記憶方法是順時(shí)針，上右下左。Property:valueA；表示所有邊都是一個(gè)值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；四個(gè)值依次表示top，right，bottom，left
邊框(border)	border-width:2px; border-style:solid; border-color:#F00	border:2px solid #F00	Border:width style color

合理的css注釋

在制作標(biāo)準(zhǔn)網(wǎng)頁(yè)的過(guò)程中合理使用注釋能給文檔創(chuàng)建者和修改者提供很大的幫助，文檔創(chuàng)建者在編寫(xiě)css文檔時(shí)可能非常清楚各個(gè)代碼的意義，但是半年或者一年后再次修改該文檔就不會(huì)那么清晰了。當(dāng)別的設(shè)計(jì)師要修改這個(gè)文檔，若沒(méi)有注釋的話(huà)，修改起來(lái)非常困難。常見(jiàn)使用css注釋的地方有以下幾個(gè)：
1、解釋某個(gè)css樣式的作用。這種注釋是文檔創(chuàng)建者和修改者留下的提示信息，避免后期引起的困惑和麻煩。代碼如下： *{ margin:0px; padding:0px; }/*設(shè)置整個(gè)網(wǎng)頁(yè)的邊距和補(bǔ)白都為0*/ 沒(méi)有必要為每一個(gè)css樣式都加上注釋?zhuān)恍枰獮槟承┲匾腸ss樣式標(biāo)明注釋即可。如用用于布局的css樣式就應(yīng)該添加注釋。?

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

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

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