| 導購 | 订阅 | 在线投稿
分享
 
 
 

Mozilla Firefox 建議的CSS書寫順序

2008-10-02 07:47:36  編輯來源:互聯網  简体版  手機版  移動版  評論  字體: ||

mozilla.org Base Styles

* maintained by fantasai

* (classes defined in the Markup Guide -http://mozilla.org/contribute/writing/markup)

*/

/* Suggested order:

//顯示屬性

* display

* list-style

* position

* float

* clear

//自身屬性

* width

* height

* margin

* padding

* border

* background

//文本屬性

* color

* font

* text-decoration

* text-align

* vertical-align

* white-space

* other text

* content

*

整理了一下自己寫CSS時的順序,跟大家分享下。

下表順序爲從上到下,從左到右:

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

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

.class{

background-color:# FFFF00;/*所有浏覽器*/

* background-color:#00FF00;/*IE*/

_ background-color:# 00FFFF;/*IE6*/

}

@media all and(min-width:0){

.class{

background-color:#FF00FF; /*Opera */

} }/*只有Opera識別*/

@media all and (min-width:0){

.class{

background-color:#FF00FF; /*Opera和Sa */

html* .class{

background-color:# 808080; /*Sa*/

}

}}

注:這裏所指代的 Safari 和 Opera 一般爲最新版本。

Chrome的hack寫法:

body:nth-of-type(1) p{color:#333333;}

2、僅 Firefox 3 和 IE7 識別的 Hack

selector, x:-moz-any-link, x:default {

/* Firefox 3 and IE7 rules here */

}

可簡單解決IE與FF之間的兼容問題(保持FF,IE7,IE的順序),但這種方式貌似對加載有一定的影響 !

Update2007-12-31 NND快被Opera個丫的折騰崩潰了:

.e {/*FF OP*/

background-color: #FF0000

}

html* .e{/*Sa IE7 OP*/

background-color:#FF00FF

}

*+html .e{

background-color:#000000;/*OP*/

*background-color:#0000FF;/*IE7*/

}

* html .e{/*IE6*/

background-color:#00FFFF

}

對于 IE8 beta1 可以嘗試下面的 Hack:

/*/ selector { … } /**/

此規則僅 IE8 beta1 識別,而其他 A-grade 浏覽器都不識別

mozilla.org Base Styles * maintained by fantasai * (classes defined in the Markup Guide -http://mozilla.org/contribute/writing/markup) */ /* Suggested order: //顯示屬性 * display * list-style * position * float * clear //自身屬性 * width * height * margin * padding * border * background //文本屬性 * color * font * text-decoration * text-align * vertical-align * white-space * other text * content * 整理了一下自己寫CSS時的順序,跟大家分享下。 下表順序爲從上到下,從左到右: ======================== 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 .class{ background-color:# FFFF00;/*所有浏覽器*/ * background-color:#00FF00;/*IE*/ _ background-color:# 00FFFF;/*IE6*/ } @media all and(min-width:0){ .class{ background-color:#FF00FF; /*Opera */ } }/*只有Opera識別*/ @media all and (min-width:0){ .class{ background-color:#FF00FF; /*Opera和Sa */ html* .class{ background-color:# 808080; /*Sa*/ } }} 注:這裏所指代的 Safari 和 Opera 一般爲最新版本。 Chrome的hack寫法: body:nth-of-type(1) p{color:#333333;} 2、僅 Firefox 3 和 IE7 識別的 Hack selector, x:-moz-any-link, x:default { /* Firefox 3 and IE7 rules here */ } 可簡單解決IE與FF之間的兼容問題(保持FF,IE7,IE的順序),但這種方式貌似對加載有一定的影響 ! Update2007-12-31 NND快被Opera個丫的折騰崩潰了: .e {/*FF OP*/ background-color: #FF0000 } html* .e{/*Sa IE7 OP*/ background-color:#FF00FF } *+html .e{ background-color:#000000;/*OP*/ *background-color:#0000FF;/*IE7*/ } * html .e{/*IE6*/ background-color:#00FFFF } 對于 IE8 beta1 可以嘗試下面的 Hack: /*/ selector { … } /**/ 此規則僅 IE8 beta1 識別,而其他 A-grade 浏覽器都不識別
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
王朝網路微信公眾號
微信掃碼關註本站公眾號 wangchaonetcn
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有