DIVCSS怎麼命名呢

我們為大家收集整理了關於DIVCSS怎麼命名，以方便大家參考。

1、CSS文件命名規范

全局樣式：global.css;

框架布局：layout.css;

字體樣式：font.css;

鏈接樣式：link.css;

打印樣式：print.css;

2、CSS樣式命名規范

本人建議：用字母、_號工、-號、數字組成，必須以字母開頭，不能為純數字。為了開發後樣式名管理方便，大家請用有意義的單詞或縮寫組合來命名，讓同事一看就明白這樣式大概是哪一塊的，這樣就節省了查找樣式的時間，例如：

頭部樣式用header，頭部左邊，可以用header_left或header_l,還有如果是列結構的可以這樣——box _1of3 (三列中的第一列)，box_2of3 (三列中的第二列)、box _3of3 (三列中的第三列)，其它的我就不一一舉例了，大家按以上規律去命名就好。

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

容 器：container/box

頭 部：header

主 導 航：mainNav

子 導 航：subNav

頂 導 航：topNav

網站標志：logo

大 廣 告：banner

頁面中部：mainBody

底 部：footer

菜 單：menu

菜單內容：menuContent

子 菜 單：subMenu

子菜單內容：subMenuContent

搜 索：search

搜索關鍵字：keyword

搜索范圍：range

標簽文字：tagTitle

標簽內容：tagContent

當前標簽：tagCurrent/currentTag

標　 題：title

內 容：content

列 表：list

當前位置：currentPath

側 邊 欄：sidebar

圖 標：icon

注 釋：note

登 錄：login

注 冊：register

列 定 義：column_1of3 (三列中的第一列)

column_2of3 (三列中的第二列)

column_3of3 (三列中的第三列)

二、id和class的使用及區別

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

ID方法：#test{color:#333333}，在頁面中調用

內容

 

CLASS方法：.test{color:#333333}，在頁面中調用

內容

 

id一個頁面只可以使用一次，class可以多次引用。

我在頁面中用了多個相同id在IE中顯示也正常，id和class好象沒什麼區別，用多個相同id有什麼影響嗎?

頁面存在多個相同的ID影響就是不能通過W3的校驗。

在頁面顯示上，目前的浏覽器還都允許你犯這個錯誤，用多個相同ID“一般情況下”也能正常顯示。但是當你需要用JavaScript通過id來控制這個div，那就會出現錯誤。

id是一個標簽，用於區分不同的結構和內容，就象你的名字，如果一個屋子有2個人同名，就會出現混淆;

class是一個樣式，可以套在任何結構和內容上，就象一件衣服;

概念上說就是不一樣的：

id是先找到結構/內容，再給它定義樣式;class是先定義好一種樣式，再套給多個結構/內容。

也就是說建議大家在寫XHML+CSS時如果是維一的結構定位的就用id，否則就用class吧(這樣讓出非結構定位的div塊的id讓程序員自己定義使用)

web標准希望大家用嚴格的習慣來寫代碼。

三.使用css縮寫

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

顏色

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

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

盒尺寸

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

property:value1; 表示所有邊都是一個值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; 四個值依次表示top,right,bottom,left

方便的記憶方法是順時針，上右下左。具體應用在margin和padding的例子如下：

margin:1em 0 2em 0.5em;

邊框(border)

邊框的屬性如下：

border-width:1px;

border-style:solid;

border-color:#000;

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

語法是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 0 0;

語法是background:color image repeat attachment position;

你可以省略其中一個或多個屬性值，如果省略，該屬性值將用浏覽器默認值，默認值為：

color: transparent

image: none

repeat: repeat

attachment: scroll

position: 0% 0%

字體(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兩個值。

列表(lists)

取消默認的圓點和序號可以這樣寫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);

希望大家可以學會DIVCSS怎麼命名想了解更多精彩內容，請關注我們的網站!

相關推薦：

CSS無效的原因是什麼