DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS基礎入門教程:CSS選擇器規范化命名
CSS基礎入門教程:CSS選擇器規范化命名
編輯:CSS詳解     

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

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

【駱駝命名法】

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

  1. #headerBlock
  2. .navMenuRedButton
【帕斯卡命名法】
這種命名法同樣也是大小寫字母混編而成,和駱駝命名法很像,只有一點區別,就是首字母要大寫,如下
  1. #HeaderBlock
  2. .NavMenuRedButton
【匈牙利命名法】
匈牙利命名法,是需要在名稱前面加上一個或多個小寫字母作為前綴,來讓名稱更加好認,更容易理解,比如:
  1. #head_navigation
  2. .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塊狀元素
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved