CSS文件瘦身(1)—精通CSS缩写规则

无论是WordPress还是其他的建站程序,自带的CSS样式文件都有一个特点:清晰易读,便于修改加工。这些CSS一般都是原作者用专门的软件处理过的,分行、分段,非常的便于阅读,但这会使得CSS代码阅读显得冗长复杂。

这些CSS样式如果经过缩写,会变得很苗条,大大减小CSS文件体积,从而达到优化网站速度的目的。

下面介绍常见的CSS缩写规则:

  1. Margin & Padding(空白)
  2. Border(边框)
  3. Background(背景)
  4. Font(字体)
  5. List(列表)
  6. Color(颜色)

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)
}

 

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;
}

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;
}

Font(字体)

#div {
font-family: Verdana, Arial, Helvetica;
(Verdana, Arial, “Times New Roman”, etc) (default = bro
font-size: 12px;
(xx-small, medium, x-large, set value, etc) (default = m
font-weight: bold;
(normal, bold, bolder, lighter, 100-900 or inherit) (defau
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;
}

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);
}

Color(颜色)

Aqua: #00ffff ——#0ff
Black: #000000 ——#000
Blue: #0000ff ——#00f
Dark Grey: #666666 ——#666
Fuchsia:#ff00ff ——#f0f
Light Grey: #cccccc ——#ccc
Lime: #00ff00 ——#0f0
Orange: #ff6600 ——#f60
Red: #ff0000 ——#f00
White: #ffffff ——#fff
Yellow: #ffff00 ——#ff0

  4Comments

  1. 北人博客   •  

    北人先收藏了。。。感觉现在用不上,迟早要能用上的。。。

  2. 草帽luffy   •  

    强大的CSS……
    以前学程序设计的时候,CSS就一直云山雾罩的……;搞得现在在进行Fx或Blogger定制的时候,还得开着Doc一点点来……

    • Jeriff Cheng   •     Author

      O(∩_∩)O~,其实俺也只会修改,真让俺自己写个style.css还真有压力。CSS文件压缩一下就可以了,缩写其实优化效果不太大。

Leave a Reply

Your email address will not be published. Required fields are marked *