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

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- 王朝網路 版權所有