如何命名CSS文件及樣式規(guī)范更利于SEO優(yōu)化

堅(jiān)持使用統(tǒng)一的CSS命名規(guī)則并養(yǎng)成習(xí)慣，可以讓你更容易維護(hù)、修改以前編寫過的CSS代碼，進(jìn)而提高自己的工作效率，而且還能加強(qiáng)搜索引擎的SEO優(yōu)化，方便記憶，那么，我們?nèi)绾尾拍軐SS的命名做得井井有條呢？

在安溪等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供網(wǎng)站制作、成都網(wǎng)站制作 網(wǎng)站設(shè)計(jì)制作按需網(wǎng)站制作,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站設(shè)計(jì),營銷型網(wǎng)站建設(shè),外貿(mào)網(wǎng)站制作,安溪網(wǎng)站建設(shè)費(fèi)用合理。

1、CSS文件及樣式命名

首先，先為大家展示一些CSS文件及樣式的命名樣例，因?yàn)檫@些名稱能使大家立馬明白定義的文件，具體如下所示：

（1）、CSS文件命名規(guī)范

全局樣式：global.css

框架布局：layout.css

字體樣式：font.css

鏈接樣式：link.css

打印樣式：print.css

主要的：master.css

專欄：columns.css

主題：themes.css

（2）、CSS樣式命名規(guī)范

對于CSS樣式的命名規(guī)則，建議用字母、_號工、-號、數(shù)字組成，必須以字母開頭，不能為純數(shù)字，為了開發(fā)后樣式名管理方便，大家請用有意義的單詞或縮寫組合來命名，讓同事一看就明白這樣式大概是哪一塊的，這樣就節(jié)省了查找樣式的時(shí)間。

例如：頭部樣式用header，頭部左邊，可以用header_left或header_l，還有如果是列結(jié)構(gòu)的可以這樣——box_1of3 (三列中的第一列)，box_2of3 (三列中的第二列)、box_3of3 (三列中的第三列)，其它的我就不一一舉例了，大家按以上規(guī)律去命名就好。

下面列出一些常用的命名單詞方便大家使用（以后大家工作過程中慢慢把自己積累的單詞都共享出來，那大家的命就會(huì)更加統(tǒng)一了，就不會(huì)有一義多詞的情況了）：

容器：container/box

頭部：header

主導(dǎo)航：mainNav

子導(dǎo)航：subNav

頂導(dǎo)航：topNav

邊導(dǎo)航：sidebar

左導(dǎo)航：leftsideBar

右導(dǎo)航:rightsideBar

網(wǎng)站標(biāo)志：logo

大廣告：banner

頁面中部：mainBody

整個(gè)頁面：content

底部：footer

菜單：menu

菜單內(nèi)容：menuContent

子菜單：subMenu

子菜單內(nèi)容：subMenuContent

搜索：search

搜索關(guān)鍵字：keyword

搜索范圍：range

標(biāo)簽文字：tagTitle

標(biāo)簽內(nèi)容：tagContent

當(dāng)前標(biāo)簽：tagCurrent/currentTag

標(biāo)題：title

內(nèi)容：content

列表：list

當(dāng)前位置：currentPath

側(cè)邊欄：sidebar

圖標(biāo)：icon

注釋：note

登錄：login

注冊：register

面包屑：breadCrumb(即頁面所處位置導(dǎo)航提示)

列定義：column_1of3 (三列中的第一列)、column_2of3 (三列中的第二列)、column_3of3 (三列中的第三列)

2、CSS的優(yōu)先級

行內(nèi)樣式(inline style) ID選擇符 樣式(class)、偽類(pseudo-class)和屬性(attribute)選擇符 類別(type)，偽對象(pseudo-element)。

博客注解：

*內(nèi)聯(lián)樣式(inline style)：元素的style屬性，比如 div style="color:red;"/div，其中的color:red;就是行內(nèi)樣式。

*ID選擇符：元素的id屬性，比如div/div可以用ID選擇符#content

*偽類(pseudo-class)：最常見的是錨(a)偽類，比如a:link,a:visited.

*屬性選擇符(attribute selectors)：比如div[class=demo],含有class為demo的div元素。

*類別選擇器(type selector)：HTML標(biāo)簽選擇，比如div .demo,div元素下含有class為demo的元素。

*偽對象選擇器(pseudo-element selector)：比如div:first-letter,div元素下的第一個(gè)單詞。

3、默認(rèn)值

通常padding和margin的默認(rèn)值為0，background-color的默認(rèn)值是transparent，但是在不同的瀏覽器默認(rèn)值可能不同。

如果怕有沖突，可以在樣式表一開始就先定義所有元素的margin和padding值都為0，例如：

* {

padding:0;

margin:0

}

或者是針對某元素來定義：

ul,li,div,span {

padding:0;

margin:0

}

4、不要重復(fù)定義可繼承的值

CSS中，子元素自動(dòng)繼承父元素的屬性值，象顏色、字體等，已經(jīng)在父元素中定義過的，在子元素中可以直接繼承，不需要重復(fù)定義。

除非是為了更變當(dāng)前元素樣式不使用父元素的屬性值，但是要注意，瀏覽器可能用一些默認(rèn)值覆蓋你的定義。

5、CSS代碼書寫樣式

在寫CSS代碼的時(shí)候，對于縮進(jìn)、斷行、空格，每個(gè)人有每個(gè)人的書寫習(xí)慣，在經(jīng)過不斷實(shí)踐后，我決定采用下面這樣的書寫樣式：

.classname {

width:100px;

}

當(dāng)使用聯(lián)合定義時(shí)，我通常將每個(gè)選擇器單獨(dú)寫一行，這樣方便在CSS文件中找到它們，在最后一個(gè)選擇器和大括號之間加一個(gè)空格，每個(gè)定義也單獨(dú)寫一行，分號直接在屬性值后，不要加空格。

我習(xí)慣在每個(gè)屬性值后面都加分號，雖然規(guī)則上允許最后一個(gè)屬性值后面可以不寫分號，但是如果你要加新樣式時(shí)容易忘記補(bǔ)上分號而產(chǎn)生錯(cuò)誤，所以還是都加比較好，最后，關(guān)閉的大括號單獨(dú)寫一行，這樣的空格和換行有助與閱讀

6、使用css縮寫

使用縮寫可以幫助減少你CSS文件的大小，更加容易閱讀，常用的css縮寫的主要規(guī)則有：

（1）、顏色

16進(jìn)制的色彩值，如果每兩位的值相同，可以縮寫一半，例如：

#000000可以縮寫為#000;#336699可以縮寫為#369;

（2）、盒尺寸

通常有下面四種書寫方法:

property:value1; 表示所有邊都是一個(gè)值value1

property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2

property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3

property:value1 value2 value3 value4; 四個(gè)值依次表示top,right,bottom,left

方便的記憶方法是順時(shí)針，上右下左，具體應(yīng)用在margin和padding的例子如下：

margin:1em 0 2em 0.5em;

（3）、邊框(border)

邊框的屬性如下：

border-width:1px;

border-style:solid;

border-color:#000;

可以縮寫為一句：border:1px solid #000;

語法是：border:width style color;

（4）、背景(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 0 0;

語法是：background:color image repeat attachment position;

你可以省略其中一個(gè)或多個(gè)屬性值，如果省略，該屬性值將用瀏覽器默認(rèn)值，默認(rèn)值為：

color: transparent

image: none

repeat: repeat

attachment: scroll

position: 0% 0%

（5）、字體(fonts)

字體的屬性如下：

font-style:italic;

font-variant:small-caps;

font-weight:bold;

font-size:1em;

line-height:140%;

font-family:"Lucida Grande",sans-serif;

可以縮寫為一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

提示：如果你縮寫字體定義，至少要定義font-size和font-family兩個(gè)值。

（6）、列表(lists)

取消默認(rèn)的圓點(diǎn)和序號可以這樣寫list-style:none;

list的屬性如下:

list-style-type:square;

list-style-position:inside;

list-style-image:url(image.gif);

可以縮寫為一句：list-style:square inside url(image.gif);

7、多重CSS樣式定義，屬性追加重復(fù)最后優(yōu)先原則

一個(gè)標(biāo)簽可以同時(shí)定義多個(gè)class，也可以是同一個(gè)class中重復(fù)定義屬性，例如：

我們先定義兩個(gè)樣式：

.one{width:200px;background:url() no-repeat left top;}

.two{border:10px solid #000; background:url() no-repeat left top;}

在頁面代碼中，我們可以這樣調(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() no-repeat left top;

因?yàn)椋?dāng)應(yīng)用兩個(gè)或多個(gè)樣式時(shí)，瀏覽器所應(yīng)用的樣式根據(jù)是屬性追加重復(fù)最后優(yōu)先原則。

就是說兩個(gè)或多個(gè)或重復(fù)的樣式名定義，瀏覽器所應(yīng)用的樣式是按先后順序的，如果定義了重復(fù)的屬性值，以最后定義的為準(zhǔn)，如果應(yīng)用了兩個(gè)或多個(gè)樣式名，里面不重復(fù)定義的屬性值就追加上去，重復(fù)的屬性值就以最后一個(gè)為準(zhǔn)。

這里要注意的是，樣式的先后不是根據(jù)頁面上應(yīng)用的名字順序，而是樣式表里的樣式順序。

8、導(dǎo)入(Import)和隱藏CSS

因?yàn)槔习姹緸g覽器不支持CSS，一個(gè)通常的做法是使用@import技巧來把CSS隱藏起來，例如：

@import url(main.css);

然而，這個(gè)方法對IE4不起作用，這讓我很是頭疼了一陣子，后來我用這樣的寫法：

@import main.css;

這樣就可以在IE中也隱藏CSS了，呵呵，還節(jié)省了5個(gè)字節(jié)呢！

9、CSS hack

有些時(shí)候，你需要對IE瀏覽器的bug定義一些特別的規(guī)則，這里有太多的CSS技巧(hacks)，我只使用其中的兩種方法，不管微軟在即將發(fā)布的IE版里是否更好的支持CSS，這兩種方法都是最安全的。

（1）、注釋的方法

a、在IE中隱藏一個(gè)CSS定義，你可以使用子選擇器(child selector):

htmlbody p {

}

b、下面這個(gè)寫法只有IE瀏覽器可以理解(對其他瀏覽器都隱藏)

* html p {

}

c、還有些時(shí)候，你希望IE/Win有效而IE/Mac隱藏，你可以使用反斜線技巧：

* html p {

declarations

}

d、下面這個(gè)寫法只有IE7瀏覽器可以理解(對其他瀏覽器都隱藏)

*+ html p {

}

（2）、條件注釋(conditional comments)的方法

另外一種方法，我認(rèn)為比CSS Hacks更加經(jīng)得起考驗(yàn)就是采用微軟的私有屬性條件注釋，用這個(gè)方法你可以給IE單獨(dú)定義一些樣式，而不影響主樣式表的定義，就像這樣：

!--[if IE]

link rel=stylesheet/css href="" /

![endif]--

還有更多的CSS hack大家可以通過網(wǎng)上找找，但是有很多hack都是不符合w3c標(biāo)準(zhǔn)的，根據(jù)以上的hack寫了一個(gè)能區(qū)分IE6、IE7、FF的樣式，而且可以符合w3c標(biāo)準(zhǔn)，代碼如下：

.classname {width:90px!important;width:100px;}

*+html .classname {width:95px!important;}

這樣寫后在IE6下寬是100px，IE7下是95px，火狐下是90px。

10、明確定義單位，除非值為0

忘記定義尺寸的單位是CSS新手普遍的錯(cuò)誤，在HTML中你可以只寫width=100，但是在CSS中，你必須給一個(gè)準(zhǔn)確的單位，比如：width:100px width:100em。

只有兩個(gè)例外情況可以不定義單位：行高和0值，除此以外，其他值都必須緊跟單位，注意，不要在數(shù)值和單位之間加空格。

11、區(qū)分大小寫

當(dāng)在XHTML中使用CSS，CSS里定義的元素名稱是區(qū)分大小寫的，為了避免這種錯(cuò)誤，建議大家將所有的定義名稱都采用小寫。

class和id的值在HTML和XHTML中也是區(qū)分大小寫的，如果你一定要大小寫混合寫，請仔細(xì)確認(rèn)你在CSS的定義和XHTML里的標(biāo)簽是一致的。

12、id和class的使用及區(qū)別

我們知道在樣式表定義一個(gè)樣式的時(shí)候，可以定義id，也可以定義class，例如：

ID方法：#test{color:#333333}，在頁面中調(diào)用div內(nèi)容div

CLASS方法：.test{color:#333333}，在頁面中調(diào)用div class="test"內(nèi)容div

一般來說，id是一個(gè)頁面只可以使用一次，class是可以多次引用的。

可我在頁面中用了多個(gè)相同id在IE中顯示也正常，id和class好象沒什么區(qū)別，用多個(gè)相同id有什么影響嗎？

頁面存在多個(gè)相同的ID影響就是不能通過W3的校驗(yàn)，在頁面顯示上，目前的瀏覽器還都允許你犯這個(gè)錯(cuò)誤，用多個(gè)相同ID“一般情況下”也能正常顯示，但是當(dāng)你需要用JavaScript通過id來控制這個(gè)div，那就會(huì)出現(xiàn)錯(cuò)誤。

id是一個(gè)標(biāo)簽，用于區(qū)分不同的結(jié)構(gòu)和內(nèi)容，就象你的名字，如果一個(gè)屋子有2個(gè)人同名，就會(huì)出現(xiàn)混淆。

class是一個(gè)樣式，可以套在任何結(jié)構(gòu)和內(nèi)容上，就象一件衣服。

從概念上來說：id是先找到結(jié)構(gòu)/內(nèi)容，再給它定義樣式；class是先定義好一種樣式，再套給多個(gè)結(jié)構(gòu)/內(nèi)容。

對此，建議大家在寫XHML+CSS時(shí)如果是維一的結(jié)構(gòu)定位的就用id，否則就用class吧（這樣讓出非結(jié)構(gòu)定位的div塊的id讓程序員自己定義使用）！

13、取消class和id前的元素限定

當(dāng)你寫給一個(gè)元素定義class或者id，你可以省略前面的元素限定，因?yàn)镮D在一個(gè)頁面里是唯一的，class可以在頁面中多次使用，在看來，你限定某個(gè)元素是毫無意義的，例如：

div#id1{}可以寫成#id1{}

這樣可以節(jié)省一些字節(jié)。

14、使用子選擇器(descendant selectors)

使用子選擇器是影響他們效率的原因之一，子選擇器可以幫助你節(jié)約大量的class定義，我們來看下面這段代碼：

div

ul

li class="subnavitem" a href="" class="subnavitem"SEO/a/li

li class="subnavitemselected" a href="" class="subnavitemselected"SEO/a /li

li class="subnavitem" a href="" class="subnavitem"SEO/a /li

/ul

/div

這段代碼的CSS定義是：

div#subnav ul { }

div#subnav ul li.subnavitem { }

div#subnav ul li.subnavitem a.subnavitem { }

div#subnav ul li.subnavitemselected { }

div#subnav ul li.subnavitemselected a.subnavitemselected { }

你可以用下面的方法替代上面的代碼：

ul id=”subnav”

li a href=""SEO/a /li

li class="sel" a href=""SEO/a /li

li a href=""SEO/a /li

/ul

樣式定義是：

#subnav { }

#subnav li { }

#subnav a { }

#subnav .sel { }

#subnav .sel a { }

用子選擇器可以使你的代碼和CSS更加簡潔、更加容易閱讀。

如果一個(gè)容器里有多個(gè)同樣的元素，而且這些元素樣式都不一樣，請避免用這個(gè)方式，建以大家可以采用不同的class如：

ul class=”one”li/li/ul

ul class=”tow”li/li/ul

15、不需要給背景圖片路徑加引號

為了節(jié)省字節(jié)，建議不要給背景圖片路徑加引號，因?yàn)橐柌皇潜仨毜模纾?/p>

background-image:url(images

margin:0 auto;

}

但是IE5/Win不能正確顯示這個(gè)定義，我們采用一個(gè)非常有用的技巧來解決：用text-align屬性，就像這樣：

body {

text-align:center;

}

#wrap {

width:760px;

margin:0 auto;

text-align:left;

}

第一個(gè)body的text-align:center;規(guī)則定義IE5/Win中body的所有元素居中(其他瀏覽器只是將文字居中) ，第二個(gè)text-align:left;是將#warp中的文字居左。

16、層占據(jù)的空間

當(dāng)調(diào)試CSS發(fā)生錯(cuò)誤，你就要像排版工人，逐行分析CSS代碼，我通常在出問題的層上定義一個(gè)背景顏色，這樣就能很明顯看到層占據(jù)多大空間？

有些人建議用border，一般情況也是可以的，但問題是，有時(shí)候border會(huì)增加元素的尺寸，border-top和boeder-bottom破壞縱向margin的值，所以使用background更加安全些（更多的介紹，

在css樣式中類的名稱是以什么開頭的

類名叫class，以“.”開頭，如.aa；

id以“#”開頭，如#main；

怎樣給css樣式命名

你不如Baidu或Google一下，網(wǎng)上的教程及資源多得是。

在這里問，回答也是有限的。

1.CSS ID 的命名

外 套： wrap

主導(dǎo)航： mainnav

子導(dǎo)航： subnav

頁 腳： footet

整個(gè)頁面： content

頁 眉： header

頁 腳： footer

商 標(biāo)： label

標(biāo) 題： title

主導(dǎo)航： mainbav（globalnav）

頂導(dǎo)航： topnav

邊導(dǎo)航： sidebar

左導(dǎo)航： leftsidebar

右導(dǎo)航： rightsidebar

旗 志： logo

標(biāo) 語： banner

菜單內(nèi)容1： menu1 content

菜單容量： menu container

子菜單： submenu

邊導(dǎo)航圖標(biāo)：sidebarIcon

注釋： note

面包屑： breadcrumb(即頁面所處位置導(dǎo)航提示）

容器： container

內(nèi)容： content

搜索： search

登陸： Login

功能區(qū)： shop(如購物車，收銀臺)

當(dāng)前的 current

2.另外在編輯樣式表時(shí)可用的注釋可這樣寫：

-- Footer --

內(nèi)容區(qū)

-- End Footer --

3.樣式文件命名

主要的 master.css

布局，版面 layout.css

專欄 columns.css

文字 font.css

打印樣式 print.css

主題 themes.css

css命名規(guī)則

CSS書寫順序

1.位置屬性(position, top, right, z-index, display, float等)

2.大小(width, height, padding, margin)

3.文字系列(font, line-height, letter-spacing, color- text-align等)

4.背景(background, border等)

5.其他(animation, transition等)

CSS書寫規(guī)范使用CSS縮寫屬性

CSS有些屬性是可以縮寫的，比如padding,margin,font等等，這樣精簡代碼同時(shí)又能提高用戶的閱讀體驗(yàn)。

去掉小數(shù)點(diǎn)前的“0”

簡寫命名

很多用戶都喜歡簡寫類名，但前提是要讓人看懂你的命名才能簡寫哦!

16進(jìn)制顏色代碼縮寫

有些顏色代碼是可以縮寫的，我們就盡量縮寫吧，提高用戶體驗(yàn)為主。

連字符CSS選擇器命名規(guī)范

1.長名稱或詞組可以使用中橫線來為選擇器命名。

2.不建議使用“_”下劃線來命名CSS選擇器，為什么呢?

輸入的時(shí)候少按一個(gè)shift鍵;

瀏覽器兼容問題 (比如使用_tips的選擇器命名，在IE6是無效的)

能良好區(qū)分JavaScript變量命名(JS變量命名是用“_”)

不要隨意使用Id

id在JS是唯一的，不能多次使用，而使用class類選擇器卻可以重復(fù)使用，另外id的優(yōu)先級優(yōu)先與class，所以id應(yīng)該按需使用，而不能濫用。　

為選擇器添加狀態(tài)前綴

有時(shí)候可以給選擇器添加一個(gè)表示狀態(tài)的前綴，讓語義更明了，比如下圖是添加了“.is-”前綴。

CSS命名規(guī)范(規(guī)則)常用的CSS命名規(guī)則

頭：header

內(nèi)容：content/container

尾：footer

導(dǎo)航：nav

側(cè)欄：sidebar

欄目：column

頁面外圍控制整體布局寬度：wrapper

左右中：left right center

登錄條：loginbar

標(biāo)志：logo

廣告：banner

頁面主體：main

熱點(diǎn)：hot

新聞：news

下載：download

子導(dǎo)航：subnav

菜單：menu

子菜單：submenu

搜索：search

友情鏈接：friendlink

頁腳：footer

版權(quán)：copyright

滾動(dòng)：scroll

內(nèi)容：content

標(biāo)簽：tags

文章列表：list

提示信息：msg

小技巧：tips

欄目標(biāo)題：title

加入：joinus

指南：guide

服務(wù)：service

注冊：regsiter

狀態(tài)：status

投票：vote

合作伙伴：partner

注釋的寫法:

/* Header */

內(nèi)容區(qū)

/* End Header */

Id的命名:

1)頁面結(jié)構(gòu)

容器: container

頁頭：header

內(nèi)容：content/container

頁面主體：main

頁尾：footer

導(dǎo)航：nav

側(cè)欄：sidebar

欄目：column

頁面外圍控制整體布局寬度：wrapper

左右中：left right center

(2)導(dǎo)航

導(dǎo)航：nav

主導(dǎo)航：mainnav

子導(dǎo)航：subnav

頂導(dǎo)航：topnav

邊導(dǎo)航：sidebar

左導(dǎo)航：leftsidebar

右導(dǎo)航：rightsidebar

菜單：menu

子菜單：submenu

標(biāo)題: title

摘要: summary

(3)功能

標(biāo)志：logo

廣告：banner

登陸：login

登錄條：loginbar

注冊：register

搜索：search

功能區(qū)：shop

標(biāo)題：title

加入：joinus

狀態(tài)：status

按鈕：btn

滾動(dòng)：scroll

標(biāo)簽頁：tab

文章列表：list

提示信息：msg

當(dāng)前的: current

小技巧：tips

圖標(biāo): icon

注釋：note

指南：guild

服務(wù)：service

熱點(diǎn)：hot

新聞：news

下載：download

投票：vote

合作伙伴：partner

友情鏈接：link

版權(quán)：copyright

注意事項(xiàng)::

1.一律小寫;

2.盡量用英文;

3.不加中槓和下劃線;

4.盡量不縮寫，除非一看就明白的單詞。

CSS樣式表文件命名

主要的 master.css

模塊 module.css

基本共用 base.css

布局、版面 layout.css

主題 themes.css

專欄 columns.css

文字 font.css

表單 forms.css

補(bǔ)丁 mend.css

打印 print.css

怎么給CSS命名

常用的CSS命名規(guī)則

頭：header

內(nèi)容：content/container

尾：footer

導(dǎo)航：nav

側(cè)欄：sidebar

欄目：column

頁面外圍控制整體布局寬度：wrapper

左右中：left right center

登錄條：loginbar

標(biāo)志：logo

廣告：banner

頁面主體：main

熱點(diǎn)：hot

新聞：news

下載：download

子導(dǎo)航：subnav

菜單：menu

子菜單：submenu

搜索：search

友情鏈接：friendlink

頁腳：footer

版權(quán)：copyright

滾動(dòng)：scroll

內(nèi)容：content

標(biāo)簽頁：tab

文章列表：list

提示信息：msg

小技巧：tips

欄目標(biāo)題：title

加入：joinus

指南：guild

服務(wù)：service

注冊：regsiter

狀態(tài)：status

投票：vote

合作伙伴：partner

(二)注釋的寫法:

/* Footer */

內(nèi)容區(qū)

/* End Footer */

(三)id的命名:

(1)頁面結(jié)構(gòu)

容器: container

頁頭：header

內(nèi)容：content/container

頁面主體：main

頁尾：footer

導(dǎo)航：nav

側(cè)欄：sidebar

欄目：column

頁面外圍控制整體布局寬度：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

菜單：menu

子菜單：submenu

標(biāo)題: title

摘要: summary

(3)功能

標(biāo)志：logo

廣告：banner

登陸：login

登錄條：loginbar

注冊：regsiter

搜索：search

功能區(qū)：shop

標(biāo)題：title

加入：joinus

狀態(tài)：status

按鈕：btn

滾動(dòng)：scroll

標(biāo)簽頁：tab

文章列表：list

提示信息：msg

當(dāng)前的: current

小技巧：tips

圖標(biāo): icon

注釋：note

指南：guild

服務(wù)：service

熱點(diǎn)：hot

新聞：news

下載：download

投票：vote

合作伙伴：partner

友情鏈接：link

版權(quán)：copyright

(四)class的命名:

(1)顏色:使用顏色的名稱或者16進(jìn)制代碼,如

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

(2)字體大小,直接使用"font+字體大小"作為名稱,如

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

(3)對齊樣式,使用對齊目標(biāo)的英文名稱,如

.left { float:left; }

.bottom { float:bottom; }

(4)標(biāo)題欄樣式,使用"類別+功能"的方式命名,如

.barnews { }

.barproduct { }

注意事項(xiàng)::

1.一律小寫;

2.盡量用英文;

3.不加中杠和下劃線;

4.盡量不縮寫，除非一看就明白的單詞.

主要的 master.css

模塊 module.css

基本共用 base.css

布局，版面 layout.css

主題 themes.css

專欄 columns.css

文字 font.css

表單 forms.css

補(bǔ)丁 mend.css

打印 print.css

應(yīng)如何給css樣式表規(guī)范的命名

你不如Baidu或Google一下，網(wǎng)上的教程及資源多得是。

在這里問，回答也是有限的。

1.CSS ID 的命名

外 套： wrap

主導(dǎo)航： mainnav

子導(dǎo)航： subnav

頁 腳： footet

整個(gè)頁面： content

頁 眉： header

頁 腳： footer

商 標(biāo)： label

標(biāo) 題： title

主導(dǎo)航： mainbav（globalnav）

頂導(dǎo)航： topnav

邊導(dǎo)航： sidebar

左導(dǎo)航： leftsidebar

右導(dǎo)航： rightsidebar

旗 志： logo

標(biāo) 語： banner

菜單內(nèi)容1： menu1 content

菜單容量： menu container

子菜單： submenu

邊導(dǎo)航圖標(biāo)：sidebarIcon

注釋： note

面包屑： breadcrumb(即頁面所處位置導(dǎo)航提示）

容器： container

內(nèi)容： content

搜索： search

登陸： Login

功能區(qū)： shop(如購物車，收銀臺)

當(dāng)前的 current

2.另外在編輯樣式表時(shí)可用的注釋可這樣寫：

-- Footer --

內(nèi)容區(qū)

-- End Footer --

3.樣式文件命名

主要的 master.css

布局，版面 layout.css

專欄 columns.css

文字 font.css

打印樣式 print.css

主題 themes.css

網(wǎng)頁名稱：css樣式類的命名,css樣式定義
瀏覽路徑：http://chinadenli.net/article9/dsgpsoh.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、域名注冊、網(wǎng)站內(nèi)鏈、靜態(tài)網(wǎng)站、網(wǎng)站建設(shè)、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)