Get rid of CSS redundancy code, CSS can be more concise

This article is suitable for the CSS novice learning, for already mastered the CSS friends can also through this piece of article to review knowledge.

Through practice, the author thinks that in some cases the code of CSS can be more concise, in most cases because the novice for some of the elements with multi- attribute code can not be streamlined to write.

Streamlined code for the Web is a great advantage, for visitors to the speed of access will be a certain increase, but also for the search engine is more able to crawl the key content of the page. Nonsense not to say, the following look at the summary of the author can be streamlined code:

1.Margin & Padding

Example 1:

    . div {    margin-top:10px;    Margin-right:5px;    Margin-bottom:30px;    Margin-left:0px;    }

The following code is condensed:

0;}

Example 2:

    . div {    margin-top:10ox;    Margin-right:20px;    Margin-bottom:0;    Margin-left:20px;    }

Streamlined code:

    . div {    0;    }

Example 3:
　　

        . div {        margin-top:0;        Margin-right:auto;        Margin-bottom:0;        Margin-left:auto;   }

Streamlined code:
　

    . div {    margin:0  Auto;    }

Example 4:

    . div {    margin-top:50px;    Margin-right:50px;    Margin-bottom:50px;    Margin-left:50px;    }

Streamlined code:

    . div {margin:50px;}

Abbreviation for 2.border

Example 1:

    . div {    Border-width:5px;    (Thin,thick,medium,　　set vaule) (default=medium)    border-style:dotted;    (Solid,dashed,dotted, double, etc) (default=none)    border-color:blue;     0-255) (default=value of elements/elements Parent Color property)    }

Streamlined code:

    . div {    border:5px dotten blue;    }

　　
Example 2:

    . div {    Border-right-width:2px;    Border-right-style:solid;    Border-right-color:#666666;    }

Streamlined code:

    . div {    Border-right:2px solid #666;    }

Example 3:

. div {border-top-width:3xp;　　Border-right-width:2px;　　Border-bottom-width:3px;　　Border-left-width:2px; }

The Streamlined code:
　

    . div {    Border-width:3px 2px;    }

3.Background abbreviation

. div {background-color: #CCCCCC; (Named,hex,rgb,0-255)(default=transparent) Background-image:url (images/bg.gif); (URL or none) (Defaule=None) Background-repeat:no-repeat; (Repeat,repeat-x,repeat-y or No-repeat) (default=repeat) Background-Attachment:scroll; (fixedor Scoll) (default=scroll) Background-Position:top left; (Top,right,left,bottom or center) (default=0%0%)}

Streamlined code:
　

    . div {    background: #CCC URL (images00;    }

4.font

    . div {    font-family:verdana,arial,helvetica;    Font-size:12px;    Font-weight:bold;    Font-style:italic;    Font-variant:normal;    line-height:1.5;    }

Streamlined code:
　

    . div {    font:italic bold 12px/1.5  Verdana,arial,helcetica;    }

5.list abbreviation

    . div {    list-style-image:url (images/bullet.gif);    List-style-position:inside;    List-style-tupe:squere;    }

The Streamlined code:

    . div {    list-style:square inside URL (images/bullet.gif);    }

　

　6. Abbreviations for colors
　　

  Aqua: #00ffff to #0ff    black:#　　000000 to #     Blue: #0000ff to # 00f
    
      Dark grey:#
    666666 to #666     fuchsia: #ff00ff to #f0f light    Grey: #cccccc to #cc C    Lime: #00ff00 to #0f0    Orange: #ff6600 to #f60 White    : #ffffff to #fff    Yellow: #ffff00 to #ff0 

The above elements are multi-attributes, so they can be abbreviated at some point by following certain rules.
More exciting content is being sorted out, welcome to continue browsing.