css注釋

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命名規則：

?．?件命名規范

全局樣式：；

框架布局：；

字體樣式：；

鏈接樣式：；

打印樣式：；

主要的

專欄

主題

主要的

模塊

基本共?

表單

補丁

?．頁?結構

容器:container

頁頭：header

內容：content

頁?主體：main

頁尾：footer

欄?：column

頁?外圍控制整體布局寬度：wrapper

左右中：leftrightcenter

三．導航

導航：nav

主導航：mainbav

?導航：subnav

頂導航：topnav

邊導航：sidebar

左導航：leftsidebar

右導航：rightsidebar

菜單：menu

?菜單：submenu

摘要:summary

四．功能

標志：logo

?告：banner

登陸：login

登錄條：loginbar

注冊：regsiter

搜索：arch

功能區：shop

標題：title

加?：joinus

狀態：status

按鈕：btn

滾動：scroll

標簽頁：tab

?章列表：list

提?信息：msg

當前的:current

?技巧：tips

圖標:icon

注釋：note

指南：guild

服務：rvice

熱點：hot

新聞：news

下載：download

投票：vote

合作伙伴：partner

友情鏈接：link

版權：copyright

Containerdiv#container容器

Layout#layout布局

Headerorbannerdiv#head,#header頁頭部分

Footerdiv#foot,#footer頁腳部分

Navigationlist#nav主導航

Sub-navigationlist#subNav?級導航

Menu#menu菜單

SubMenu#submenu?菜單

Leftorrightsidecolumns#sidebar_a,#sidebar_b左邊欄或右邊欄

Maindiv#main頁?主體

Tag#tag標簽

Message#msg#message提?信息

Tips#tips?技巧

Vote#vote投票

FriendLink#friendlink友情連接

Title#title標題

Summary#summary摘要

Searchinput#archInput搜索輸?框

Searchoutput#arch_output搜索輸出和搜索結果相似

Search#arch搜索

Searchbar#archBar搜索條

Searchresults#arch_results搜索結果

Copyrightinformation#copyright版權信息

brand#branding商標

branding-logo#logoLOGO

Siteinformation#siteinfo?站信息

Copyrightinformationetc.#siteinfoLegal法律聲明

Designerorothercredits#siteinfoCredits信譽

Joinus#joinus加?我們

Partnershipopportunities#partner合作伙伴

Services#rvice服務

Regsiter#regsiter注冊

Arrowarr/arrow箭頭

Little#little標題

Websitemap#sitemap?站地圖

List#list列表

Homepage#homepage?頁

Subpagesubpage?級頁??頁?

Toolbar#tool,#toolbar?具條

Nextpulls#drop下拉

Nextpullsmenu#dorpmenu下拉菜單

Status#status狀態

Containerdiv#container容器

Headerorbannerdiv#header頁頭部分

Mainorglobalnavigationdiv#mainNav主導航

Menu#menu菜單

SubMenu#submenu?菜單

Leftorrightsidecolumns#sidebarA,#sidebarB左邊欄或右邊欄

Maindiv#main頁?主體

Contentdiv#content內容部分

Themaincontentarea#contentMain主要內容區域

Footerdiv#footer頁腳部分

Tag#tag標簽

Message#msg#message提?信息

Tips#tips?技巧

Vote#vote投票

FriendLink#friendlink友情連接

Title#title標題

Summary#summary摘要

Sub-navigationlist#subNav?級導航

Searchinput#archInput搜索輸?框

Searchoutput#archOutput搜索輸出和搜索結果相似

Search#arch搜索

Searchresults#archResults搜索結果

Copyrightinformation#copyright版權信息

brand#branding商標

branding-logo#brandingLogoLOGO

Siteinformation#siteinfo?站信息

Copyrightinformationetc.#siteinfoLegal法律聲明

Designerorothercredits#siteinfoCredits信譽

Joinus#joinus加?我們

Partnershipopportunities#partner合作伙伴

Services#rvice服務

Regsiter#regsiter注冊

Status#status狀態

ts產品

tsPrices產品價格

tsDescription產品描述

tsReview產品評論

Editor'Review編輯評論

lea最新產品

her?產商

shot縮略圖

常見問題

d關鍵詞

博客

論壇

五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{}

/*=====主導航=====*/

#mainMenu{

width:100%;

height:30px;

background:url(images/mainMenu_)repeat-x;

}

#mainMenuulli{

float:left;

line-height:30px;

margin-right:1px;

cursor:pointer;

}

/*=====主導航結束=====*/

9、?標?勢：

在XHTML標準中，hand只被IE識別，當需要將?標?勢轉換為“?形”時，則將“hand”換為“pointer”，即“cursor:pointer;”

10．注釋書寫規范

1、?間注釋：

直接寫于屬性值后?，如：

.arch{

border:1pxsolid#fff;/*定義搜索輸?框邊框*/

background:url(../images/)no-report#333;/*定義搜索框的背景*/

}

2、整段注釋：

分別在開始及結束地?加?注釋，如：

/*=====搜索條=====*/

.arch{

border:1pxsolid#fff;

background:url(../images/)no-repeat#333;

}

/*=====搜索條結束=====*/

3．協助注釋

?作者維護時所加?的表?修改時間、修改?等標識信息。

在區域注釋或單?注釋的基礎上加上修改?和修改時間等信息。

例(區域注釋)：

[/pre]

和修改時間]*/[/pre].class{[/pre]...[/pre]}[/pre].class{[/pre]...[/pre]}[/pre]/*=E注釋內容[修改?和修改時間]*/[/pre]例(單?注釋)：[/pre]

1、不同類有相同屬性及屬性值的縮寫：

對于兩個不同的類，但是其中有部分相同甚?是全部相同的屬性及屬性值時，應對其加以合并縮寫，特別是當有多個不同的類?有相同的屬

性及屬性值時，合并縮寫可以減少代碼量并易于控制。如：

#mainMenu{

background:url(../images/);

border:1pxsolid#333;

width:100%;

height:30px;

overflow:hidden;

}

#subMenu{

background:url(../images/);

border:1pxsolid#333;

width:100%;

height:20px;

overflow:hidden;

}

兩個不同類的屬性值有重復之處，剛可以縮寫為：

#mainMenu,#subMenu{

background:url(../images/);

border:1pxsolid#333;

width:100%;

overflow:hidden;

}

#mainMenu{height:30px;}

#subMenu{height:20px;}

2、同?屬性的縮寫：

同?屬性根據它的屬性值也可以進?簡寫，如：

.arch{

background-color:#333;

background-image:url(../images/);

background-repeat:no-repeat;

background-position:50%50%;

}

.arch{

background:#333url(../images/)no-repeat50%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:10px8px12px5px;

Padding:10px8px12px5px;

}

?如果當上邊與下邊、左邊與右邊的邊框屬性值相同時，則屬性值可以直接縮寫為兩個，如：.btn{

margin-top:10px;

margin-right:5px;

margin-bottom:10px;

margin-left:5px;

}

縮寫為：.btn{margin:10px5px;}

?當上下左右四個邊框的屬性值都相同時，則可以直接縮寫成?個，如：

.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下的CSShack可寫為：

.archInput{

background-color:#333;/*三者皆可*/

*background-color:#666!important;/*僅IE7*/

*background-color:#999;/*僅IE6及IE6以下*/

}

?般三者的書寫順序為：FF、IE7、IE6.

寫法?：

IE6可識別“_”，?IE7及FF皆不能識別，所以當只針對IE6與IE7及FF之間的區別時，可這樣書寫：

.archInput{

background-color:#333;/*通?*/

_background-color:#666;/*僅IE6可識別*/

}

寫法三：

*+html與*html是IE特有的標簽,Firefox暫不?持。

.archInput{background-color:#333;}

*Input{background-color:#666;}/*僅IE6*/

*+Input{background-color:#555;}/*僅IE7*/

屏蔽IE瀏覽器：

lect是選擇符，根據情況更換。第?句是MAC上safari瀏覽器獨有的。

*:lang(zh)lect{font:12px!important;}/*FF的專?*/

lect:empty{font:12px!important;}/*safari可見*/

IE6可識別：

這?主要是通過CSS注釋分開?個屬性與值，注釋在冒號前。

lect{display/*IE6不識別*/:none;}

IE的if條件hack寫法：

所有的IE可識別：

OnlyIE

只有IE5.0可以識別:

OnlyIE5.0

IE5.0包換IE5.5都可以識別:

OnlyIE5.0+

僅IE6可識別:

OnlyIE6-

IE6以及IE6以下的IE5.x都可識別:

OnlyIE6/+

僅IE7可識別:

OnlyIE7/-

13、清除浮動：

在Firefox中，當?級都為浮動時，那么?級的?度就?法完全的包住整個?級，那么這時?這個清除浮動的HACK來對?級做?次定義，那

么就可以解決這個問題。

lect:after{

content:”.”;

display:block;

height:0;

clear:both;

visibility:hidden;

}

注意事項:

和class命名采?該版塊的英?單詞或組合命名，并第?個單詞?寫，第?個單詞?個字母?寫，如:newRelea（最新產

品/new+Relea)

常?類的命名應盡量以常見英?單詞為準，做到通俗易懂，并在適當的地?加以注釋。對于?級類/ID命名，則采?組合書寫的模式，后?個

單詞的?字母應?寫：諸如“搜索框”則應命名為“archInput”、“搜索圖標”命名這“archIcon”、“搜索按鈕”命名為“archBtn”……

樣式表各區塊?注釋說明

3.盡量使?英?命名原則

4.不?加中杠和下劃線

5.盡量不縮寫，除??看就明?的單詞

6．檢查HTML元素是否有拼寫錯誤、是否忘記結束標記

即使是??也經常會弄錯div的嵌套關系。可以?dreamweaver的驗證功能檢查?下有?錯誤。

7.檢查CSS是否正確

檢查?下有?拼寫錯誤、是否忘記結尾的}等。可以利?CleanCSS來檢查CSS的拼寫錯誤。CleanCSS本是為CSS減肥的?具，但也能檢

查出拼寫錯誤。

8.確定錯誤發?的位置

如果錯誤影響了整體布局，則可以逐個刪除div塊，直到刪除某個div塊后顯?恢復正常，即可確定錯誤發?的位置。

9.利?border屬性確定出錯元素的布局特性

使?float屬性布局?不??就會出錯。這時為元素添加border屬性確定元素邊界，錯誤原因即?落?出。

元素的?元素不能指定clear屬性

MacIE下如果對float的元素的?元素使?clear屬性，周圍的float元素布局就會混亂。這是MacIE的著名的bug，倘若不知道就會?彎路。

元素務必指定width屬性

很多瀏覽器在顯?未指定width的float元素時會有bug。所以不管float元素的內容如何，?定要為其指定width屬性。

另外指定元素時盡量使?em?不是px做單位。

元素不能指定margin和padding等屬性

IE在顯?指定了margin和padding的float元素時有bug。因此不要對float元素指定margin和padding屬性（可以在float元素內部嵌套?個div來

設置margin和padding）。也可以使?hack?法為IE指定特別的值。

元素的寬度之和要?于100%

如果float元素的寬度之和正好是100%，某些古?的瀏覽器將不能正常顯?。因此請保證寬度之和?于99%。

14.是否重設了默認的樣式？

某些屬性如margin、padding等，不同瀏覽器會有不同的解釋。因此最好在開發前?先將全體的margin、padding設置為0、列表樣式設置為

none等。

15、float的div?定要閉合。

例如：(其中floatA、floatB的屬性已經設置為float:left;)

程序代碼

<#divid="floatA">

<#divid="floatB">

<#divid="NOTfloatC">

這?的NOTfloatC并不希望繼續平移，?是希望往下排。

這段代碼在IE中毫?問題，問題出在FF。原因是NOTfloatC并?float標簽，必須將float標簽閉合。在程序代碼

<#divclass="floatB">

<#divclass="NOTfloatC">

之間加上程序代碼

<#divclass="clear">

這個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:5pxauto;}

16、margin加倍的問題。

設置為float的div在ie下設置的margin會加倍。這是?個ie6都存在的bug。

解決?案是在這個div??加上display:inline;

例如：

<#divid="imfloat">

相應的css為

程序代碼

#IamFloat{

float:left;

margin:5px;/*IE下理解為10px*/

display:inline;/*IE下再理解為5px*/}

17、關于容器的包涵關系

很多時候，尤其是容器內有平?布局，例如兩、三個float的div時，寬度很容易出現問題。在IE中，外層的寬度會被內層更寬的div擠破。?

定要?Photoshop或者Firework量取像素級的精度。

18、關于?度的問題

如果是動態地添加內容，?度最好不要定義。瀏覽器可以?動伸縮，然?如果是靜態的內容，?度最好定好。（似乎有時候不會?動往下

撐開，不知道具體怎么回事）

常見兼容問題：

E影響CSS處理

:div設置margin-left,margin-right為auto時已經居中,IE不?

:body設置text-align時,div需要設置margin:auto(主要是margin-left,margin-right)?可居中

:設置padding后,div會增加height和width,但IE不會,故需要?!important多設?個height和width

:?持!important,IE則忽略,可?!important為FF特別設置樣式

的垂直居中問題:vertical-align:middle;將?距增加到和整個DIV?樣?line-height:200px;然后插??字，就垂直居中了。缺點是要控

制內容不要換?

:pointer可以同時在IEFF中顯?游標?指狀，hand僅IE可以

:鏈接加邊框和背景?，需設置display:block,同時設置float:left保證不換?。參照menubar,給a和menubar設置?度是為了避免底

邊顯?錯位,若不設height,可以在menubar中插??個空格。

9.在mozillafirefox和IE中的BOX模型解釋不?致導致相差2px解決?法：

div{margin:30px!important;margin:28px;}

注意這兩個margin的順序?定不能寫反，據阿捷的說法!important這個屬性IE不能識別，但別的瀏覽器可以識別。所以在IE下其實解釋成

這樣：

div{maring:30px;margin:28px}

重復定義的話按照最后?個來執?，所以不可以只寫margin:XXpx!important;

5和IE6的BOX解釋不?致

IE5下程序代碼

div{width:300px;margin:010px010px;}

div的寬度會被解釋為300px-10px(右填充)-10px(左填充)最終div的寬度為280px，?在IE6和其他瀏覽器上寬度則是以300px+10px(右填

充)+10px(左填充)=320px來計算的。這時我們可以做如下修改

div{width:300px!important;width/**/:340px;margin:010px010px}

關于這個/**/是什么我也不太明?，只知道IE5和firefox都?持但IE6不?持，如果有?理解的話，請告訴我?聲，謝了！：）

標簽在Mozilla中默認是有padding值的,?在IE中只有margin有值所以先定義

程序代碼ul{margin:0;padding:0;}

注意書寫格式的問題：

?定要注意縮進。對齊。要有良好的編程習慣。