原文鏈接https://www.aliyun.com/jiaocheng/676792.html
CSS 書寫規範
基本原則:
CSS樣式可細分爲3類:自定義樣式、重新定義HTML樣式、鏈接狀態樣式。
1. 樣式爲設計師自定義的新 CSS 樣式,影響被使用本樣式的區域,用於完成網頁中局部的樣式設定。樣式名 “.”+“相應樣式效果描述的單詞或縮寫”例:“ .shadow ”文字樣式樣式名“.no”+“字號”+“行距”+“顏色縮寫”例:“ .no12 ” 、“ .no12-24 ”
2. 義HTML樣式爲設計師重新定義已有的HTML標籤樣式,影響全部的被設定標籤樣式,用於統一網頁中某一標籤的樣式定義。樣式名“HTML標籤”例:hr { border: 1px dotted #333333 }
3. 態樣式爲設計師對鏈接不同狀態設定特殊樣式,影響被使用本樣式區域中的鏈接。該樣式寫法有2種: a.nav:link nav.a:link 第一種只能修飾<a>標籤中;第二種可以修飾所有包含有<a>標籤的其他標籤。
頁面內的樣式加載必須用鏈接方式<link rel="stylesheet" type="text/css" href="style/style.css">
注意細則:
1. 協作開發及分工: i會根據各個模塊, 同時根據頁面相似程序, 事先寫好大體框架文件, 分配給前端人員實現內部結構&;表現&;行爲; 共用css文件base.css由i書寫, 協作開發過程中, 每個頁面請務必都要引入, 此文件包含reset及頭部底部樣式, 此文件不可隨意修改;
2. class與id的使用: id是唯一的並是父級的, class是可以重複的並是子級的, 所以id僅使用在大的模塊上, class可用在重複使用率高及子級中; id原則上都是由我分發框架文件時命名的, 爲JavaScript預留鉤子的除外;
3. 爲JavaScript預留鉤子的命名, 請以 js_ 起始, 比如: js_hide, js_show;
4. class與id命名: 大的框架命名比如header/footer/wrapper/left/right之類的在2中由i統一命名.其他樣式名稱由 小寫英文 &; 數字 &; _ 來組合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 儘量使用簡易的單詞組合; 總之, 命名要語義化, 簡明化.
5. 規避class與id命名(此條重要, 若有不明白請及時與i溝通):
a, 通過從屬寫法規避, 示例見d;
b, 取父級元素id/class命名部分命名, 示例見d;
c, 重複使用率高的命名, 請以自己代號加下劃線起始, 比如i_clear;
d, a,b兩條, 適用於在2中已建好框架的頁面, 如, 要在2中已建好框架的頁面代碼<div id="mainnav"></div>中加入新的div元素,
按a命名法則: <div id="mainnav"><div class="firstnav">...</div></div>,
樣式寫法: #mainnav .firstnav{.......}
按b命名法則: <div id="mainnav"><div class="main_firstnav">...</div></div>, 樣式寫法: .main_firstnav{.......}
6. css屬性書寫順序, 建議遵循 佈局定位屬性-->自身屬性-->文本屬性-->其他屬性. 此條可根據自身習慣書寫, 但儘量保證同類屬性寫在一起. 屬性列舉: 佈局定位屬性主要包括: margin、padding、float(包括clear)、position(相應的 top,right,bottom,left)、display、visibility、overflow等;自身屬性主要包括: width &; height &; background &; border; 文本屬性主要包括:font、color、text-align、text-decoration、text-indent等;其他屬性包括: list-style(列表樣式)、vertical-vlign、cursor、z-index(層疊順序) 、zoom等.我所列出的這些屬性只是最常用到的, 並不代表全部;
7. 書寫代碼前, 考慮並提高樣式重複使用率;
8. 充分利用html自身屬性及樣式繼承原理減少代碼量, 比如:
<ul class="list"><li>這兒是標題列表<span>2010-09-15</ul>
定義ul.list li{position:relative} ul.list li span{position:absolute; right:0}
即可實現日期居右顯示
9. 樣式表中中文字體名, 請務必轉碼成unicode碼, 以避免編碼錯誤時亂碼;
10. 景圖片請儘可能使用sprite技術, 減小http請求, 考慮到多人協作開發, sprite按模塊製作;
11. 使用table標籤時(儘量避免使用table標籤), 請不要用width/ height/cellspacing/cellpadding等table屬性直接定義表現, 應儘可能的利用table自身私有屬性分離結構與表現, 如thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing及cellpadding的css控制方法: table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;} , base.css文件中我會初始化表格樣式)
12. 杜絕使用<meta http-equiv="X-UA-Compatible" content="IE=7" /> 兼容ie8;
13. 用png圖片做圖片時, 要求圖片格式爲png-8格式,若png-8實在影響圖片質量或其中有半透明效果, 請爲ie6單獨定義背景:
background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);
14. 避免兼容性屬性的使用, 比如text-shadow || css3的相關屬性;
15. 減少使用影響性能的屬性, 比如position:absolute || float ;
16. 必須爲大區塊樣式添加註釋, 小區塊適量註釋;
17. 代碼縮進與格式: 建議單行書寫, 可根據自身習慣, 後期優化i會統一處理;
命名規則:
頭: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/
基本樣式:
/* CSS Document */
body {margin:0; padding:0; font:12px "/5B8B/4F53",san-serif;background:#fff;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}
table,td,tr,th{font-size:12px;}
li{list-style-type:none;}
img{vertical-align:top;border:0;}
ol,ul {list-style:none;}
h1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;}
address,cite,code,em,th {font-weight:normal; font-style:normal;}
.fB{font-weight:bold;}
.f12px{font-size:12px;}
.f14px{font-size:14px;}
.left{float:left;}
.right{float:right;}
a {color:#2b2b2b; text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {color:#ba2636;text-decoration:underline;}
a:active {color:#ba2636;}
重定義的最先,僞類其次,自定義最後,便於自己和他人閱讀!
不同瀏覽器上字號保持一致,字號建議用點數pt和像素px來定義,pt一般使用中文宋體的9pt 和11pt,px一般使用中文宋體12px 和14.7px 這是經過優化的字號,黑體字或者宋體字加粗時,一般選用11pt 和14.7px 的字號比較合適。中英文混排時,我們儘可能的將英文和數字定義爲verdana 和arial 兩種字體。
html 書寫規範
網頁製作細節 ---- head區代碼規範
head區是指HTML代碼的<head>和</head>之間的內容。
必須加入的標籤
公司版權註釋 <!--- The site is designed by EHM,Inc 07/2005 --->
網頁顯示字符集
簡體中文:<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
繁體中文:<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
英 語:<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
網頁製作者信息 <META name="author" content=" [email protected]">
網站簡介 <META NAME="DESCRIPTION" CONTENT="xxxxxxxxxxxxxxxxxxxxxxxxxx">
搜索關鍵字 <META NAME="keywords" CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,">
網頁的css規範 <LINK href="../css/style.css" rel="stylesheet" type="text/css">
網頁標題 <title>xxxxxxxxxxxxxxxxxx</title>
可以選擇加入的標籤
設定網頁的到期時間。一旦網頁過期,必須到服務器上重新調閱。
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
禁止瀏覽器從本地機的緩存中調閱頁面內容。
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
用來防止別人在框架裏調用你的頁面。
<META HTTP-EQUIV="Window-target" CONTENT="_top">
自動跳轉。
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.yahoo.com"> 5指時間停留5秒
網頁搜索機器人嚮導。用來告訴搜索機器人哪些頁面需要索引,哪些頁面不需要索引。
<META NAME="robots" CONTENT="none">
CONTENT的參數有all,none,index,noindex,follow,nofollow。默認是all。
收藏夾圖標 <link rel = "Shortcut Icon" href="favicon.ico">
所有的javascript的調用盡量採取外部調用.
<SCRIPT LANGUAGE="JavaScript" SRC="script/xxxxx.js"></SCRIPT>
附<body>標籤:
<body>標籤不屬於head區,這裏強調一下,爲了保證瀏覽器的兼容性,必須設置頁面背景<body bgcolor="#FFFFFF">
網頁製作細節 ---- 字體1. 在設定字體樣式時對於文字字號樣式和行間距應必須使用CSS樣式表。禁止在頁面中出現 <font size=?> 標記。2.在網頁中中文應首選使用宋體。英文和數字首選使用verdana 和arial 兩種字體。一般使用中文宋體的9pt 和11pt 或12px 和14.7px 這是經過優化的字號,黑體字或者宋體字加粗時,一般選用11pt 和14.7px 的字號比較合適。3. 爲了最大程度的發揮瀏覽器自動排版的功能,在一段完整的文字中請儘量不要使用
來人工干預分段。4.不同語種的文字之間應該有一個半角空格,但避頭的符號之前和避尾的符號之後除外,漢字之間的標點要用全角標點,英文字母和數字周圍的括號應該使用半角括號。 5. 請不要在網頁中連續出現多於一個的 也儘量少使用全角空格(英文字符集下,全角空格會變成亂碼),空白應該儘量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 圖片來實現。 6. 行距建議用百分比來定義,常用的兩個行距的值是line-height:120%/150%. 7. 排版中我們經常會遇到需要進行首行縮進的處理,不要使用 或者全角空格來達到效果,規範的做法是在樣式表中定義 p { text-indent: 2em; } 然後給每一段加上 標記,注意,一般情況下,請不要省略 結束標記 。
網頁製作細節 ---- 鏈接1. 網站中的鏈接路徑全部採用相對路徑,一般鏈接到某一目錄下的缺省文件的鏈接路徑不必寫全名,如我們不必這樣:<a href=”aboutus/index.htm”> 而應該這樣:<a href=”aboutus/”>,所有內頁指向首頁的鏈接寫成<a href=”/”>2. 在瀏覽器裏,當我們點擊空鏈接時,它會自動將當前頁面重置到首端,從而影響用戶正常的閱讀內容,我們用代碼“javascript:void(null)”代替原來的“#”標記
網頁製作細節 ---- 表格1px表格 style="border-collapse: collapse"實例如下:<table border="1" cellspacing="0" width="32" height="32" style="border-collapse: collapse"bordercolor="#000000" cellpadding="0"> <tr> <td></td></tr></table>設置亮、暗邊框顏色表格有亮邊框(bordercolorlight)和暗邊框(bordercolordark)兩個屬性可以對錶格樣式設置。<table border="1" width="500" bordercolorlight="#000000" bordercolordark="#FFFFFF">在寫 <table> 互相嵌套時,嚴格按照的規範,對於單獨的一個<table>來說,<table><tr>對齊,<td> 縮進兩個半角空格,<td> 中如果還有嵌套的表格,<table>也縮進兩個半角空格,如果<td>中沒有任何嵌套的表格,</td> 結束標記應該與 <td> 處於同一行,不要換行,如我們注意在源代碼中不應有這樣的代碼:<td><img src=”../images/sample.gif”> </td>而應該是這樣的:<td><img src=”../images/sample.gif”></td>這是因爲瀏覽器認爲換行相當於一個半角空格,以上不規範的寫法相當於無意中增加一個半角空格,如果確實有必要增加一個半角空格,也應該這樣寫: <td><img src=”../images/sample.gif”> </td>一個網頁要儘量避免用整個一張大表格,所有的內容都嵌套在這個大表格之內,因爲瀏覽器在解釋頁面的元素時,是以表格爲單位逐一顯示,如果一張網頁是嵌套在一個大表格之內,那麼很可能造成的後果就是,當瀏覽者敲入網址,他要先面對一片空白很長時間,然後所有的網頁內容同時出現。如果必須這樣做,請使用 <tbody>標記,以便能夠使這個大表格分塊顯示
網頁製作細節 ---- 下載速度首頁Flash 網頁大小應限定在 200K 以下,儘可能的使用矢量圖形和Action來減小動畫大小。非首頁靜態頁面含圖片大小應限定在 70K 左右,儘可能的使用背景顏色替換大塊同色圖片。
網頁製作細節 ---- includeasp標準寫法 <!--#include file="inc/index_top.asp" -->jsp 標準寫法 <%@ include file="../inc/index_top..jsp" %>
網頁製作細節 ---- Alt和Title 都是提示性語言標籤,請注意它們之間的區別。
在我們瀏覽網頁時,當鼠標停留在圖片對象或文字鏈接上時,在鼠標的右下角有時會出現一個提示信息框。對目標進行一定的註釋說明。在一些場合,它的作用是很重要的。
alt 用來給圖片來提示的。Title用來給鏈接文字或普通文字提示的。
用法如下:
<p Title="給鏈接文字提示">文字
<a href="#" Title="給鏈接文字提示">文字</a>
<img src="圖片.gif" alt="給圖片提示">
網頁製作細節 ---- 緩存
網頁不會被緩存
HTM網頁
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="0">
ASP網頁
Response.Expires = -1
Response.ExpiresAbsolute = Now() - 1
Response.cachecontrol = "no-cache"
網頁製作細節 ---- 瀏覽器兼容性創建站點時,應該明白訪問者可能使用各種 Web 瀏覽器。在已知的其他設計限制下,儘可能將站點設計爲具有最大的瀏覽器兼容性。目前使用的 Web 瀏覽器有二十多種,大多數已發行了多個版本。即使您只針對使用 Netscape Navigator 和 Microsoft Internet Explorer 的大多數 Web 用戶,但您應明確並不是每個人都在使用這兩種瀏覽器的最新版本。您的站點越複雜(在佈局、動畫、多媒體內容和交互方面),跨瀏覽器兼容的可能性就越小。例如,並非所有的瀏覽器都可以運行JavaScript。不使用特殊字符的純文本頁面或許能夠在任何瀏覽器中正確顯示,但比起有效地使用圖形、佈局和交互的頁面,這樣的頁面在美感上可能要差得多。所以,應儘量在最佳效果設計和最大瀏覽器兼容性設計之間取得平衡。所有的HTML 標籤的屬性都要用單引號或者雙引號括起,即我們應該寫 <a href=”url”> 而不 是 <a href=url>.
圖片處理細節 ---- banner全尺寸banner爲468X60px,半尺寸banner爲234X60px,小banner爲88X31px。另外120X90,120X60也是小圖標的標準尺寸。全尺寸banner不超過14K。普遍的banner尺寸760X100,750X120,468X60,468X95,728X90,585X140次級頁的pip尺寸360X300,336X280遊標:100X100或120X120
圖片處理細節 ---- LOGO的國際標準規範爲了便於INTERNET上信息的傳播,一個統一的國際標準是需要的。實際上已經有了這樣的一整套標準。其中關於網站的LOGO,目前有三種規格:88*31 這是互聯網上最普遍的LOGO規格。120*60 這種規格用於一般大小的LOGO。120*90 這種規格用於大型LOGO。
圖片處理細節 ---- 頁面修飾圖片處理圖片經過優化以加快下載的速度,有較佳的視覺空間效果,用圖要與頁面風格、頁面內容相符;製作精美,細節處理得當。