css書寫規范 · 小兵CMS前端開發規范

## 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. <h1>到<h5>的定義，應遵循從大到小的原則，體現文檔的結構，并有利于搜索引擎的查詢。 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的寫法)。完整代碼如下： <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“> 嚴格的(Strict):要求嚴格的DTD，你不能使用任何表現層的標識和屬性，例如<br>。完整代碼如下： <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“> 框架的(Frameset):專門針對框架頁面設計使用的DTD，如果你的頁面中包含有框架，需要采用這種DTD。完整代碼如下： <!DOCTYPE html PUBLIC “-//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. 指定語言及字符集：為文檔指定語言： <html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”> 為了被瀏覽器正確解釋和通過W3C代碼校驗，所有的XHTML文檔都必須聲明它們所使用的編碼語言；如：常用的語言定義： <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> 標準的XML文檔語言定義： <?xml version=”1.0″ encoding=” utf-8″?> 針對老版本的瀏覽器的語言定義： <meta http-equiv=”Content-Language” content=” utf-8″ /> 為提高字符集，建議采用“utf-8”。 3. 調用樣式表：外部樣式表調用：頁面內嵌法：就是將樣式表直接寫在頁面代碼的head區。如： <style type=”text/css”><!– body { background : white ; color : black ; } –> </style> 外部調用法：將樣式表寫在一個獨立的.css文件中，然后在頁面head區用類似以下代碼調用。 <link rel=”stylesheet” rev=”stylesheet” href=”css/style.css” type=”text/css” media=”all” /> 在符合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文檔都應采用結構化的書寫方式，邏輯清晰易于閱讀。如： <div id=”mainMenu”> <ul> <li><a href=”#” >首頁</a></li> <li><a href=”#” >介紹</a></li> <li><a href=”#” >服務</a></li> </ul> </div> /*=====主導航=====*/ #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．協助注釋非作者維護時所加入的表示修改時間、修改人等標識信息。在區域注釋或單行注釋的基礎上加上修改人和修改時間等信息。例(區域注釋)： [/pre]<div>[/pre]...[/pre]</div>[/pre][/pre]/*=S 注釋內容[修改人和修改時間]*/[/pre].class{[/pre]...[/pre]}[/pre].class{[/pre]...[/pre]}[/pre]/*=E 注釋內容[修改人和修改時間]*/[/pre]例(單行注釋)：[/pre]<div>[/pre][/pre]...[/pre]</div>[/pre].class{[/pre]/*注釋內容[修改人和修改時間]*/[/pre]...[/pre]}[/pre]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可識別： <!–[if IE]> Only IE <![end if]–> 只有IE5.0可以識別: <!–[if IE 5.0]> Only IE 5.0 <![end if]–> IE5.0包換IE5.5都可以識別: <!–[if gt IE 5.0]> Only IE 5.0+ <![end if]–> 僅IE6可識別: <!–[if lt IE 6]> Only IE 6- <![end if]–> IE6以及IE6以下的IE5.x都可識別: <!–[if gte IE 6]> Only IE 6/+ <![end if]–> 僅IE7可識別: <!–[if lte IE 7]> Only IE 7/- <![end if]–> 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 id="floatA" ></#div> <#div id="floatB" ></#div> <#div id="NOTfloatC" ></#div> 這里的NOTfloatC并不希望繼續平移，而是希望往下排。　　這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC并非float標簽，必須將float標簽閉合。在程序代碼 <#div class="floatB"></#div> <#div class="NOTfloatC"></#div> 之間加上程序代碼 <#div class="clear"></#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 id="imfloat"></#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;} 注意書寫格式的問題：一定要注意縮進。對齊。要有良好的編程習慣。