div css命名規(guī)范,div css 命名,div css規(guī)則整理,css命名規(guī)則,css樣式命名規(guī)則

什么是DIV+CSS 網(wǎng)頁重構(gòu)?

　　DIV+CSS是網(wǎng)站標(biāo)準(zhǔn)（或稱“WEB標(biāo)準(zhǔn)”）中常用術(shù)語之一，通常為了說明與HTML網(wǎng)頁設(shè)計(jì)語言中的表格（table）定位方式的區(qū)別，因?yàn)閄HTML網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)，而是采用DIV+CSS的方式實(shí)現(xiàn)各種定位。

　　CSS是英語Cascading Style Sheets（層疊樣式表單）的縮寫，它是一種用來表現(xiàn) HTML 或 XML 等文件式樣的計(jì)算機(jī)語言。

　　HTML語言自HTML4.01以來，不再發(fā)布新版本，原因就在于HTML語言正變得越來越復(fù)雜化、專用化。即標(biāo)記越來越多，甚至各個(gè)瀏覽器生產(chǎn)商也開發(fā)出只適合于其特定瀏覽器的HTML標(biāo)記，這顯然有礙于HTML網(wǎng)頁的兼容性。于是W3C組織進(jìn)而重新從SGML中獲取營(yíng)養(yǎng)，隨后，發(fā)布了XML，XML是一種比HTML更加嚴(yán)格的標(biāo)記語言，全稱是可擴(kuò)展標(biāo)記語言（EXtensible Markup Language http://www.seoyouhua.net/）。但是XML過于復(fù)雜，且當(dāng)前的大部分瀏覽器都不完全支持XML。于是XHTML這種語言就派上了用場(chǎng)，XHTML語言就是一種可以將HTML語言標(biāo)準(zhǔn)化，用XHTML語言重寫后的HTML頁面可以應(yīng)用許多XML應(yīng)用技術(shù)。使得網(wǎng)頁更加容易擴(kuò)展，適合自動(dòng)數(shù)據(jù)交換，并且更加規(guī)整。說了這么多，現(xiàn)在該說正題了——CSS。其實(shí)CSS單獨(dú)使用除了麻煩一點(diǎn)之外，我個(gè)人覺得并無明顯的優(yōu)于HTML的好處。而關(guān)鍵就在于其與腳本語言（如Javascript）及XML技術(shù)的融合，即CSS+Javascript+XML（實(shí)際上有一種更好的融合：XML+XSL+Javascript）——但XSL，即可擴(kuò)展樣式表語言相較于CSS過于復(fù)雜，不太容易上手。自從CSS出現(xiàn)之后，HTML終于擺脫了雜亂無章的惡夢(mèng)，開始將頁面內(nèi)容與樣式分離。說了這么多，其實(shí)，個(gè)中真諦，還得使用過后才知道，所以，現(xiàn)在就開始學(xué)習(xí)使用吧。

　　DIV元素是用來為HTML文檔內(nèi)大塊（block-level）的內(nèi)容提供結(jié)構(gòu)和背景的元素。DIV的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來構(gòu)成這個(gè)塊的，其中所包含元素的特性由DIV標(biāo)簽的屬性來控制，或者是通過使用樣式表格式化這個(gè)塊來進(jìn)行控制。

　　在可以預(yù)計(jì)的將來，table的地位依然十分重要，于是，如google之流依然會(huì)生意興隆。但是div代表的是網(wǎng)絡(luò)世界發(fā)展的方向。它們一個(gè)簡(jiǎn)單，一個(gè)先進(jìn)，蘿卜白菜，您選什么都是有可取只處的．我們都很按您的要求認(rèn)真服務(wù)的！

　　div是html(超文本語言)中的一個(gè)元素,div+css 是一種網(wǎng)頁的布局方法,這一種網(wǎng)頁布局方法有別于傳統(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：主要用于布局，分割頁面的結(jié)構(gòu)

ul/ol：用于無序/有序列表

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)頁面中出現(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)語言，看起來與HTML有些想像，只有一些小的但重要的區(qū)別。可以這樣看，XHTML就是一個(gè)扮演著類似 HTML的角色的XML。本質(zhì)上說，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)頁有三個(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　　頁面外圍控制整體布局寬度：wrapper　　左右中：left right center

登錄條：loginbar　　標(biāo)志：logo　　廣告：banner　　頁面主體：main　　熱點(diǎn)：hot

新聞：news　　下載：download　　子導(dǎo)航：subnav　　菜單：menu

子菜單：submenu　　搜索：search　　友情鏈接：friendlink　　頁腳：footer

版權(quán)：copyright　　滾動(dòng)：scroll　　內(nèi)容：content　　標(biāo)簽頁：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)頁面結(jié)構(gòu)

容器: container　　頁頭：header　　內(nèi)容：content/container

頁面主體：main　　頁尾：footer　　導(dǎo)航：nav

側(cè)欄：sidebar　　欄目：column　　頁面外圍控制整體布局寬度：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)簽頁：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)

Tags：div css命名規(guī)范，div css 命名，div css規(guī)則整理，css命名規(guī)則，css樣式命名規(guī)則