html语言书写注意事项,CSS命名规范参考及书写注意事项
CSS書寫順序
*{
/*顯示屬性*/
display
position
float
clear
cursor
…
/*盒模型*/
margin
padding
width
height
/*排版*/
vertical-align
white-space
text-decoration
text-align
…
/*文字*/
color
font
content
/*邊框背景 為什么要把 boder和background放在最后的原因是修改的頻率會較之前的頻繁，放在最后查看起來方便，哈哈。*/
border
background
}
下表順序為從上到下，從左到右：
========================
display || visibility
list-style : list-style-type || list-style-position || list-style-image
position
top || right || bottom || left
z-index
clear
float
width
max-width || min-width
height
max-height || min-height
overflow || clip
margin : margin-top || margin-right || margin-bottom || margin-left
padding : padding-top || padding-right || padding-bottom || padding-left
outline : outline-color || outline-style || outline-width
border
background : background-color || background-image || background-repeat || background-attachment || background-position
color
font : font-style || font-variant || font-weight || font-size || line-height || font-family
font : caption | icon | menu | message-box | small-caption | status-bar
text-overflow
text-align
text-indent
line-height
white-space
vertical-align
cursor
CSS命名規則：
一．文件命名規范
全局樣式：global.css；
框架布局：layout.css；
字體樣式：font.css；
鏈接樣式：link.css；
打印樣式：print.css；
主要的 master.css
專欄 columns.css
主題 themes.css
主要的 master.css
模塊 module.css
基本共用 base.css
表單 forms.css
補丁 mend.css
二．頁面結構
容 器: container
頁 頭：header
內 容：content
頁面主體：main
頁 尾：footer
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center
三．導航
導航：nav
主導航：mainbav
子導航：subnav
頂導航：topnav
邊導航：sidebar
左導航：leftsidebar
右導航：rightsidebar
菜單：menu
子菜單：submenu
摘要: summary
四．功能
標志：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
Container div
#container
容器
Layout
#layout
布局
Header or banner div
#head, #header
頁頭部分
Footer div
#foot, #footer
頁腳部分
Navigation list
#nav
主導航
Sub-navigation list
#subNav
二級導航
Menu
#menu
菜單
Sub Menu
#submenu
子菜單
Left or right side columns
#sidebar_a, #sidebar_b
左邊欄或右邊欄
Main div
#main
頁面主體
Tag
#tag
標簽
Message
#msg #message
提示信息
Tips
#tips
小技巧
Vote
#vote
投票
Friend Link
#friendlink
友情連接
Title
#title
標題
Summary
#summary
摘要
Search input
#searchInput
搜索輸入框
Search output
#search_output
搜索輸出和搜索結果相似
Search
#search
搜索
Search bar
#searchBar
搜索條
Search results
#search_results
搜索結果
Copyright information
#copyright
版權信息
brand
#branding
商標
branding-logo
#logo
LOGO
Site information
#siteinfo
網站信息
Copyright information etc.
#siteinfoLegal
法律聲明
Designer or other credits
#siteinfoCredits
信譽
Join us
#joinus
加入我們
Partnership opportunities
#partner
合作伙伴
Services
#service
服務
Regsiter
#regsiter
注冊
Arrow
arr/arrow
箭頭
Little
#little
標題
Website map
#sitemap
網站地圖
List
#list
列表
Home page
#homepage
首頁
Sub page
subpage
二級頁面子頁面
Toolbar
#tool, #toolbar
工具條
Next pulls
#drop
下拉
Next pulls menu
#dorpmenu
下拉菜單
Status
#status
狀態
Container div
#container
容器
Header or banner div
#header
頁頭部分
Main or global navigation div
#mainNav
主導航
Menu
#menu
菜單
Sub Menu
#submenu
子菜單
Left or right side columns
#sidebarA, #sidebarB
左邊欄或右邊欄
Main div
#main
頁面主體
Content div
#content
內容部分
The main content area
#contentMain
主要內容區域
Footer div
#footer
頁腳部分
Tag
#tag
標簽
Message
#msg #message
提示信息
Tips
#tips
小技巧
Vote
#vote
投票
Friend Link
#friendlink
友情連接
Title
#title
標題
Summary
#summary
摘要
Sub-navigation list
#subNav
二級導航
Search input
#searchInput
搜索輸入框
Search output
#searchOutput
搜索輸出和搜索結果相似
Search
#search
搜索
Search results
#searchResults
搜索結果
Copyright information
#copyright
版權信息
brand
#branding
商標
branding-logo
#brandingLogo
LOGO
Site information
#siteinfo
網站信息
Copyright information etc.
#siteinfoLegal
法律聲明
Designer or other credits
#siteinfoCredits
信譽
Join us
#joinus
加入我們
Partnership opportunities
#partner
合作伙伴
Services
#service
服務
Regsiter
#regsiter
注冊
Status
#status
狀態
Products
.products
產品
Products prices
.productsPrices
產品價格
Products description
.productsDescription
產品描述
Products review
.productsReview
產品評論
Editor’s review
.editorReview
編輯評論
New release
.newsRelease
最新產品
Publisher
.publisher
生產商
Screen shot
.screenshot
縮略圖
FAQ
.faqs
常見問題
Keyword
.keyword
關鍵詞
Blog
.blog
博客
Forum
.forum
論壇
五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 { }
XHTML-CSS寫作建議
1. 所有的xhtml代碼小寫
2. 屬性的值一定要用雙引號(“”)括起來，且一定要有值
3. 每個標簽都要有開始和結束，且要有正確的層次
4. 空元素要有結束的tag或于開始的tag后加上“/”
5. 表現與結構完全分離，代碼中不涉及任何的表現元素，如style、font、bgColor、border等
6.
到
的定義，應遵循從大到小的原則，體現文檔的結構，并有利于搜索引擎的查詢。
7. 給每一個表格和表單加上一個唯一的、結構標記id
8. 給重要的區塊加上注釋,如：
9. 給圖片加上alt標簽
10. 所有的標簽必須進行合理的嵌套
11. 根元素前必須有元素，宣告使用那一種DTD
12. 根元素必須有xmlns屬性來指定使用http://www.w3.org/1999/xhtml的namespace
一. 常規書寫規范及方法
1. 選擇DOCTYPE：
XHTML 1.0 提供了三種DTD聲明可供選擇：
過渡的(Transitional):要求非常寬松的DTD，它允許你繼續使用HTML4.01的標識(但是要符合xhtml的寫法)。完整代碼如下：
-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
嚴格的(Strict):要求嚴格的DTD，你不能使用任何表現層的標識和屬性，例如
。完整代碼如下：
-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
框架的(Frameset):專門針對框架頁面設計使用的DTD，如果你的頁面中包含有框架，需要采用這種DTD。完整代碼如下：
-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>
理想情況當然是嚴格的DTD，但對于我們大多數剛接觸web標準的設計師來說，過渡的DTD(XHTML 1.0 Transitional)是目前理想選擇(包括本站，使用的也是過渡型DTD)。因為這種DTD還允許我們使用表現層的標識、元素和屬性，也比較容易通過W3C的代碼校驗。
2. 指定語言及字符集：
為文檔指定語言：
為了被瀏覽器正確解釋和通過W3C代碼校驗，所有的XHTML文檔都必須聲明它們所使用的編碼語言；如：
常用的語言定義：
標準的XML文檔語言定義：
針對老版本的瀏覽器的語言定義：
為提高字符集，建議采用“utf-8”。
3. 調用樣式表：
外部樣式表調用：
頁面內嵌法：就是將樣式表直接寫在頁面代碼的head區。 如：
外部調用法：將樣式表寫在一個獨立的.css文件中，然后在頁面head區用類似以下代碼調用。
在符合web標準的設計中，推薦使用外部調用法，可以不修改頁面只修改.css文件而改變頁面的樣式。如果所有頁面都調用同一個樣式表文件，那么改一個樣式表文件，可以改變所有文件的樣式。
4、選用恰當的元素：
根據文檔的結構來選擇HTML元素，而不是根據HTML元素的樣式來選擇。例如，使用P元素來包含文字段落，而不是為了換行。如果在創建文檔時找不到適當的元素，則可以考慮使用通用的div 或者是span；
避免過渡使用div和span。少量、適當的使用div和span元素可以使文檔的結構更加清晰合理并且易于使用樣式；
盡可能少地使用標簽和結構嵌套，這樣不但可以使文檔結構清晰，同時也可以保持文件的小巧，在提高用戶下載速度的同時，也易于瀏覽器對文檔的解釋及呈視；
5、派生選擇器：
可以使用派生選擇器給一個元素里的子元素定義樣式，在簡化命名的同時也使結構更加的清晰化，如：
.mainMenu ul li {background:url(images/bg.gif;)}
6、輔助圖片用背影圖處理：
這里的”輔助圖片”是指那些不是作為頁面要表達的內容的一部分，而僅僅用于修飾、間隔、提醒的圖片。將其做背影圖處理，可以在不改動頁面的情況下通過CSS樣式來進行改動，如： #logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;}
7、結構與樣式分離：
在頁面里只寫入文檔的結構，而將樣式寫于css文件中，通過外部調用CSS樣式表來實現結構與樣式的分離。
8、文檔的結構化書寫：
頁面CSS文檔都應采用結構化的書寫方式，邏輯清晰易于閱讀。如：
- ”#” >首頁
- ”#” >介紹
- ”#” >服務
/*=====主導航=====*/
#mainMenu {
width:100%;
height:30px;
background:url(images/mainMenu_bg.jpg) repeat-x;
}
#mainMenu ul li {
float:left;
line-height:30px;
margin-right:1px;
cursor:pointer;
}
/*=====主導航結束=====*/
9、鼠標手勢：
在XHTML標準中，hand只被IE識別，當需要將鼠標手勢轉換為“手形”時，則將“hand”換為“pointer”，即“cursor:pointer;”
10．注釋書寫規范
1、行間注釋：
直接寫于屬性值后面，如：
.search{
border:1px solid #fff;/*定義搜索輸入框邊框*/
background:url(../images/icon.gif) no-report #333;/*定義搜索框的背景*/
}
2、整段注釋：
分別在開始及結束地方加入注釋，如：
/*=====搜索條=====*/
.search {
border:1px solid #fff;
background:url(../images/icon.gif) no-repeat #333;
}
/*=====搜索條結束=====*/
3．協助注釋
非作者維護時所加入的表示修改時間、修改人等標識信息。
在區域注釋或單行注釋的基礎上加上修改人和修改時間等信息。
例(區域注釋)：
...
/*=S 注釋內容[修改人和修改時間]*/
.class{
...
}
.class{
...
}
/*=E 注釋內容[修改人和修改時間]*/
例(單行注釋)：
...
.class{
/*注釋內容[修改人和修改時間]*/
...
}
11．樣式屬性代碼縮寫
1、不同類有相同屬性及屬性值的縮寫：
對于兩個不同的類，但是其中有部分相同甚至是全部相同的屬性及屬性值時，應對其加以合并縮寫，特別是當有多個不同的類而有相同的屬性及屬性值時，合并縮寫可以減少代碼量并易于控制。如：
#mainMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
height:30px;
overflow:hidden;
}
#subMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
height:20px;
overflow:hidden;
}
兩個不同類的屬性值有重復之處，剛可以縮寫為：
#mainMenu,#subMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
overflow:hidden;
}
#mainMenu {height:30px;}
#subMenu {height:20px;}
2、同一屬性的縮寫：
同一屬性根據它的屬性值也可以進行簡寫，如：
.search {
background-color:#333;
background-image:url(../images/icon.gif);
background-repeat: no-repeat;
background-position:50% 50%;
}
.search {
background:#333 url(../images/icon.gif) no-repeat 50% 50%;
}
3、內外側邊框的縮寫：
在CSS中關于內外側邊框的距離是按照上、右、下、左的順序來排列的，當這四個屬性值不同時也可直接縮寫，如：
.btn {
margin-top:10px;
margin-right:8px;
margin-bottom:12px;
margin-left:5px;
padding-top:10px;
padding-right:8px;
padding-bottom:12px;
padding-left:8px;
}
則可縮寫為：
.btn {
Margin:10px 8px 12px 5px;
Padding:10px 8px 12px 5px;
}
而如果當上邊與下邊、左邊與右邊的邊框屬性值相同時，則屬性值可以直接縮寫為兩個，如： .btn {
margin-top:10px;
margin-right:5px;
margin-bottom:10px;
margin-left:5px;
}
縮寫為： .btn {margin:10px 5px;}
而當上下左右四個邊框的屬性值都相同時，則可以直接縮寫成一個，如：
.btn {
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
}
縮寫為：
.btn{margin:10px;}
4、顏色值的縮寫：
當RGB三個顏色值數值相同時，可縮寫顏色值代碼。如：
.menu { color:#ff3333;}
可縮寫為:
.menu {color:#f33;}
12．hack書寫規范
因為不同瀏覽器對W3C標準的支持不一樣，各個瀏覽器對于頁面的解釋呈視也不盡相同，比如IE在很多情況下就與FF存在3px的差距，對于這些差異性，就需要利用css 的hack來進行調整，當然在沒有必要的情況下，最好不要寫hack來進行調整，避免因為hack而導致頁面出現問題。
1、 IE6、IE7、Firefox之間的兼容寫法：
寫法一：
IE都能識別*;標準瀏覽器(如FF)不能識別*；
IE6能識別*，但不能識別 !important,
IE7能識別*，也能識別!important;
FF不能識別*，但能識別!important;
根據上述表達，同一類/ID下的CSS hack可寫為：
.searchInput {
background-color:#333;/*三者皆可*/
*background-color:#666 !important; /*僅IE7*/
*background-color:#999; /*僅IE6及IE6以下*/
}
一般三者的書寫順序為：FF、IE7、IE6.
寫法二：
IE6可識別“_”，而IE7及FF皆不能識別，所以當只針對IE6與IE7及FF之間的區別時，可這樣書寫：
.searchInput {
background-color:#333;/*通用*/
_background-color:#666;/*僅IE6可識別*/
}
寫法三：
*+html 與 *html 是IE特有的標簽, Firefox 暫不支持。
.searchInput {background-color:#333;}
*html .searchInput {background-color:#666;}/*僅IE6*/
*+html .searchInput {background-color:#555;}/*僅IE7*/
屏蔽IE瀏覽器：
select是選擇符，根據情況更換。第二句是MAC上safari瀏覽器獨有的。
*:lang(zh) select {font:12px !important;} /*FF的專用*/
select:empty {font:12px !important;} /*safari可見*/
IE6可識別：
這里主要是通過CSS注釋分開一個屬性與值，注釋在冒號前。
select { display /*IE6不識別*/:none;}
IE的if條件hack寫法：
所有的IE可識別：
Only IE
只有IE5.0可以識別:
Only IE 5.0
IE5.0包換IE5.5都可以識別:
Only IE 5.0+
僅IE6可識別:
Only IE 6-
IE6以及IE6以下的IE5.x都可識別:
Only IE 6/+
僅IE7可識別:
Only IE 7/-
13、清除浮動：
在Firefox中，當子級都為浮動時，那么父級的高度就無法完全的包住整個子級，那么這時用這個清除浮動的HACK來對父級做一次定義，那么就可以解決這個問題。
select:after {
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
注意事項:
1. id和class命名采用該版塊的英文單詞或組合命名，并第一個單詞小寫，第二個單詞首個字母大寫，如:newRelease(最新產品/new+Release)
常用類的命名應盡量以常見英文單詞為準，做到通俗易懂，并在適當的地方加以注釋。對于二級類/ID命名，則采用組合書寫的模式，后一個單詞的首字母應大寫：諸如“搜索框”則應命名為“searchInput”、“搜索圖標”命名這“searchIcon”、“搜索按鈕”命名為 “searchBtn”……
2. CSS樣式表各區塊用注釋說明
3. 盡量使用英文命名原則
4. 不用加中杠和下劃線
5. 盡量不縮寫，除非一看就明白的單詞
6．檢查HTML元素是否有拼寫錯誤、是否忘記結束標記
即使是老手也經常會弄錯div的嵌套關系。可以用dreamweaver的驗證功能檢查一下有無錯誤。
7. 檢查CSS是否正確
檢查一下有無拼寫錯誤、是否忘記結尾的 } 等。可以利用CleanCSS來檢查 CSS的拼寫錯誤。CleanCSS本是為CSS減肥的工具，但也能檢查出拼寫錯誤。
8. 確定錯誤發生的位置
如果錯誤影響了整體布局，則可以逐個刪除div塊，直到刪除某個div塊后顯示恢復正常，即可確定錯誤發生的位置。
9. 利用border屬性確定出錯元素的布局特性
使用float屬性布局一不小心就會出錯。這時為元素添加border屬性確定元素邊界，錯誤原因即水落石出。
10. float元素的父元素不能指定clear屬性
MacIE下如果對float的元素的父元素使用clear屬性，周圍的float元素布局就會混亂。這是MacIE的著名的bug，倘若不知道就會走彎路。
11. float元素務必指定width屬性
很多瀏覽器在顯示未指定width的float元素時會有bug。所以不管float元素的內容如何，一定要為其指定width屬性。
另外指定元素時盡量使用em而不是px做單位。
12. float元素不能指定margin和padding等屬性
IE在顯示指定了margin和padding的float元素時有bug。因此不要對float元素指定margin和padding屬性(可以在float元素內部嵌套一個div來設置margin和padding)。也可以使用hack方法為IE指定特別的值。
13. float元素的寬度之和要小于100%
如果float元素的寬度之和正好是100%，某些古老的瀏覽器將不能正常顯示。因此請保證寬度之和小于99%。
14. 是否重設了默認的樣式？
某些屬性如margin、padding等，不同瀏覽器會有不同的解釋。因此最好在開發前首先將全體的margin、padding設置為0、列表樣式設置為none等。
15、float的div一定要閉合。
例如：(其中floatA、floatB的屬性已經設置為float:left;)
程序代碼
#div>
#div>
#div>
這里的NOTfloatC并不希望繼續平移，而是希望往下排。
這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC并非float標簽，必須將float標簽閉合。在 程序代碼
#div>
#div>
之間加上 程序代碼
#div>
這個div一定要注意聲明位置，一定要放在最恰當的地方，而且必須與兩個具有float屬性的div同級，之間不能存在嵌套關系，否則會產生異常。
并且將clear這種樣式定義為為如下即可：
程序代碼
.clear{
clear:both;}
此外，為了讓高度能自動適應，要在wrapper里面加上overflow:hidden;
當包含float的box的時候，高度自動適應在IE下無效，這時候應該觸發IE的layout私有屬性(萬惡的IE啊！)用zoom:1;可以做到，這樣就達到了兼容。
例如某一個wrapper如下定義：
程序代碼
.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}
16、margin加倍的問題。
設置為float的div在ie下設置的margin會加倍。這是一個ie6都存在的bug。
解決方案是在這個div里面加上display:inline;
例如：
#div>
相應的css為
程序代碼
#IamFloat{
float:left;
margin:5px;/*IE下理解為10px*/
display:inline;/*IE下再理解為5px*/}
17、關于容器的包涵關系
很多時候，尤其是容器內有平行布局，例如兩、三個float的div時，寬度很容易出現問題。在IE中，外層的寬度會被內層更寬的div擠破。一定要用Photoshop或者Firework量取像素級的精度。
18、關于高度的問題
如果是動態地添加內容，高度最好不要定義。瀏覽器可以自動伸縮，然而如果是靜態的內容，高度最好定好。(似乎有時候不會自動往下撐開，不知道具體怎么回事)
常見兼容問題：
1.DOCTYPE 影響 CSS 處理
2.FF: div 設置 margin-left, margin-right 為 auto 時已經居中, IE 不行
3.FF: body 設置 text-align 時, div 需要設置 margin: auto(主要是 margin-left,margin-right) 方可居中
4.FF: 設置 padding 后, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設一個 height 和 width
5.FF: 支持 !important, IE 則忽略, 可用 !important 為 FF 特別設置樣式
6.div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點是要控制內容不要換行
7.cursor: pointer 可以同時在 IE FF 中顯示游標手指狀， hand 僅 IE 可以
8.FF: 鏈接加邊框和背景色，需設置 display: block, 同時設置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設置高度是為了避免底邊顯示錯位, 若不設 height, 可以在 menubar 中插入一個空格。
9.在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px解決方法：
div{margin:30px!important;margin:28px;}
注意這兩個margin的順序一定不能寫反，據阿捷的說法!important這個屬性IE不能識別，但別的瀏覽器可以識別。所以在IE下其實解釋成這樣：
div{maring:30px;margin:28px}
重復定義的話按照最后一個來執行，所以不可以只寫margin:XXpx!important;
10.IE5 和IE6的BOX解釋不一致
IE5下 程序代碼
div{width:300px;margin:0 10px 0 10px;}
div的寬度會被解釋為300px-10px(右填充)-10px(左填充)最終div的寬度為280px，而在IE6和其他瀏覽器上寬度則是以300px+10px(右填充)+10px(左填充)=320px來計算的。這時我們可以做如下修改
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
關于這個/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的話，請告訴我一聲，謝了！：)
11.ul標簽在Mozilla中默認是有padding值的,而在IE中只有margin有值所以先定義
程序代碼ul{margin:0;padding:0;}
注意書寫格式的問題：
一定要注意縮進。對齊。要有良好的編程習慣。
總結
以上是生活随笔為你收集整理的html语言书写注意事项,CSS命名规范参考及书写注意事项的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 男性不育检查精子就行了吗
- 下一篇： html资源文件记载进度条,用进度条显示