HTML+CSS編寫規(guī)范_第1頁
HTML+CSS編寫規(guī)范_第2頁
HTML+CSS編寫規(guī)范_第3頁
HTML+CSS編寫規(guī)范_第4頁
HTML+CSS編寫規(guī)范_第5頁
已閱讀5頁，還剩6頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

1、HTML+CSS編寫規(guī)范在任何一個(gè)項(xiàng)目或者系統(tǒng)開發(fā)之前都需要定制一個(gè)開發(fā)約定和規(guī)則，這樣有利于項(xiàng)目的整體風(fēng)格統(tǒng)一、代碼維護(hù)和擴(kuò)展。由于Web項(xiàng)目開發(fā)的分散性、獨(dú)立性、整合的交互性等，所以定制一套完整的約定和規(guī)則顯得尤為重要。 第一節(jié) CSS樣式文件的命名建立樣式表文件時(shí)，分類編寫樣式到下列樣式表文件中，并統(tǒng)一放在【CSS】文件夾里： 主要main.css文字樣式font.css表格table.css主題themes.css打印print.css補(bǔ)丁mend.css在項(xiàng)目初期，會(huì)把不同類別的樣式放于不同的CSS文件，是為了CSS編寫和調(diào)試的方便，在項(xiàng)目后期會(huì)為了網(wǎng)站性能上的考慮會(huì)整合不同的CSS

2、文件到一個(gè)CSS文件，必要時(shí)可壓縮。 第二節(jié) CSS選擇符的命名所 有選擇符必須有小寫英文字母或“_”下劃線組成，樣式名必須是表示該樣式的大概含義（禁止出現(xiàn)如Div1、div2、Style1），參考后面的“樣 式命名參考”。對CSS選擇器的使用只允許派生選擇器、類選擇器和屬性選擇器，以及它們的組合使用，嚴(yán)禁使用ID選擇器（ID是用于JavaScript 的編寫）。 如：li span td.fancy inputtype="text" 當(dāng)定義的樣式名比較復(fù)雜時(shí)用下劃線把層次分開，比如：dcrm_logo dcrm_logo_ico 第三節(jié) 圖片的命名與書寫圖片的命名原則小寫

3、英文字母名稱放在頭尾兩部分，用“_”下劃線隔開，頭部表示此圖片的大類性質(zhì)例如廣告、標(biāo)志、菜單、按鈕等等；尾部表示圖片的概念。設(shè)計(jì)人員在PS中保存圖片時(shí)，請使用“文件”à“存儲(chǔ)為Web和設(shè)備所用的格式”。 廣告banner標(biāo)志logo鏈接的小圖片button裝飾圖pic 標(biāo)題的圖片title  banner_sohu.png 、banner_sina.png、 menu_about_us.png、menu_job.png、 title_news.gif、 logo_police.gif、 logo_national.gif 、pic_people.jpg第四節(jié) CS

4、S注釋書寫規(guī)范4.1 提示和標(biāo)簽信息注釋這是注釋最常用的途徑，可以為自己或其他開發(fā)人員留下提示信息可以避免后期引起的不必要的困惑和麻煩。這種應(yīng)用簡潔性最為重要。 .search border:1px solid #fff; /*Border Color*/ 注意：注釋內(nèi)容和前面樣式語句間有3個(gè)空格，后面1個(gè)空格 4.2 修改樣式注釋（時(shí)間和相關(guān)人員）/*_Styles Updated: Thu 4.8.08 5:15 p.m. Author: hour -*/4.3 文檔結(jié)構(gòu)/*_Header -*/ .search border:1px solid #fff; /*Border Color*

5、/ color:#333; /*Color*/ /*_Menu -*/ .menul_ul border:1px solid #fff; /*Border Color*/注意：相對獨(dú)立的2段內(nèi)容之間空1行。 第五節(jié) CSS布局編碼標(biāo)準(zhǔn)和建議5.1 建立樣式表索引樣式表頭部索引定義可以幫助你和其它人弄清楚該樣式表文件的相關(guān)信息，它一般是一段格式化的CSS注釋文本寫在 main.css中。給出該CSS文件作者的相關(guān)信息；定義站點(diǎn)的布局，記錄文件版本號(hào)（利于多作者協(xié)作及將來更新） /*- *Filename: main.css *Description: Global CSS *Version: 1

6、.0.0(2009-12-28)YYYY-MM-DD *Website: =STRUCTURE:= = = = *Page width: 980px *Number of columns: 2 -*/5.2 命名錨點(diǎn) 的使用命 名錨點(diǎn)是用來規(guī)劃整個(gè)CSS文件結(jié)構(gòu)的（就好像書簽一樣），從而使整個(gè)CSS文件獲得良好的組織。命名錨點(diǎn)一般也是書寫在樣式表頭部的索引注釋中。CSS 本身沒有內(nèi)部的錨點(diǎn)系統(tǒng)，所以我一般采用下面的小技巧來完成。在頭部索引拷貝你想找到的錨點(diǎn)，并在整個(gè)文檔中查找，從而獲取該CSS節(jié)。 *=STRUCTURE:= $_header Header Definitions $_menu

7、 Global Site $_content Everything within the content -*/ /*_header -*/ .Header CSS Definitions. /*_menu -*/ .Header CSS Definitions.5.3 建立良好的CSS編碼順序最后定義的 CSS 樣式將會(huì)覆蓋在其之前定義的所有已經(jīng)存在、或與之沖突的樣式，比如下面這個(gè)例子： p color: red; background: yellow; p color: green;以上的段落最終將呈現(xiàn)綠色的字體，并帶有黃色的背景，這是因?yàn)樽詈蠖x的 color:green 將之前定義的

8、red 覆蓋掉了，至于黃色背景為何沒有消失，那是因?yàn)榈诙€(gè) p 的定義中并沒有與之沖突的定義，因此它還是有效的。 5.4 合適的縮寫在CSS中經(jīng)常會(huì)利用縮寫把多個(gè)相同類型的屬性定義指定為一個(gè)。CSS縮寫會(huì)使CSS文檔更加干凈、簡潔；縮寫語法參考相關(guān)章節(jié)。 5.5 CSS圖像拼合(即CSS Sprites技術(shù)) CSS Sprites技術(shù)：將用到的所有小圖片（圖標(biāo)）合并為一張圖片，使用css背景屬性，來控制圖片的顯示位置和方式。CSS Sprites技術(shù)的應(yīng)用可以大大減少HTTP請求的次數(shù)，減輕服務(wù)器壓力，同時(shí)縮短了懸停加載圖片所需要的時(shí)間延遲，使效果更流暢，不會(huì)停頓。 5.6 CSS組合和嵌套

9、CSS組合 你不必重復(fù)有相同屬性的多個(gè)選擇符，你只要用英文逗號(hào)（,）隔開選擇符就可以了。 h2 color: red; .w3cbbs color: red; .w3cbbs_52css color: red; 則你可以這樣寫h2,.w3cbbs,.w3cbbs_52css color: red; CSS嵌套 CSS結(jié)構(gòu)好的話，沒有必要使用過多的類或者標(biāo)識(shí)選擇符。這是因?yàn)槟憧梢灾付ㄔ谶x擇符內(nèi)的選擇符。 .top background-color: #ccc; padding: 1em; .top h1 color: #ff0; .top p color: red; font-weight: b

10、old; 第六節(jié) 常用CSS選擇符命名參考導(dǎo)航nav頁頭header主導(dǎo)航mainnav頁面主體main頂導(dǎo)航topnav內(nèi)容content子導(dǎo)航subnav頁腳footer菜單menu版權(quán)copyright子菜單submenu登陸login標(biāo)志logo側(cè)欄sidebar廣告banner搜索search滾動(dòng)scroll標(biāo)簽頁tab小技巧tips合作伙伴partner加入joinus標(biāo)題title注冊regsiter指南gUIld新聞news下載download按鈕button狀態(tài)status服務(wù)service投票vote注釋note友情鏈接friendlink提示信息msg 

11、0;注意：命名方式使用“類別_功能”的方式（.bar_news .bar_product）。 第七節(jié) DIV+CSS頁面的布局Table布局由于代碼冗余已經(jīng)過時(shí)，所以HTML頁面普遍采用代碼簡潔Div+CSS的布局，HTML頁面大體可分為top、main和bottom，在main中又可以為left和right，這些CSS的名必須是有意義的名字。如下面代碼： <body> <div class="body"> <div class="top"> </div> <div class="main&

12、quot;> <div class="left"> </div> <div class="right"> </div> </div> <div class="bottom"> </div> </div> </body>目前table主要是用來展現(xiàn)數(shù)據(jù)表，反正在布局中盡量少用table。 第八節(jié) HTML代碼書寫規(guī)范頁面的HTML代碼書寫必須符合XHTML規(guī)范，XHTML 可以被所有的支持 XML 的設(shè)備讀取，同時(shí)在其余的瀏

13、覽器升級(jí)至支持 XML 之前，XHTML 使我們有能力編寫出擁有良好結(jié)構(gòu)的文檔，這些文檔可以很好地工作于所有的瀏覽器，并且可以向后兼容。 XHTML與HTML的不同： 1. XHTML 元素必須被正確地嵌套。 2. XHTML 元素必須被關(guān)閉。 3. 標(biāo)簽名必須用小寫字母。 4. XHTML 文檔必須擁有根元素。 對 于第1點(diǎn)：最有可能發(fā)生錯(cuò)誤是在與<table>標(biāo)簽的結(jié)合，<table>的直接子元素只能 為：<thead>、<tbody>、<tfoot>和<tr>，而 <thead>、<tbody>

14、;和<tfoot>的直接子元素只能為：<tr>， 而<tr>的直接子元素只能為<td>和<th>，在<td>和<th>才可以放其它標(biāo) 簽。此外相類似的標(biāo)簽有：<dl>、<ul>、<ol>、<select>。 某些標(biāo) 簽不推薦使用，如：<b><strong><i><em> <strong> <dfn> <code> <samp> <kbd><var>

15、; <cite>，因?yàn)檫@些標(biāo)簽有些是可以用CSS去統(tǒng)一控制，還有一些是不常使用的；某些標(biāo)簽是有特殊意義的， 如：<h1><h6>，這些標(biāo)簽是專門用于內(nèi)容標(biāo)題的，本人也希望只允許使用<h1><h6>來表 示內(nèi)容標(biāo)題。 在編寫HTML代碼時(shí)請注意縮進(jìn)，在VS中按Ctrl+E+D可格式化文本。 第九節(jié) 網(wǎng)站基礎(chǔ)CSS的定義網(wǎng)站CSS必須得有個(gè)統(tǒng)一的架構(gòu)，復(fù)用CSS，盡量減少重復(fù)CSS的定義。基礎(chǔ)CSS就是那些常用的CSS定義，如： .clear clear: both; .bold font-weight: bold; .left text

16、-align: left; .error color: Red; .succeed color: Green; .center text-align: center; .fleft float:left; .fright float:right; .left15 margin-left: 15px; .radius border-radius: 5px; CSS元素選擇器可以對同一標(biāo)簽進(jìn)行統(tǒng)一的樣式定義，有些標(biāo)簽應(yīng)該使用元素CSS定義，如： body font-size: 12px; font-family: Arial; margin: 0; padding: 0; color: #403f

17、3f; background:url('./images/page_top.png') repeat-x top #d1d2d2; a, a:link color: #2a5685; text-decoration: none; line-height: normal; a:hover color: #E0303A; text-decoration: none; cursor: pointer; ul margin: 0px; padding: 0px; hr height: 1px; border: none; border-bottom: #dcdddd 1px solid; h1, h2 font-size: 1.5em; color: #000; h3 font-size: 1.2em; h4 font-size: 1.1em; 第十節(jié) CSS調(diào)試心得目前的瀏覽器基本上都有客戶端調(diào)試工具，所以當(dāng)對頁面進(jìn)行設(shè)計(jì)或調(diào)試時(shí)，請盡量使用此類工具，而不是改源文件，然后再刷新頁面，使用客戶端工具可及時(shí)增、刪、改H

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論