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