整理推荐的CSS属性书写顺序

一. Mozilla 建议CSS规则

[html] view
plaincopyprint?

<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细分为:

[css] view
plaincopyprint?

<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

规则示例:

[css] view
plaincopyprint?

<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/