css简写表 总结的CSS简写表

http://blog.downke.cn/post/2009/06/18/cssShortening.aspx

总结的CSS简写表:

CSS中有许多简写方式，可能平时大家注意不到。简写可以有效的减少CSS代码量，提高网页加载速度和节约服务器流量。我想，对于这些简写方式，还是很有必要总结一下：

分类1：Margin & Padding

#div {

margin-top: 0;

margin-right: 5px;

margin-bottom: 10px;

margin-left: 15px;

(auto, 0, px, pt, em or %)

}

可以简写成：

#div {

margin:0 5px 10px 15px;

(top right bottom left)

}

————————————————————

#div {

margin-top: 10px;

margin-right: 20px;

margin-bottom: 0;

margin-left: 20px;

}

可以简写成：

#div {

margin:10px 20px 0;

(top right/left bottom)

}

————————————————————

#div {

margin-top: 0;

margin-right: auto;

margin-bottom: 0;

margin-left: auto;

}

可以简写成：

#div {

margin:0 auto;

(top/bottom left/right)

}

————————————————————

#div {

margin-top: 50px;

margin-right: 50px;

margin-bottom: 50px;

margin-left: 50px;

}

可以简写成：

#div {

margin:50px;

(top/right/bottom/left)

}

＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋

分类2：Border

#div {

border-width: 5px;

(thin, thick, medium or set value) (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)

}

可以简写成：

#div {

border:5px dotted blue;

}

————————————————————————

#div {

border-right-width: 2px;

border-right-style: solid;

border-right-color: #666666;

}

可以简写成：

#div {

border-right:2px solid #666;

}

————————————————————————

#div {

border-top-width: 3px;

border-right-width: 2px;

border-bottom-width: 3px;

border-left-width: 2px;

}

可以简写成：

#div {

border-width:3px 2px;

}

————————————————————————

分类3：Background

#div {

background-color: #CCCCCC;

(named, hex, rgb or 0-255) (default = transparent)

background-image: url(images/bg.gif);

(url or none) (default = none)

background-repeat: no-repeat;

(repeat, repeat-x, repeat-y or no-repeat) (default = repeat)

background-attachment: scroll;

(fixed or scroll) (default = scroll)

background-position: top left;

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

}

可以简写成：

#div {

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

}

＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋

分类4：Font

#div {

font-family: Verdana, Arial, Helvetica;

(Verdana, Arial, “Times New Roman”, etc) (default = browse based)

font-size: 12px;

(xx-small, medium, x-large, set value, etc) (default = medium)

font-weight: bold;

(normal, bold, bolder, lighter, 100-900 or inherit) (default = normal)

font-style: italic;

(normal, italic or oblique) (default = normal)

font-variant: normal;

(normal or small-caps) (default = normal)

line-height: 1.5;

(normal, px, pt, em, num or %) (default = normal)

}

可以简写成：

#div {

font:italic bold 12px/1.5 Verdana, Arial, Helvetica;

}

＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋

分类5：List

#div {

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

(url or none) (default = none)

list-style-position: inside;

(inside or outside) (default = outside)

list-style-type: square;

(circle, disc, square, etc) (default = disc)

}

可以简写成：

#div {

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

}

＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋

分类6：Color

Aqua: #00ffff to #0ff

Black: #000000 to #000

Blue: #0000ff to #00f

Dark Grey: #666666 to #666

Fuchsia:#ff00ff to #f0f

Light Grey: #cccccc to #ccc

Lime: #00ff00 to#0f0

Orange: #ff6600 to #f60

Red: #ff0000 to #f00

White: #ffffff to #fff

Yellow: #ffff00 to #ff0

http://blog.downke.cn/post/2009/06/18/cssShortening.aspx

总结的CSS简写表:

CSS中有许多简写方式，可能平时大家注意不到。简写可以有效的减少CSS代码量，提高网页加载速度和节约服务器流量。我想，对于这些简写方式，还是很有必要总结一下：

分类1：Margin & Padding

#div {

margin-top: 0;

margin-right: 5px;

margin-bottom: 10px;

margin-left: 15px;

(auto, 0, px, pt, em or %)

}

可以简写成：

#div {

margin:0 5px 10px 15px;

(top right bottom left)

}

————————————————————

#div {

margin-top: 10px;

margin-right: 20px;

margin-bottom: 0;

margin-left: 20px;

}

可以简写成：

#div {

margin:10px 20px 0;

(top right/left bottom)

}

————————————————————

#div {

margin-top: 0;

margin-right: auto;

margin-bottom: 0;

margin-left: auto;

}

可以简写成：

#div {

margin:0 auto;

(top/bottom left/right)

}

————————————————————

#div {

margin-top: 50px;

margin-right: 50px;

margin-bottom: 50px;

margin-left: 50px;

}

可以简写成：

#div {

margin:50px;

(top/right/bottom/left)

}

＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋

分类2：Border

#div {

border-width: 5px;

(thin, thick, medium or set value) (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)

}

可以简写成：

#div {

border:5px dotted blue;

}

————————————————————————

#div {

border-right-width: 2px;

border-right-style: solid;

border-right-color: #666666;

}

可以简写成：

#div {

border-right:2px solid #666;

}

————————————————————————

#div {

border-top-width: 3px;

border-right-width: 2px;

border-bottom-width: 3px;

border-left-width: 2px;

}

可以简写成：

#div {

border-width:3px 2px;

}

————————————————————————

分类3：Background

#div {

background-color: #CCCCCC;

(named, hex, rgb or 0-255) (default = transparent)

background-image: url(images/bg.gif);

(url or none) (default = none)

background-repeat: no-repeat;

(repeat, repeat-x, repeat-y or no-repeat) (default = repeat)

background-attachment: scroll;

(fixed or scroll) (default = scroll)

background-position: top left;

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

}

可以简写成：

#div {

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

}

＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋

分类4：Font

#div {

font-family: Verdana, Arial, Helvetica;

(Verdana, Arial, “Times New Roman”, etc) (default = browse based)

font-size: 12px;

(xx-small, medium, x-large, set value, etc) (default = medium)

font-weight: bold;

(normal, bold, bolder, lighter, 100-900 or inherit) (default = normal)

font-style: italic;

(normal, italic or oblique) (default = normal)

font-variant: normal;

(normal or small-caps) (default = normal)

line-height: 1.5;

(normal, px, pt, em, num or %) (default = normal)

}

可以简写成：

#div {

font:italic bold 12px/1.5 Verdana, Arial, Helvetica;

}

＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋

分类5：List

#div {

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

(url or none) (default = none)

list-style-position: inside;

(inside or outside) (default = outside)

list-style-type: square;

(circle, disc, square, etc) (default = disc)

}

可以简写成：

#div {

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

}

＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋

分类6：Color

Aqua: #00ffff to #0ff

Black: #000000 to #000

Blue: #0000ff to #00f

Dark Grey: #666666 to #666

Fuchsia:#ff00ff to #f0f

Light Grey: #cccccc to #ccc

Lime: #00ff00 to#0f0

Orange: #ff6600 to #f60

Red: #ff0000 to #f00

White: #ffffff to #fff

Yellow: #ffff00 to #ff0