Web前端开发 HTML CSS 属性书写顺序

html开发在前端|web前端开发怎么做app|android是前端开发

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

html5与前端开发|ios前端开发学习|ios前端开发 薪资