无论是WordPress还是其他的建站程序，自带的CSS样式文件都有一个特点：清晰易读，便于修改加工。这些CSS一般都是原作者用专门的软件处理过的，分行、分段，非常的便于阅读，但这会使得CSS代码阅读显得冗长复杂。
这些CSS样式如果经过缩写，会变得很苗条，大大减小CSS文件体积，从而达到优化网站速度的目的。
下面介绍常见的CSS缩写规则：
- Margin & Padding（空白）
- Border（边框）
- Background（背景）
- Font（字体）
- List（列表）
- 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 |
GD Star Rating
loading...
CSS文件瘦身(1)—精通CSS缩写规则, loading...
您可能也喜欢这些文章：
- 2011/07/26 — CSS文件瘦身(2)—压缩CSS文件 (3)
- 2011/06/17 — 纯代码实现外链自动添加小图标 (5)
- 2011/05/09 — WordPress优化之可视化编辑器 (9)
- 2011/05/02 — WordPress优化之Optimize the order of styles and scripts (0)
- 2011/04/19 — WordPress优化之Specify a cache validator (3)
- 2011/04/18 — WordPress优化之Gzip压缩CSS和JS文件 (8)
