zoukankan      html  css  js  c++  java
  • CSS规范

    空格规范

    【强制】 选择器与{之间必须包含空格。

    示例:

    .selector {
    }

    【强制】 属性名与之后的:之间不允许包含空格, :与属性值之间必须包含空格。

    font-size: 12px;

    选择器规范

    【强制】 并集选择器,每个选择器声明必须独占一行。

    示例:

    /* good */
    .post,
    .page,
    .comment {
        line-height: 1.5;
    }
    
    
    /* bad */
    .post, .page, .comment {
        line-height: 1.5;
    }

    【建议】 一般情况情况下,选择器的嵌套层级应不大于 3 级,位置靠后的限定条件应尽可能精确。

    示例:

    /* good */
    #username input {}
    .comment .avatar {}
    
    /* bad */
    .page .header .login  input {}
    .comment div * {}

    属性规范

    【强制】 属性定义必须另起一行。

    示例:

    /* good */
    .selector {
        margin: 0;
        padding: 0;
    }
    
    /* bad */
    .selector { margin: 0; padding: 0; }

    【强制】 属性定义后必须以分号结尾。

    示例:

    /* good */
    .selector {
        margin: 0;
    }
    
    /* bad */
    .selector {
        margin: 0
    }

    CSS属性书写顺序

    建议遵循以下顺序:

    1. 布局定位属性:display / position / float / clear / visibility / overflow(建议 display 第一个写,毕竟关系到模式)

    2. 自身属性:width / height / margin / padding / border / background

    3. 文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word

    4. 其他属性(CSS3):content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

    .jdc {
        display: block;
        position: relative;
        float: left;
         100px;
        height: 100px;
        margin: 0 10px;
        padding: 20px 0;
        font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
        color: #333;
        background: rgba(0,0,0,.5);
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -o-border-radius: 10px;
        -ms-border-radius: 10px;
        border-radius: 10px;
    }
  • 相关阅读:
    HDU4366 Successor 线段树+预处理
    POJ2823 Sliding Window 单调队列
    HDU寻找最大值 递推求连续区间
    UVA846 Steps 二分查找
    HDU3415 Max Sum of MaxKsubsequence 单调队列
    HDU时间挑战 树状数组
    UVA10168 Summation of Four Primes 哥德巴赫猜想
    UESTC我要长高 DP优化
    HDUChess 递推
    HDU4362 Dragon Ball DP+优化
  • 原文地址:https://www.cnblogs.com/featherwit/p/13282593.html
Copyright © 2011-2022 走看看