div+css命名參考
- 作者：創(chuàng)新互聯(lián) 文章來源：前端開發(fā)部 點(diǎn)擊數(shù)：
更新時(shí)間：2013-07-31
- 用了一段CSS 布局設(shè)計(jì)網(wǎng)頁,發(fā)現(xiàn)自己的命名有點(diǎn)混亂,完全按照自己的想法命名,雖然沒什么影響,有不給別人看源文件,但是工作室有時(shí)候和團(tuán)隊(duì)合作完成項(xiàng)目的時(shí)候,就遇到麻煩了,要修改一個(gè)地方相當(dāng)?shù)馁M(fèi)事.所以還是有個(gè)標(biāo)準(zhǔn)比較好啊!
在網(wǎng)上看到的一個(gè)相關(guān)的參考,再加上平時(shí)也研究別人的代碼,發(fā)現(xiàn)這樣的命名使用很廣泛!我再加上自己的經(jīng)驗(yàn),希望對(duì)看到這篇文章的人能有用!
命名參考
常用的CSS命名規(guī)則：
頭：header
內(nèi)容：content/container
尾：footer
導(dǎo)航：nav
側(cè)欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center
命名全部使用小寫字母，如果需要多個(gè)單詞，單詞間使用“-”分隔，比如user-list
常用代碼結(jié)構(gòu)：
div：主要用于布局，分割頁面的結(jié)構(gòu)
ul/ol：用于無序/有序列表
span：沒有特殊的意義，可以用作排版的輔助，例如
-
(4.23)天幻網(wǎng)六周年天幻網(wǎng)六周年天幻網(wǎng)六周年天幻網(wǎng)六
然后在css中定義span為右浮動(dòng)，實(shí)現(xiàn)了日期和標(biāo)題分兩側(cè)顯示的效果
h1-h6：標(biāo)題
h1-h6 根據(jù)重要性依次遞減
h1位最重要的標(biāo)題
label：為了使你的表單更有親和力而且還能輔助表單排版的好東西，例如：
fieldset & legend：fildset套在表單外，legend用于描述表單內(nèi)容。例如：
dl,dt,dd：當(dāng)頁面中出現(xiàn)第一行為類似標(biāo)題/簡(jiǎn)述，然后下面為詳細(xì)描述的內(nèi)容時(shí)應(yīng)該使用該標(biāo)簽，例如
-
什么是CSS?
-
CSS就是一種叫做樣式表（stylesheet）的技術(shù)。也有的人稱之為層疊樣式表（Cascading Stylesheet）。
-
-
什么是XHTML？
-
XHTML是一個(gè)基于XML的置標(biāo)語言，看起來與HTML有些想像，只有一些小的但重要的區(qū)別�？梢赃@樣看，XHTML就是一個(gè)扮演著類似HTML的角色的XML。 本質(zhì)上說，XHTML是一個(gè)橋接（過渡）技術(shù)，結(jié)合了XML（有幾分）的強(qiáng)大功能及HTML（大多數(shù)）的簡(jiǎn)單特性。
C #content
S #subcol
M #maincol
X #xcol
這是縱向布局的XHTML結(jié)構(gòu)，c-smx表示網(wǎng)頁有三個(gè)縱欄, c-sm表示有兩個(gè)縱欄, c-mx表示有兩個(gè)縱欄其中一個(gè)是附屬的, c-m表示一個(gè)縱欄。
其中在三縱欄的布局需要分為兩層 第一層是#subcol與#main第二層是#main中的#maincol與#xcol。
自定義命名：
根據(jù)w3c網(wǎng)站上給出的,最好是用意義命名
比如：是重要的新聞高亮顯示（像紅色）
有兩種
.red{color:red}
.important-news{color:red}
很顯然第二種傳達(dá)的意義更加明確,所以盡量不要用意義不明確的作為自己自定義的名字
CSS網(wǎng)頁技術(shù)基本語法 :上一篇
IE6.0、IE7.0 與FireFox CSS兼容的解決方法 :下一篇
