zoukankan      html  css  js  c++  java
  • 整理推荐的CSS属性书写顺序

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

    http://blog.csdn.net/sykent/article/details/7862172

  • 相关阅读:
    Tomcat单独部署,控制台乱码解决方法
    mysql授权访问数据库
    Arrays.binarySearch采坑记录及用法
    使用Spring Ehcache二级缓存优化查询性能
    Redis批量删除缓存数据
    Java并发包之Semaphore用法
    Java并发包之CountDownLatch用法
    如何用Xshell导出文件到桌面本地
    Semaphore信号量原理
    老应用链接替换到新链接
  • 原文地址:https://www.cnblogs.com/vico/p/2922698.html
Copyright © 2011-2022 走看看