Mozilla Firefox 建议的CSS书写顺序

王朝html/css/js·作者佚名  2008-10-02
窄屏简体版  字體: |||超大  

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 浏览器都不识别

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航