有声小说,欢乐颂第三季,小说排行榜完结版

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

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

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

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

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

使用有意義的css命名

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

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

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

css代碼的縮寫

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

可縮寫屬性	縮寫前的形式	縮寫后的形式	說明
顏色	#000000 ? ? ?#224499	#000 ? ? ?#249	16進(jìn)制的色彩值，如果每?jī)晌坏闹迪嗤?，可以縮寫一半。
字體(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兩個(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;	語法是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; 不能縮寫	方便的記憶方法是順時(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)頁的過程中合理使用注釋能給文檔創(chuàng)建者和修改者提供很大的幫助，文檔創(chuàng)建者在編寫css文檔時(shí)可能非常清楚各個(gè)代碼的意義，但是半年或者一年后再次修改該文檔就不會(huì)那么清晰了。當(dāng)別的設(shè)計(jì)師要修改這個(gè)文檔，若沒有注釋的話，修改起來非常困難。常見使用css注釋的地方有以下幾個(gè)：
1、解釋某個(gè)css樣式的作用。這種注釋是文檔創(chuàng)建者和修改者留下的提示信息，避免后期引起的困惑和麻煩。代碼如下： *{ margin:0px; padding:0px; }/*設(shè)置整個(gè)網(wǎng)頁的邊距和補(bǔ)白都為0*/ 沒有必要為每一個(gè)css樣式都加上注釋，只需要為某些重要的css樣式標(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頁面：index.html*/?

3、使用div+css的布局方式制作XHTML頁面常會(huì)用到不同的區(qū)塊。在css文檔中，最好是將每個(gè)區(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代碼塊的開始和結(jié)束都加上一行注釋，指示注釋之間的代碼都屬于網(wǎng)頁頭部header區(qū)塊。

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