[計(jì)算機(jī)]CSS常用命名規(guī)范及寫法詳解

1、.由于項(xiàng)目中編寫文檔結(jié)構(gòu)、編寫CSS的人員較多，并與程序員協(xié)同工作，所以就需要統(tǒng)一開發(fā)規(guī)范，根據(jù)XHTMl和CSS編織的規(guī)范和大多人的習(xí)慣，整理了以下針對(duì)本項(xiàng)目的一個(gè)簡(jiǎn)單的開發(fā)規(guī)范：一、CSS樣式命名規(guī)范 建議：用字母、“_”（下劃線）、“-”號(hào)、數(shù)字組成，必須以字母開頭，不能以數(shù)字開頭。為了開發(fā)后樣式名管理方便，大家請(qǐng)用有意義的單詞或縮寫組合來(lái)命名，讓同事一看就明白這樣式大概是哪一塊的，這樣就節(jié)省了查找樣式的時(shí)間，例如：頭部樣式用header，頭部左邊，可以用header_left或headerLeft,還有如果是列結(jié)構(gòu)的可以這樣box _1of3 (三列中的第一列)，box _2of3 (

2、三列中的第二列)、box _3of3 (三列中的第三列)，其它的我就不一一舉例了，大家按以上規(guī)律去命名就好。常用id的命名： 頁(yè)頭：header登錄條：loginbar標(biāo)志：logo側(cè)欄：sidebar廣告：banner導(dǎo)航：nav子導(dǎo)航：subnav菜單：menu子菜單：submenu搜索：search滾動(dòng)：scroll頁(yè)面主體：main內(nèi)容：content顯示當(dāng)前所在位置：breadcrumbs標(biāo)簽頁(yè)：tab文章列表：list提示信息：msg小技巧：tips欄目標(biāo)題：title加入：joinus指南：guild服務(wù)：service熱點(diǎn)：hot新聞：news下載：download注冊(cè)：reg

3、siter狀態(tài)：status按鈕：btn投票：vote合作伙伴：partner友情鏈接：friendlink頁(yè)腳：footer版權(quán)：copyright(1)頁(yè)面結(jié)構(gòu) 容器: container頁(yè)頭：header內(nèi)容：content/container頁(yè)面主體：main頁(yè)尾：footer導(dǎo)航：nav側(cè)欄：sidebar欄目：column頁(yè)面外圍控制整體布局寬度：wrapper左右中：left right center(2)導(dǎo)航 導(dǎo)航：nav主導(dǎo)航：mainbav子導(dǎo)航：subnav頂導(dǎo)航：topnav邊導(dǎo)航：sidebar左導(dǎo)航：leftsidebar右導(dǎo)航：rightsidebar菜單：men

4、u子菜單：submenu標(biāo)題：title摘要：summary(3)功能 標(biāo)志：logo廣告：banner登陸：login登錄條：loginbar注冊(cè)：regsiter搜索：search功能區(qū)：shop標(biāo)題：title加入：joinus狀態(tài)：status按鈕：btn滾動(dòng)：scroll標(biāo)簽頁(yè)：tab文章列表：list提示信息：msg當(dāng)前的：current小技巧：tips圖標(biāo)：icon注釋：note指南：guild服務(wù)：service熱點(diǎn)：hot新聞：news下載：download投票：vote合作伙伴：partner友情鏈接：link版權(quán)：copyrightcss文件命名： 主要的：master.

5、css模塊：module.css基本共用：base.css布局，版面：layout.css主題：themes.css專欄：columns.css文字：font.css表單：forms.css補(bǔ)丁：mend.css打?。簆rint.css二、id和class的使用及區(qū)別 我們知道在樣式表定義一個(gè)樣式的時(shí)候，可以定義id也可以定義class，例如：ID方法：#testcolor:#333333，在頁(yè)面中調(diào)用<div id="test">內(nèi)容<div>CLASS方法：.testcolor:#333333，在頁(yè)面中調(diào)用<div class="

6、test">內(nèi)容<div>id一個(gè)頁(yè)面只可以使用一次，class可以多次引用。我在頁(yè)面中用了多個(gè)相同id在瀏覽中顯示也正常，id和class好象沒(méi)什么區(qū)別，似乎多個(gè)相同id對(duì)頁(yè)面也有什么影響嘛！但是當(dāng)你需要用JavaScript或其他腳本通過(guò)id來(lái)控制這個(gè)Box，那就會(huì)出現(xiàn)錯(cuò)誤。且頁(yè)面存在多個(gè)相同的ID不能通過(guò)W3的校驗(yàn)。id是一個(gè)標(biāo)簽，用于區(qū)分不同的結(jié)構(gòu)和內(nèi)容，就象你的名字，如果一個(gè)屋子有2個(gè)人同名，就會(huì)出現(xiàn)混淆；class是一個(gè)樣式，可以套在任何結(jié)構(gòu)和內(nèi)容上，就象一件衣服；概念上說(shuō)就是不一樣的：id是先找到結(jié)構(gòu)/內(nèi)容，再給它定義樣式；class是先定義好一種樣式

7、，再套給多個(gè)結(jié)構(gòu)/內(nèi)容。也就是說(shuō)建議大家在寫XHML+CSS時(shí)如果是維一的結(jié)構(gòu)定位的就用id，否則就用class吧（這樣讓出非結(jié)構(gòu)定位的div塊的id讓程序員自己定義使用）web標(biāo)準(zhǔn)希望大家用嚴(yán)格的習(xí)慣來(lái)寫代碼。三、使用css縮寫 使用縮寫可以幫助減少你CSS文件的大小，更加容易閱讀。常用的css縮寫的主要規(guī)則：顏色16進(jìn)制的色彩值，如果每?jī)晌坏闹迪嗤?，可以縮寫一半，例如：#000000可以縮寫為#000;#336699可以縮寫為#369;盒模型尺寸通常有下面四種書寫方法:property:value1; 表示所有邊都是一個(gè)值value1；property:value1 value2; 表示t

8、op和bottom的值是value1,right和left的值是value2property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3property:value1 value2 value3 value4; 四個(gè)值依次表示top,right,bottom,left方便的記憶方法是順時(shí)針，上右下左。具體應(yīng)用在margin和padding的例子如下：margin:1px 0 2px 5px;邊框(border)邊框的屬性如下：border-width:1px;border-style:soli

9、d;border-color:#000;可以縮寫為一句：border:1px solid #000;語(yǔ)法是border:width style color;背景(Backgrounds)背景的屬性如下：background-color:#f00;background-image:url(background.gif);background-repeat:no-repeat;background-attachment:fixed;background-position:0 0;可以縮寫為一句：background:#f00 url(background.gif) no-repeat fixed

10、0 0;語(yǔ)法是background:color image repeat attachment position;你可以省略其中一個(gè)或多個(gè)屬性值，如果省略，該屬性值將用瀏覽器默認(rèn)值，默認(rèn)值為：color: transparentimage: nonerepeat: repeatattachment: scrollposition: 0% 0%字體(fonts)字體的屬性如下：font-style:italic;font-variant:small-caps;font-weight:bold;font-size:1em;line-height:140%;font-family:"Luc

11、ida Grande",sans-serif;可以縮寫為一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;注意，如果你縮寫字體定義，至少要定義font-size和font-family兩個(gè)值。列表(lists)取消默認(rèn)的圓點(diǎn)和序號(hào)可以這樣寫list-style:none;list的屬性如下:list-style-type:square;list-style-position:inside;list-style-image:url(image.gif);可以縮寫為一句：list-st

12、yle:square inside url(image.gif);四、明確定義單位，除非值為0 忘記定義尺寸的單位是CSS新手普遍的錯(cuò)誤。在HTML中你可以只寫width=100，但是在CSS中，你必須給一個(gè)準(zhǔn)確的單位，比如：width:100px width:100em。只有兩個(gè)例外情況可以不定義單位：行高和0值。除此以外，其他值都必須緊跟單位，注意，不要在數(shù)值和單位之間加空格。五、區(qū)分大小寫 當(dāng)在XHTML中使用CSS，CSS里定義的元素名稱是區(qū)分大小寫的。為了避免這種錯(cuò)誤，我建議所有的定義名稱都采用小寫。class和id的值在HTML和XHTML中也是區(qū)分大小寫的，如果你一定要大小寫混合

13、寫，請(qǐng)仔細(xì)確認(rèn)你在CSS的定義和XHTML里的標(biāo)簽是一致的。六、取消class和id前的元素限定 當(dāng)你寫給一個(gè)元素定義class或者id，你可以省略前面的元素限定，因?yàn)镮D在一個(gè)頁(yè)面里是唯一的，class可以在頁(yè)面中多次使用。你限定某個(gè)元素毫無(wú)意義。例如：div#id1可以寫成#id1七、默認(rèn)值 通常padding和margin的默認(rèn)值為0，background-color的默認(rèn)值是transparent。但是在不同的瀏覽器默認(rèn)值可能不同。為避免沖突，可以在樣式表一開始就先定義所有元素的margin和padding值都為0，象這樣：* padding:0;margin:0或者是針對(duì)某元素來(lái)定義

14、：body, ul, li, div, span padding:0;margin:0八、CSS的優(yōu)先級(jí) 內(nèi)聯(lián)樣式(inline style) > ID選擇符 > 類選擇符(class), 偽類(pseudo-class)和屬性(attribute)選擇符 > 類別(type)，偽對(duì)象(pseudo-element)解釋：*內(nèi)聯(lián)樣式(inline style)：元素的style屬性，比如 <div style="color:red;"></div> ,其中的color:red;就是內(nèi)聯(lián)樣式*ID選擇符：元素的id屬性，比如 <

15、div id="content"></div> 可以用ID選擇符#content*類選擇符：比如<div class="box"></div>，可以使用類選擇符 .box*偽類(pseudo-class)：最常見(jiàn)的是錨(a)偽類，比如a:link,a:visited.*屬性選擇符(attribute selectors)：比如divclass=demo,含有class為demo的div元素*類別選擇器(type selector)：HTML標(biāo)簽選擇，比如div .demo,div元素下含有class為demo的元

16、素*偽對(duì)象選擇器(pseudo-element selector)：比如div:first-letter,div元素下的第一個(gè)單詞。九、多重CSS樣式定義，屬性追加重復(fù)最后優(yōu)先原則 一個(gè)標(biāo)簽可以同時(shí)定義多個(gè)class，也可以是同一個(gè)class中重復(fù)定義屬性。例如：我們先定義兩個(gè)樣式.onewidth:200px;background:url(images/imgA.jpg) no-repeat left top;.twoborder:10px solid #000; background:url(images/imgB.jpg) no-repeat left top;在頁(yè)面代碼中，我們可以這樣

17、調(diào)用:<div class="one two"></div>這樣最終的顯示效果是這個(gè)div樣式是什么呢？重復(fù)的是以哪一個(gè)為準(zhǔn)呢？<div class="one two"></div>應(yīng)用到的樣式如下：width:200px;border:10px solid #000;background:url(images/imgB.jpg) no-repeat left top;因?yàn)椋?dāng)應(yīng)用兩個(gè)或多個(gè)樣式時(shí)，瀏覽器所應(yīng)用的樣式根據(jù)是屬性追加重復(fù)最后優(yōu)先原則就是說(shuō)兩個(gè)或多個(gè)或重復(fù)的樣式名定義，瀏覽器所應(yīng)用的樣式是按先后順序的，如果定義了重復(fù)的屬性值，以最后定義的為準(zhǔn)，如果應(yīng)用了兩個(gè)或多個(gè)樣式名，里面不重復(fù)定義的屬性值就追加上去，重復(fù)的屬性值就以最后一個(gè)為準(zhǔn)。這里要注意的是，樣式的先后不是根據(jù)頁(yè)面上應(yīng)用的名字順序，而是樣式表里的樣式順序。十、CSS的調(diào)用 頁(yè)面內(nèi)嵌法：就是將樣式表直接寫在頁(yè)面代碼的head區(qū)。類似這樣： <style type="text/css"> <!- body background : white ; color : black ; -> </style>外部調(diào)用法：將樣式表寫在一個(gè)獨(dú)