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 浏覽器都不識別