css注釋

css規(guī)范?檔

CSS書(shū)寫(xiě)順序*{

/*顯?屬性*/

display

position

float

clear

cursor

…

/*盒模型*/

margin

padding

width

height

/*排版*/

vertical-align

white-space

text-decoration

text-align

…

/*?字*/

color

font

content

/*邊框背景為什么要把boder和background放在最后的原因是修改的頻率會(huì)較之前的頻繁，放在最后查看起來(lái)?便，哈哈。*/

border

background

}

下表順序?yàn)閺纳系较拢瑥淖蟮接遥?/p>

========================

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命名規(guī)則：

?．?件命名規(guī)范

全局樣式：；

框架布局：；

字體樣式：；

鏈接樣式：；

打印樣式：；

主要的

專(zhuān)欄

主題

主要的

模塊

基本共?

表單

補(bǔ)丁

?．頁(yè)?結(jié)構(gòu)

容器:container

頁(yè)頭：header

內(nèi)容：content

頁(yè)?主體：main

頁(yè)尾：footer

欄?：column

頁(yè)?外圍控制整體布局寬度：wrapper

左右中：leftrightcenter

三．導(dǎo)航

導(dǎo)航：nav

主導(dǎo)航：mainbav

?導(dǎo)航：subnav

頂導(dǎo)航：topnav

邊導(dǎo)航：sidebar

左導(dǎo)航：leftsidebar

右導(dǎo)航：rightsidebar

菜單：menu

?菜單：submenu

摘要:summary

四．功能

標(biāo)志：logo

?告：banner

登陸：login

登錄條：loginbar

注冊(cè)：regsiter

搜索：arch

功能區(qū)：shop

標(biāo)題：title

加?：joinus

狀態(tài)：status

按鈕：btn

滾動(dòng)：scroll

標(biāo)簽頁(yè)：tab

?章列表：list

提?信息：msg

當(dāng)前的:current

?技巧：tips

圖標(biāo):icon

注釋?zhuān)簄ote

指南：guild

服務(wù)：rvice

熱點(diǎn)：hot

新聞：news

下載：download

投票：vote

合作伙伴：partner

友情鏈接：link

版權(quán)：copyright

Containerdiv#container容器

Layout#layout布局

Headerorbannerdiv#head,#header頁(yè)頭部分

Footerdiv#foot,#footer頁(yè)腳部分

Navigationlist#nav主導(dǎo)航

Sub-navigationlist#subNav?級(jí)導(dǎo)航

Menu#menu菜單

SubMenu#submenu?菜單

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

Maindiv#main頁(yè)?主體

Tag#tag標(biāo)簽

Message#msg#message提?信息

Tips#tips?技巧

Vote#vote投票

FriendLink#friendlink友情連接

Title#title標(biāo)題

Summary#summary摘要

Searchinput#archInput搜索輸?框

Searchoutput#arch_output搜索輸出和搜索結(jié)果相似

Search#arch搜索

Searchbar#archBar搜索條

Searchresults#arch_results搜索結(jié)果

Copyrightinformation#copyright版權(quán)信息

brand#branding商標(biāo)

branding-logo#logoLOGO

Siteinformation#siteinfo?站信息

Copyrightinformationetc.#siteinfoLegal法律聲明

Designerorothercredits#siteinfoCredits信譽(yù)

Joinus#joinus加?我們

Partnershipopportunities#partner合作伙伴

Services#rvice服務(wù)

Regsiter#regsiter注冊(cè)

Arrowarr/arrow箭頭

Little#little標(biāo)題

Websitemap#sitemap?站地圖

List#list列表

Homepage#homepage?頁(yè)

Subpagesubpage?級(jí)頁(yè)??頁(yè)?

Toolbar#tool,#toolbar?具條

Nextpulls#drop下拉

Nextpullsmenu#dorpmenu下拉菜單

Status#status狀態(tài)

Containerdiv#container容器

Headerorbannerdiv#header頁(yè)頭部分

Mainorglobalnavigationdiv#mainNav主導(dǎo)航

Menu#menu菜單

SubMenu#submenu?菜單

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

Maindiv#main頁(yè)?主體

Contentdiv#content內(nèi)容部分

Themaincontentarea#contentMain主要內(nèi)容區(qū)域

Footerdiv#footer頁(yè)腳部分

Tag#tag標(biāo)簽

Message#msg#message提?信息

Tips#tips?技巧

Vote#vote投票

FriendLink#friendlink友情連接

Title#title標(biāo)題

Summary#summary摘要

Sub-navigationlist#subNav?級(jí)導(dǎo)航

Searchinput#archInput搜索輸?框

Searchoutput#archOutput搜索輸出和搜索結(jié)果相似

Search#arch搜索

Searchresults#archResults搜索結(jié)果

Copyrightinformation#copyright版權(quán)信息

brand#branding商標(biāo)

branding-logo#brandingLogoLOGO

Siteinformation#siteinfo?站信息

Copyrightinformationetc.#siteinfoLegal法律聲明

Designerorothercredits#siteinfoCredits信譽(yù)

Joinus#joinus加?我們

Partnershipopportunities#partner合作伙伴

Services#rvice服務(wù)

Regsiter#regsiter注冊(cè)

Status#status狀態(tài)

ts產(chǎn)品

tsPrices產(chǎn)品價(jià)格

tsDescription產(chǎn)品描述

tsReview產(chǎn)品評(píng)論

Editor'Review編輯評(píng)論

lea最新產(chǎn)品

her?產(chǎn)商

shot縮略圖

常見(jiàn)問(wèn)題

d關(guān)鍵詞

博客

論壇

五class的命名:

(1)顏?:使?顏?的名稱(chēng)或者16進(jìn)制代碼,如

.red{color:red;}

.f60{color:#f60;}

.ff8600{color:#ff8600;}

(2)字體??,直接使?"font+字體??"作為名稱(chēng),如

.font12px{font-size:12px;}

.font9pt{font-size:9pt;}

(3)對(duì)齊樣式,使?對(duì)齊?標(biāo)的英?名稱(chēng),如

.left{float:left;}

.bottom{float:bottom;}

(4)標(biāo)題欄樣式,使?"類(lèi)別+功能"的?式命名,如

.barnews{}

.barproduct{}

/*=====主導(dǎo)航=====*/

#mainMenu{

width:100%;

height:30px;

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

}

#mainMenuulli{

float:left;

line-height:30px;

margin-right:1px;

cursor:pointer;

}

/*=====主導(dǎo)航結(jié)束=====*/

9、?標(biāo)?勢(shì)：

在XHTML標(biāo)準(zhǔn)中，hand只被IE識(shí)別，當(dāng)需要將?標(biāo)?勢(shì)轉(zhuǎn)換為“?形”時(shí)，則將“hand”換為“pointer”，即“cursor:pointer;”

10．注釋書(shū)寫(xiě)規(guī)范

1、?間注釋?zhuān)?/p>

直接寫(xiě)于屬性值后?，如：

.arch{

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

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

}

2、整段注釋?zhuān)?/p>

分別在開(kāi)始及結(jié)束地?加?注釋?zhuān)纾?/p>

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

.arch{

border:1pxsolid#fff;

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

}

/*=====搜索條結(jié)束=====*/

3．協(xié)助注釋

?作者維護(hù)時(shí)所加?的表?修改時(shí)間、修改?等標(biāo)識(shí)信息。

在區(qū)域注釋或單?注釋的基礎(chǔ)上加上修改?和修改時(shí)間等信息。

例(區(qū)域注釋)：

[/pre]

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

1、不同類(lèi)有相同屬性及屬性值的縮寫(xiě)：

對(duì)于兩個(gè)不同的類(lèi)，但是其中有部分相同甚?是全部相同的屬性及屬性值時(shí)，應(yīng)對(duì)其加以合并縮寫(xiě)，特別是當(dāng)有多個(gè)不同的類(lèi)?有相同的屬

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

#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;

}

兩個(gè)不同類(lèi)的屬性值有重復(fù)之處，剛可以縮寫(xiě)為：

#mainMenu,#subMenu{

background:url(../images/);

border:1pxsolid#333;

width:100%;

overflow:hidden;

}

#mainMenu{height:30px;}

#subMenu{height:20px;}

2、同?屬性的縮寫(xiě)：

同?屬性根據(jù)它的屬性值也可以進(jìn)?簡(jiǎn)寫(xiě)，如：

.arch{

background-color:#333;

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

background-repeat:no-repeat;

background-position:50%50%;

}

.arch{

background:#333url(../images/)no-repeat50%50%;

}

3、內(nèi)外側(cè)邊框的縮寫(xiě)：

在CSS中關(guān)于內(nèi)外側(cè)邊框的距離是按照上、右、下、左的順序來(lái)排列的，當(dāng)這四個(gè)屬性值不同時(shí)也可直接縮寫(xiě)，如：

.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;

}

則可縮寫(xiě)為：

.btn{

Margin:10px8px12px5px;

Padding:10px8px12px5px;

}

?如果當(dāng)上邊與下邊、左邊與右邊的邊框?qū)傩灾迪嗤瑫r(shí)，則屬性值可以直接縮寫(xiě)為兩個(gè)，如：.btn{

margin-top:10px;

margin-right:5px;

margin-bottom:10px;

margin-left:5px;

}

縮寫(xiě)為：.btn{margin:10px5px;}

?當(dāng)上下左右四個(gè)邊框的屬性值都相同時(shí)，則可以直接縮寫(xiě)成?個(gè)，如：

.btn{

margin-top:10px;

margin-right:10px;

margin-bottom:10px;

margin-left:10px;

}

縮寫(xiě)為：

.btn{margin:10px;}

4、顏?值的縮寫(xiě)：

當(dāng)RGB三個(gè)顏?值數(shù)值相同時(shí)，可縮寫(xiě)顏?值代碼。如：

.menu{color:#ff3333;}

可縮寫(xiě)為:

.menu{color:#f33;}

12．hack書(shū)寫(xiě)規(guī)范

因?yàn)椴煌瑸g覽器對(duì)W3C標(biāo)準(zhǔn)的?持不?樣，各個(gè)瀏覽器對(duì)于頁(yè)?的解釋呈視也不盡相同，?如IE在很多情況下就與FF存在3px的差距，對(duì)于

這些差異性，就需要利?css的hack來(lái)進(jìn)?調(diào)整，當(dāng)然在沒(méi)有必要的情況下，最好不要寫(xiě)hack來(lái)進(jìn)?調(diào)整，避免因?yàn)閔ack?導(dǎo)致頁(yè)?出現(xiàn)問(wèn)

題。

1、IE6、IE7、Firefox之間的兼容寫(xiě)法：

寫(xiě)法?：

IE都能識(shí)別*;標(biāo)準(zhǔn)瀏覽器(如FF)不能識(shí)別*；

IE6能識(shí)別*，但不能識(shí)別!important,

IE7能識(shí)別*，也能識(shí)別!important;

FF不能識(shí)別*，但能識(shí)別!important;

根據(jù)上述表達(dá)，同?類(lèi)/ID下的CSShack可寫(xiě)為：

.archInput{

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

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

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

}

?般三者的書(shū)寫(xiě)順序?yàn)椋篎F、IE7、IE6.

寫(xiě)法?：

IE6可識(shí)別“_”，?IE7及FF皆不能識(shí)別，所以當(dāng)只針對(duì)IE6與IE7及FF之間的區(qū)別時(shí)，可這樣書(shū)寫(xiě)：

.archInput{

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

_background-color:#666;/*僅IE6可識(shí)別*/

}

寫(xiě)法三：

*+html與*html是IE特有的標(biāo)簽,Firefox暫不?持。

.archInput{background-color:#333;}

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

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

屏蔽IE瀏覽器：

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

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

lect:empty{font:12px!important;}/*safari可見(jiàn)*/

IE6可識(shí)別：

這?主要是通過(guò)CSS注釋分開(kāi)?個(gè)屬性與值，注釋在冒號(hào)前。

lect{display/*IE6不識(shí)別*/:none;}

IE的if條件hack寫(xiě)法：

所有的IE可識(shí)別：

OnlyIE

只有IE5.0可以識(shí)別:

OnlyIE5.0

IE5.0包換IE5.5都可以識(shí)別:

OnlyIE5.0+

僅IE6可識(shí)別:

OnlyIE6-

IE6以及IE6以下的IE5.x都可識(shí)別:

OnlyIE6/+

僅IE7可識(shí)別:

OnlyIE7/-

13、清除浮動(dòng)：

在Firefox中，當(dāng)?級(jí)都為浮動(dòng)時(shí)，那么?級(jí)的?度就?法完全的包住整個(gè)?級(jí)，那么這時(shí)?這個(gè)清除浮動(dòng)的HACK來(lái)對(duì)?級(jí)做?次定義，那

么就可以解決這個(gè)問(wèn)題。

lect:after{

content:”.”;

display:block;

height:0;

clear:both;

visibility:hidden;

}

注意事項(xiàng):

和class命名采?該版塊的英?單詞或組合命名，并第?個(gè)單詞?寫(xiě)，第?個(gè)單詞?個(gè)字母?寫(xiě)，如:newRelea（最新產(chǎn)

品/new+Relea)

常?類(lèi)的命名應(yīng)盡量以常見(jiàn)英?單詞為準(zhǔn)，做到通俗易懂，并在適當(dāng)?shù)牡?加以注釋。對(duì)于?級(jí)類(lèi)/ID命名，則采?組合書(shū)寫(xiě)的模式，后?個(gè)

單詞的?字母應(yīng)?寫(xiě)：諸如“搜索框”則應(yīng)命名為“archInput”、“搜索圖標(biāo)”命名這“archIcon”、“搜索按鈕”命名為“archBtn”……

樣式表各區(qū)塊?注釋說(shuō)明

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

4.不?加中杠和下劃線

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

6．檢查HTML元素是否有拼寫(xiě)錯(cuò)誤、是否忘記結(jié)束標(biāo)記

即使是??也經(jīng)常會(huì)弄錯(cuò)div的嵌套關(guān)系。可以?dreamweaver的驗(yàn)證功能檢查?下有?錯(cuò)誤。

7.檢查CSS是否正確

檢查?下有?拼寫(xiě)錯(cuò)誤、是否忘記結(jié)尾的}等。可以利?CleanCSS來(lái)檢查CSS的拼寫(xiě)錯(cuò)誤。CleanCSS本是為CSS減肥的?具，但也能檢

查出拼寫(xiě)錯(cuò)誤。

8.確定錯(cuò)誤發(fā)?的位置

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

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

使?float屬性布局?不??就會(huì)出錯(cuò)。這時(shí)為元素添加border屬性確定元素邊界，錯(cuò)誤原因即?落?出。

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

MacIE下如果對(duì)float的元素的?元素使?clear屬性，周?chē)膄loat元素布局就會(huì)混亂。這是MacIE的著名的bug，倘若不知道就會(huì)?彎路。

元素務(wù)必指定width屬性

很多瀏覽器在顯?未指定width的float元素時(shí)會(huì)有bug。所以不管float元素的內(nèi)容如何，?定要為其指定width屬性。

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

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

IE在顯?指定了margin和padding的float元素時(shí)有bug。因此不要對(duì)float元素指定margin和padding屬性（可以在float元素內(nèi)部嵌套?個(gè)div來(lái)

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

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

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

14.是否重設(shè)了默認(rèn)的樣式？

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

none等。

15、float的div?定要閉合。

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

程序代碼

<#divid="floatA">

<#divid="floatB">

<#divid="NOTfloatC">

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

這段代碼在IE中毫?問(wèn)題，問(wèn)題出在FF。原因是NOTfloatC并?float標(biāo)簽，必須將float標(biāo)簽閉合。在程序代碼

<#divclass="floatB">

<#divclass="NOTfloatC">

之間加上程序代碼

<#divclass="clear">

這個(gè)div?定要注意聲明位置，?定要放在最恰當(dāng)?shù)牡?，?且必須與兩個(gè)具有float屬性的div同級(jí)，之間不能存在嵌套關(guān)系，否則會(huì)產(chǎn)?異

常。

并且將clear這種樣式定義為為如下即可：

程序代碼

.clear{

clear:both;}

此外，為了讓?度能?動(dòng)適應(yīng)，要在wrapper??加上overflow:hidden;

當(dāng)包含float的box的時(shí)候，?度?動(dòng)適應(yīng)在IE下?效，這時(shí)候應(yīng)該觸發(fā)IE的layout私有屬性(萬(wàn)惡的IE啊！)?zoom:1;可以做到，這樣就達(dá)

到了兼容。

例如某?個(gè)wrapper如下定義：

程序代碼

.colwrapper{

overflow:hidden;

zoom:1;

margin:5pxauto;}

16、margin加倍的問(wèn)題。

設(shè)置為float的div在ie下設(shè)置的margin會(huì)加倍。這是?個(gè)ie6都存在的bug。

解決?案是在這個(gè)div??加上display:inline;

例如：

<#divid="imfloat">

相應(yīng)的css為

程序代碼

#IamFloat{

float:left;

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

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

17、關(guān)于容器的包涵關(guān)系

很多時(shí)候，尤其是容器內(nèi)有平?布局，例如兩、三個(gè)float的div時(shí)，寬度很容易出現(xiàn)問(wèn)題。在IE中，外層的寬度會(huì)被內(nèi)層更寬的div擠破。?

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

18、關(guān)于?度的問(wèn)題

如果是動(dòng)態(tài)地添加內(nèi)容，?度最好不要定義。瀏覽器可以?動(dòng)伸縮，然?如果是靜態(tài)的內(nèi)容，?度最好定好。（似乎有時(shí)候不會(huì)?動(dòng)往下

撐開(kāi)，不知道具體怎么回事）

常見(jiàn)兼容問(wèn)題：

E影響CSS處理

:div設(shè)置margin-left,margin-right為auto時(shí)已經(jīng)居中,IE不?

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

:設(shè)置padding后,div會(huì)增加height和width,但I(xiàn)E不會(huì),故需要?!important多設(shè)?個(gè)height和width

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

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

制內(nèi)容不要換?

:pointer可以同時(shí)在IEFF中顯?游標(biāo)?指狀，hand僅IE可以

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

邊顯?錯(cuò)位,若不設(shè)height,可以在menubar中插??個(gè)空格。

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

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

注意這兩個(gè)margin的順序?定不能寫(xiě)反，據(jù)阿捷的說(shuō)法!important這個(gè)屬性IE不能識(shí)別，但別的瀏覽器可以識(shí)別。所以在IE下其實(shí)解釋成

這樣：

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

重復(fù)定義的話按照最后?個(gè)來(lái)執(zhí)?，所以不可以只寫(xiě)margin:XXpx!important;

5和IE6的BOX解釋不?致

IE5下程序代碼

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

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

充)+10px(左填充)=320px來(lái)計(jì)算的。這時(shí)我們可以做如下修改

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

關(guān)于這個(gè)/**/是什么我也不太明?，只知道IE5和firefox都?持但I(xiàn)E6不?持，如果有?理解的話，請(qǐng)告訴我?聲，謝了！：）

標(biāo)簽在Mozilla中默認(rèn)是有padding值的,?在IE中只有margin有值所以先定義

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

注意書(shū)寫(xiě)格式的問(wèn)題：

?定要注意縮進(jìn)。對(duì)齊。要有良好的編程習(xí)慣。