DIV CSS命名規(guī)范/DIV+CSS命名規(guī)則-DIV CSS命名規(guī)則
div css命名規(guī)范,div css 命名,div css規(guī)則整理,css命名規(guī)則,css樣式命名規(guī)則
什么是DIV+CSS 網(wǎng)頁(yè)重構(gòu)?
DIV+CSS是網(wǎng)站標(biāo)準(zhǔn)（或稱“WEB標(biāo)準(zhǔn)”）中常用術(shù)語(yǔ)之一，通常為了說(shuō)明與HTML網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言中的表格（table）定位方式的區(qū)別，因?yàn)閄HTML網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)，而是采用DIV+CSS的方式實(shí)現(xiàn)各種定位。
CSS是英語(yǔ)Cascading Style Sheets（層疊樣式表單）的縮寫，它是一種用來(lái)表現(xiàn) HTML 或 XML 等文件式樣的計(jì)算機(jī)語(yǔ)言。
HTML語(yǔ)言自HTML4.01以來(lái)，不再發(fā)布新版本，原因就在于HTML語(yǔ)言正變得越來(lái)越復(fù)雜化、專用化。即標(biāo)記越來(lái)越多，甚至各個(gè)瀏覽器生產(chǎn)商也開發(fā)出只適合于其特定瀏覽器的HTML標(biāo)記，這顯然有礙于HTML網(wǎng)頁(yè)的兼容性。于是W3C組織進(jìn)而重新從SGML中獲取營(yíng)養(yǎng)，隨后，發(fā)布了XML，XML是一種比HTML更加嚴(yán)格的標(biāo)記語(yǔ)言，全稱是可擴(kuò)展標(biāo)記語(yǔ)言（EXtensible Markup Language http://www.seoyouhua.net/）。但是XML過于復(fù)雜，且當(dāng)前的大部分瀏覽器都不完全支持XML。于是XHTML這種語(yǔ)言就派上了用場(chǎng)，XHTML語(yǔ)言就是一種可以將HTML語(yǔ)言標(biāo)準(zhǔn)化，用XHTML語(yǔ)言重寫后的HTML頁(yè)面可以應(yīng)用許多XML應(yīng)用技術(shù)。使得網(wǎng)頁(yè)更加容易擴(kuò)展，適合自動(dòng)數(shù)據(jù)交換，并且更加規(guī)整。說(shuō)了這么多，現(xiàn)在該說(shuō)正題了——CSS。其實(shí)CSS單獨(dú)使用除了麻煩一點(diǎn)之外，我個(gè)人覺得并無(wú)明顯的優(yōu)于HTML的好處。而關(guān)鍵就在于其與腳本語(yǔ)言（如Javascript）及XML技術(shù)的融合，即CSS+Javascript+XML（實(shí)際上有一種更好的融合：XML+XSL+Javascript）——但XSL，即可擴(kuò)展樣式表語(yǔ)言相較于CSS過于復(fù)雜，不太容易上手。自從CSS出現(xiàn)之后，HTML終于擺脫了雜亂無(wú)章的惡夢(mèng)，開始將頁(yè)面內(nèi)容與樣式分離。說(shuō)了這么多，其實(shí)，個(gè)中真諦，還得使用過后才知道，所以，現(xiàn)在就開始學(xué)習(xí)使用吧。
DIV元素是用來(lái)為HTML文檔內(nèi)大塊（block-level）的內(nèi)容提供結(jié)構(gòu)和背景的元素。DIV的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來(lái)構(gòu)成這個(gè)塊的，其中所包含元素的特性由DIV標(biāo)簽的屬性來(lái)控制，或者是通過使用樣式表格式化這個(gè)塊來(lái)進(jìn)行控制。
在可以預(yù)計(jì)的將來(lái)，table的地位依然十分重要，于是，如google之流依然會(huì)生意興隆。但是div代表的是網(wǎng)絡(luò)世界發(fā)展的方向。它們一個(gè)簡(jiǎn)單，一個(gè)先進(jìn)，蘿卜白菜，您選什么都是有可取只處的．我們都很按您的要求認(rèn)真服務(wù)的！
div是html(超文本語(yǔ)言)中的一個(gè)元素,div+css 是一種網(wǎng)頁(yè)的布局方法,這一種網(wǎng)頁(yè)布局方法有別于傳統(tǒng)的table布局,真正地達(dá)到了w3c內(nèi)容與表現(xiàn)相分離.
div 是標(biāo)簽 css是層疊樣式表
DIV+CSS高級(jí)布局已逐漸流行，但面對(duì)所謂DIV+CSS布局的叫法讓人更為擔(dān)心，不要讓DIV成為Table的替代品，多層嵌套的DIV會(huì)嚴(yán)重影響代碼的可閱讀性，活用HTML為我們提供的標(biāo)簽吧。
常用代碼結(jié)構(gòu)：
div：主要用于布局，分割頁(yè)面的結(jié)構(gòu)
ul/ol：用于無(wú)序/有序列表
span：沒有特殊的意義，可以用作排版的輔助，例如：
<li><span>(4.23)</span>隱居豆腐店</li>
然后在css中定義span為右浮動(dòng)，實(shí)現(xiàn)了日期和標(biāo)題分兩側(cè)顯示的效果
h1-h6：標(biāo)題
h1-h6 根據(jù)重要性依次遞減
h1位最重要的標(biāo)題
label：為了使你的表單更有親和力而且還能輔助表單排版的好東西，例如：
<label for="user-password">密 碼</label>
<input type="password" name="password" id="user-password" />
fieldset & legend：fildset套在表單外，legend用于描述表單內(nèi)容。例如：
<form>
<fieldset>
<legend>title</legend>
<label for="user-password">密 碼</label>
<input type="password" name="password" id="user-password" />
</fieldset>
</form>
dl,dt,dd：當(dāng)頁(yè)面中出現(xiàn)第一行為類似標(biāo)題/簡(jiǎn)述，然后下面為詳細(xì)描述的內(nèi)容時(shí)應(yīng)該使用該標(biāo)簽，例如：
<dl>
<dt>什么是CSS?</dt>
<dd>CSS就是一種叫做樣式表（stylesheet）的技術(shù)。也有的人稱之為層疊樣式表（Cascading Stylesheet）。<dd>
<dt>什么是XHTML？</dt>
< dd>XHTML是一個(gè)基于XML的置標(biāo)語(yǔ)言，看起來(lái)與HTML有些想像，只有一些小的但重要的區(qū)別。可以這樣看，XHTML就是一個(gè)扮演著類似 HTML的角色的XML。本質(zhì)上說(shuō)，XHTML是一個(gè)橋接（過渡）技術(shù)，結(jié)合了XML（有幾分）的強(qiáng)大功能及HTML（大多數(shù)）的簡(jiǎn)單特性。</dd>
</dl>
C #content
S #subcol
M #maincol
X #xcol
這是縱向布局的XHTML結(jié)構(gòu)，c-smx表示網(wǎng)頁(yè)有三個(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命名規(guī)則:
頭：header 內(nèi)容：content/container 尾：footer 導(dǎo)航：nav 側(cè)欄：sidebar
欄目：column 頁(yè)面外圍控制整體布局寬度：wrapper 左右中：left right center
登錄條：loginbar 標(biāo)志：logo 廣告：banner 頁(yè)面主體：main 熱點(diǎn)：hot
新聞：news 下載：download 子導(dǎo)航：subnav 菜單：menu
子菜單：submenu 搜索：search 友情鏈接：friendlink 頁(yè)腳：footer
版權(quán)：copyright 滾動(dòng)：scroll 內(nèi)容：content 標(biāo)簽頁(yè)：tab
文章列表：list 提示信息：msg 小技巧：tips 欄目標(biāo)題：title
加入：joinus 指南：guild 服務(wù)：service 注冊(cè)：regsiter
狀態(tài)：status 投票：vote 合作伙伴：partner
(二)注釋的寫法:
/* Footer */
內(nèi)容區(qū)
/* End Footer */
(三)id的命名:
(1)頁(yè)面結(jié)構(gòu)
容器: container 頁(yè)頭：header 內(nèi)容：content/container
頁(yè)面主體：main 頁(yè)尾：footer 導(dǎo)航：nav
側(cè)欄：sidebar 欄目：column 頁(yè)面外圍控制整體布局寬度：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
注冊(cè)：regsiter 搜索：search 功能區(qū)：shop
標(biāo)題：title 加入：joinus 狀態(tài)：status 按鈕：btn
滾動(dòng)：scroll 標(biāo)簽頁(yè)：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)對(duì)齊樣式,使用對(duì)齊目標(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
DIV排版的核心：即CSS盒子模式
CSS 每個(gè)div盒子模式包括：內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)