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

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