css命名及書(shū)寫(xiě)規(guī)范

1/1css命名及書(shū)寫(xiě)規(guī)范css命名及書(shū)寫(xiě)規(guī)范CSS命名規(guī)范一．文件命名規(guī)范全局樣式：

global.css；框架布局：

layout.css；字體樣式：

font.css；鏈接樣式：

link.css；打印樣式：

print.css；二．常用類/ID命名規(guī)范頁(yè)眉：

header內(nèi)容：

content容器：

container頁(yè)腳：

footer版權(quán)：

copyright導(dǎo)航：

menu主導(dǎo)航：

mainMenu子導(dǎo)航：

subMenu標(biāo)志：

logo標(biāo)語(yǔ)：

banner標(biāo)題：

title側(cè)邊欄：

sidebar圖標(biāo)：

Icon注釋：

note搜索：

search按鈕：

btn登錄：

login鏈接：

link信息框：

manage常用類的命名應(yīng)盡量以常見(jiàn)英文單詞為準(zhǔn)，做到通俗易懂，并在適當(dāng)?shù)牡胤郊右宰⑨尅?/p>

對(duì)于二級(jí)類/ID命名，則采用組合書(shū)寫(xiě)的模式，后一個(gè)單詞的首字母應(yīng)大寫(xiě)：

諸如搜索框則應(yīng)命名為searchInput、搜索圖標(biāo)命名這searchIcon、搜索按鈕命名為searchBtnCSS書(shū)寫(xiě)規(guī)范及方法一.常規(guī)書(shū)寫(xiě)規(guī)范及方法1.選擇DOCTYPE：

XHTML1.0提供了三種DTD聲明可供選擇：

過(guò)渡的(Transitional):要求非常寬松的DTD，它允許你繼續(xù)使用HTML4.01的標(biāo)識(shí)(但是要符合x(chóng)html的寫(xiě)法)。

完整代碼如下：

!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN1/DTD/xhtml1-transitional.dtd嚴(yán)格的(Strict):要求嚴(yán)格的DTD，你不能使用任何表現(xiàn)層的標(biāo)識(shí)和屬性，例如br。

完整代碼如下：

!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN1/DTD/xhtml1-strict.dtd框架的(Frameset):專門針對(duì)框架頁(yè)面設(shè)計(jì)使用的DTD，如果你的頁(yè)面中包含有框架，需要采用這種DTD。

完整代碼如下：

!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Frameset//EN1/DTD/xhtml1-frameset.dtd理想情況當(dāng)然是嚴(yán)格的DTD，但對(duì)于我們大多數(shù)剛接觸web標(biāo)準(zhǔn)的設(shè)計(jì)師來(lái)說(shuō)，過(guò)渡的DTD(XHTML1.0Transitional)是目前理想選擇(包括本站，使用的也是過(guò)渡型DTD)。

因?yàn)檫@種DTD還允許我們使用表現(xiàn)層的標(biāo)識(shí)、元素和屬性，也比較容易通過(guò)W3C的代碼校驗(yàn)。

2.指定語(yǔ)言及字符集：

為文檔指定語(yǔ)言：

htmlxmlns=lang=en為了被瀏覽器正確解釋和通過(guò)W3C代碼校驗(yàn)，所有的XHTML文檔都必須聲明它們所使用的編碼語(yǔ)言；如：

常用的語(yǔ)言定義：

meta;charset=utf-8/標(biāo)準(zhǔn)的XML文檔語(yǔ)言定義：

?xmlversion=1.0encoding=utf-8?針對(duì)老版本的瀏覽器的語(yǔ)言定義：

meta與*html是IE特有的標(biāo)簽,Firefox暫不支持。

.searchInput{background-color:#333;}*html.searchInput{background-color:#666;}/*僅IE6*/*+html.searchInput{background-color:#555;}/*僅IE7*/屏蔽IE瀏覽器：

select是選擇符，根據(jù)情況更換。

第二句是MAC上safari瀏覽器獨(dú)有的。

*:lang(zh)select{font:12px!important;}/*FF的專用*/select:empty{font:12px!important;}/*safari可見(jiàn)*/IE6可識(shí)別：

這里主要是通過(guò)CSS注釋分開(kāi)一個(gè)屬性與值，注釋在冒號(hào)前。

select{display/*IE6不識(shí)別*/:none;}IE的if條件hack寫(xiě)法：

所有的IE可識(shí)別：

![ifIE]OnlyIE![endif]只有IE5.0可以識(shí)別:![ifIE5.0]OnlyIE5.0![endif]IE5.0包換IE5.5都可以識(shí)別:![ifgtIE5.0]OnlyIE5.0+![endif]僅IE6可識(shí)別:![ifltIE6]OnlyIE6-![endif]IE6以及IE6以下的IE5.x都可識(shí)別:![ifgteIE6]OnlyIE6/+![endif]僅IE7可識(shí)別:![iflteIE7]OnlyIE7/-![endif]2、清除浮動(dòng)：

在Firefox中，當(dāng)子級(jí)都為浮動(dòng)時(shí)，那么父級(jí)的高度就無(wú)法完全的包住整個(gè)子級(jí)，那么這時(shí)用這個(gè)清除浮動(dòng)的HACK來(lái)對(duì)父級(jí)做一次定義，那么就可以解決這個(gè)問(wèn)題。

select:after{content:.;display:block;height:0;clear:both;visibility:hidden;}分割線申明：

本文部分資料搜集于網(wǎng)絡(luò)！XHTML-CSS寫(xiě)作建議1.所有的xhtml代碼小寫(xiě)2.屬性的值一定要用雙引號(hào)()括起來(lái)，且一定要有值3.每個(gè)標(biāo)簽都要有開(kāi)始和結(jié)束，且要有正確的層次4.空元素要有結(jié)束的tag或于開(kāi)始的tag后加上/5.表現(xiàn)與結(jié)構(gòu)完全分離，代碼中不涉及任何的表現(xiàn)元素，如style、font、bgColor、border等6.h1到h5的定義，應(yīng)遵循從大到小的原則，體現(xiàn)文檔的結(jié)構(gòu)，并有利于搜索引擎的查詢。

7.給每一個(gè)表格和表單加上一個(gè)唯一的、結(jié)構(gòu)標(biāo)記id8.給重要的區(qū)塊加上注釋,如：

給圖片加上alt標(biāo)簽9.所有的標(biāo)簽必須進(jìn)行合理的嵌套10.根元素前必須有元素，宣告使用那一種DTD11.根元素必須有xmlns屬性來(lái)指定使用的namespaceCSS樣式表規(guī)范：

1.id和class命名采用該版塊的英文單詞或組合命名，并第一個(gè)單詞小寫(xiě)，第二個(gè)單詞首個(gè)字母大寫(xiě)，如:newRelease（最新產(chǎn)品/new+Release)2.CSS樣式表各區(qū)塊用注釋說(shuō)明3.盡量使用英文命名原則4.盡量不加中杠和下劃線5.盡量不縮寫(xiě)，除非一看就明白的單詞CSS命名規(guī)范：

DIVCSS名稱說(shuō)明網(wǎng)站公用相關(guān)Containerdiv#container容器Layout#layout布局Headerorbannerdiv#head,#header頁(yè)頭部分Footerdiv#foot,#footer頁(yè)腳部分Navigationlist#nav主導(dǎo)航Sub-navigationlist#subNav二級(jí)導(dǎo)航Menu#menu菜單SubMenu#submenu子菜單Leftorrightsidecolumns#sidebar_a,#sidebar_b左邊欄或右邊欄Maindiv#main頁(yè)面主體Tag#tag標(biāo)簽Message#msg#message提示信息Tips#tips小技巧Vote#vote投票FriendLink#friendlink友情連接Title#title標(biāo)題Summary#summary摘要Searchinput#searchInput搜索輸入框Searchoutput#search_output搜索輸出和搜索結(jié)果相似Search#search搜索Searchbar#searchBar搜索條Searchresults#search_results搜索結(jié)果Copyrightinformation#copyright版權(quán)信息brand#branding商標(biāo)branding-logo#logoLOGOSiteinformation#siteinfo網(wǎng)站信息Copyrightinformationetc.#siteinfoLegal法律聲明Designerorothercredits#siteinfoCredits信譽(yù)Joinus#joinus加入我們Partnershipopportunities#partner合作伙伴Services#service服務(wù)Regsiter#regsiter注冊(cè)Arrowa