網站建設CSS命名規范_第1頁
網站建設CSS命名規范_第2頁
網站建設CSS命名規范_第3頁
網站建設CSS命名規范_第4頁
網站建設CSS命名規范_第5頁
已閱讀5頁，還剩2頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、眾成新項目部CSS樣式表及XHTML命名書寫規范 編寫者：黃挽審核者：黃挽批準者：黃挽 眾成技術開發有限公司版本歷史記錄日期版本更改描述作者2007-03-051.0初始版本黃挽2008-03-082.0修正版本黃挽2010-07-223.0修正版本黃挽一、DTD聲明DTD (Document Type Definition)是一套關于標記符的語法規則。它是XML1.0版規格的一部分,是XML文件的驗證機制,屬于XML文件組成的一部分。 DTD 是一種保證XML文檔格式正確的有效方法，可以通過比較XML文檔和DTD文件來看文檔是否符合規范，元素和標簽使用是否正確。頁面頂部一律使用標準DTD聲明

2、<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml">二、指定語言及字符集如無特殊約定，默認一律采取UTF-8編碼<meta http-equiv="Content-Type" content="text/html;

3、 charset=utf-8" />三、調用樣式表：3.1內部樣式表調用：只能用于獨立頁面如login.aspx，leftMenu.aspx所使用樣式僅為一個頁面所引用頁面內嵌法：就是將樣式表直接寫在頁面代碼的head區。如：<style type=”text/css”><! body background : white ; color : black ; > </style>3.2外部樣式表調用：外部調用法：將樣式表寫在一個獨立的.css文件中，然后在頁面head區用類似以下代碼調用。<link rel=”stylesheet” r

4、ev=”stylesheet” href=”css/style.css” type=”text/css” media=”all” />理論上講除了較簡單的站點或軟件，一個應用應該由多張CSS表組成，如：base.css 全局使用的css表 （基本標簽及UL，Li等）必須form.css 表單各元素使用的css表 必須font.css 字體樣式使用的css表，如可以用于定義各種Title 必須themes.css 主題樣式表index.css 首頁特殊使用的css表四、樣式表命名規范采用駝峰命名法，首單詞小寫，次單詞首位大寫。名稱不可以使用下劃線、標點符號、其它特殊符號、中文等，原則上項目

5、名稱不超出20個字符，以英文單詞中的名詞為準，不使用拼音。如picBox, titleBlue,font14px,titleRed,btnSubmit4.1 常用元素的命名頁頭：header標志：logo頭部廣告：banner其他廣告：msgAd菜單：menu 子菜單：submenu導航：nav 子導航：subnav登錄條：loginbar側欄：sidebar搜索：search頁面主體：main內容：content容器： container標簽頁：tab文章列表：listArticle產品列表：listProduct提示信息：msg欄目標題：title小技巧：tips指南：guild服務：se

6、rvice熱點：hot新聞：news下載：download注冊：regsiter狀態：status按鈕：btn投票：vote合作伙伴：partner友情鏈接：friendlink頁腳：footer版權：copyright外套： wrap注釋： note當前的current五、樣式表及XHTML書寫規范1. 先書寫基本標簽類body,a,table,td,注意A標記，統一只定義a 與a:hover2. 先對整體元素的邊距與間距進行格式化*padding:0px;margin:0px;3. 盡量使用簡寫語法，如：.concentNewsborder:1px solid #eee;4. 使用注釋（特

7、殊地方使用注釋 /*注釋內容*/）5. 注意標簽的容器規范注意標簽結構與容器關系，以及縮進，例<div id=”head”> <h1></h1><h1></h1> <ul> <li></li><li></li></ul></div> 錯誤的寫法：1.<span><div id=”head”></div></span> 2. <li><h1></h1></li>3. <li><p></p></li>6. 注意Padding與Margin區別Paddding用于擴展所定義區域的寬度與高度（容器總高寬等于定義值+padding），而margin是相對對齊。7. 注意子容器中有浮動的父容器使用clearfix，如：/* Clear Fix */.clearfix:aftercontent:"."display:block;height:0;clear:both;visibility:hidden;.clear

溫馨提示

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

評論

0/150

提交評論