DIV+CSS基礎教程：CSS選取器命名及常用命名

規範的命名也是Web標準中的重要一項，標準的命名可以更好的看懂代碼，我想大家應該都有這種經曆，某日翻出自己過去寫的代碼居然看不懂了，呵呵，為了避免這種情況我們就要正常化命名，再說了，現在一個項目不是一個人就可以完成的，是需要大家互相合作的，如果沒有正常化命名，別人就無法看懂你的代碼，大大降低了工作效率，所以必須正常化命名，這樣還顯著咱專業！

好了不多說了，關於CSS命名法，和其他的程式命名差不多，也是有三種：駱駝命名法，帕斯卡命名法，匈牙利命名法。

【駱駝命名法】
說到駱駝大家肯定會想到它那明顯的特徵，背部的隆起，一高一低的，我們的命名也要這樣一高一低，怎麼才能這樣，就用大小寫字母唄~，大寫的英文就相當於駱駝背部的凸起，小寫就是凹下去的地方了，但是這個也是有規則的，就是第一個字母要小寫，後面的詞的第一個字母就要用大寫，如下：

複製內容到剪貼簿

代碼:

#headerBlock

.navMenuRedButton

【帕斯卡命名法】
這種命名法同樣也是大小寫字母混編而成，和駱駝命名法很像，只有一點區別，就是首字母要大寫，如下

複製內容到剪貼簿

代碼:

#HeaderBlock

.NavMenuRedButton

【匈牙利命名法】
匈牙利命名法，是需要在名稱前面加上一個或多個小寫字母作為首碼，來讓名稱更加好認，更容易理解，比如：

複製內容到剪貼簿

代碼:

#head_navigation

.red_navMenuButton

以上三種，前兩種（駱駝命名法、帕斯卡命名法）在命名CSS選取器的時候比較常用，當然這三種命名法可以混合使用，只需要遵守有一個原則就可以，就是“容易理解，容易認，方便協同工作”就OK了，沒有必要強調是那種命名法。

以下為於頁面模組的常用命名

複製內容到剪貼簿

代碼:

頭：header 

內容：content/container

尾：footer

導航：nav

側欄：sidebar

欄目：column

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

左右中：left right center

登入條：loginbar

標誌：logo

廣告：banner

頁面主體：main

熱點：hot

新聞：news

下載：download

子導航：subnav

菜單：menu

子功能表：submenu

搜尋：search

友情連結：friendlink

頁尾：footer

著作權：copyright

滾動：scroll

內容：content

到這節課，都是CSS非常基礎的知識，是為了照顧沒有一點基礎的同學，從下節課開始，將介紹CSS布局頁面中的很重要的兩個概念，也是必須要掌握的概念，如果不能很好理解的話後面再布局頁面的時候就會出現很多問題。

複製內容到剪貼簿

代碼:

1）盒子模型

2）內鏈元素VS塊狀元素

作者:kwoojan   出自:CSS學習論壇