整理推薦的CSS屬性書寫順序

標籤：style   blog   http   color   os   io   for   cti   

一. Mozilla 建議CSS規則

<span style="font-family:Microsoft YaHei;">/* 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   *   */</span>

詳情請看http://www.mozilla.org/css/base/content.css

二.懌飛’s Blog細分為:

<span style="font-family:Microsoft YaHei;">/*顯示內容*/  display  list-style  position  float  clear    /*自身屬性*/  width  height  margin  padding  border  background    /*文字屬性*/  color  font  text-decoration  vertical-align  white-space  ohter text  content</span>

在懌飛’s Blog裡有個叫做inG的補充說這還和瀏覽器的解析過程有關：瀏覽器先對DOM定位，然後解析自身屬性，接著再解析內部對象。（沒找到相關的英文資料，有知情者還望告知）.

三. Andy Ford的細分

1.Display & Flow

2.Positioning

3. Dimensions

4. Margins, Padding, Borders, Outline

5. Typographic Styles

6. Backgrounds

7. Opacity, Cursors, Generated Content

 規則樣本:

<span style="font-family:Microsoft YaHei;">.cl {      display: ;      visibility: ;      float: ;      clear: ;            position: ;      top: ;      right: ;      bottom: ;      left: ;      z-index: ;           width: ;      min-width: ;      max-width: ;      height: ;      min-height: ;      max-height: ;      overflow: ;        margin: ;      margin-top: ;      margin-right: ;      margin-bottom: ;      margin-left: ;        padding: ;      padding-top: ;      padding-right: ;      padding-bottom: ;      padding-left: ;        border-width: ;      border-top-width: ;      border-right-width: ;      border-bottom-width: ;      border-left-width: ;        border-style: ;      border-top-style: ;      border-right-style: ;      border-bottom-style: ;      border-left-style: ;        border-color: ;      border-top-color: ;      border-right-color: ;      border-bottom-color: ;      border-left-color: ;        outline: ;        list-style: ;        table-layout: ;      caption-side: ;      border-collapse: ;      border-spacing: ;      empty-cells: ;        font: ;      font-family: ;      font-size: ;      line-height: ;      font-weight: ;      text-align: ;      text-indent: ;      text-transform: ;      text-decoration: ;      letter-spacing: ;      word-spacing: ;      white-space: ;      vertical-align: ;      color: ;        background: ;      background-color: ;      background-image: ;      background-repeat: ;      background-position: ;        opacity: ;        cursor: ;        content: ;      quotes: ;  }</span>

詳情可見http://fordinteractive.com/2009/02/order-of-the-day-css-properties/