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