Remove CSS redundant code, CSS can be more concise

Intermediary trading http://www.aliyun.com/zixun/aggregation/6858.html"> SEO diagnostic Taobao customer hosting technology hall

This article is suitable for css novice learning, friends who have mastered the css can also review the knowledge through the film article.

In practice, the author thinks that the css code can be more concise in some cases, in most cases because a novice can not streamline some element codes with multiple attributes.

Streamlined code for web pages is of great benefit, for visitors to visit the speed will be improved to some extent, in addition to the search engine also more likely to crawl the webpage key content. Nonsense not to say, here's to look at the author can conclude the code can be streamlined:

1.Margin & Padding

example 1:

.div {

margin-top: 10px;

margin-right: 5px;

margin-bottom: 30px;

margin-left: 0px;

}

Streamlined code is as follows:

.div {margin: 10px 5px 30px 0;})

Example 2:

.div {

margin-top: 10ox;

margin-right: 20px;

margin-bottom: 0;

margin-left: 20px;

}

Streamlined code:

.div {

margin: 10px 20px 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;}

2.border acronym

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;

(named, hex, rgb or 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;

}

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;

(fixed or scoll) (default = scroll)

background-position: top left;

(top, right, left, bottom or center) (default = 0% 0%)

}

Streamlined code:

.div {

background: #CCC url (images / bg.gif) no-repeat 0 0;

}

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 abbreviations

.div {

list-style-image: url (images / bullet.gif);

list-style-position: inside;

list-style-tupe: squere;

}

Streamlined code:

.div {

list-style: square inside url (images / bullet.gif);

}

6. The color abbreviation

Aqua: # 00ffff to # 0ff

Black: # 000000 to # 000

Blue: # 0000ff to # 00f

Dark Gray: # 666666 to # 666

Fuchsia: # ff00ff to # f0f

Light Gray: #cccccc to #ccc

Lime: # 00ff00 to # 0f0

Orange: # ff6600 to # f60

White: #ffffff to #fff

Yellow: # ffff00 to # ff0

The above elements are multi-attribute, so at some point they can be abbreviated according to certain rules.

More exciting content is finishing, please continue to browse.

Article Source: Xiao Shuai blog (http://www.lam5.cn) Reprinted please leave the link. Thank you for your cooperation.