CSS代码缩写
一、CSS代码缩写
CSS代码缩写的作用：便捷代码输入，减少CSS文件大小，使代码更易读。
盒模型代码简写：主要包括内边距（补白）、边框、外边距（边界）三类。
从方向的属性有：上、下、左、右。
从描述可以分为：颜色、大小和样式。而内边距和外边距只有大小。
- 缩写最后一个单词，如：
div{
border-top-color：Red;
border-top-width：2px;
border-top-style： dotted;
}
可缩写为：
div{ border-top：Red 2px dotted; }
这个没有先后顺序，只需压缩成一句代码即可。
- 方向属性的压缩，如：
div{
padding-top：1px;
padding-right：2px;
padding-bottom：3px;
padding-left：4px;
}
可缩写为：
div {
padding：1px 2px 3px 4px;
}
以上4个属性值的顺序是固定的，按顺时钟的顺序排列：顶部 一》 右侧 一》 底部 一》 左侧。如果仅定义部分属性，则压缩时应保留未定义属性的预定义位置，并赋值为auto。
如果左右两值相同，上下值不同，可以缩写为：
div {
padding：1px 2px 3px;
}
如果左右方向值相同，上下方向值也相同，可以缩写为：
div {
padding：1px 2px;
}
如果四个方向值都相同，可以缩写为：
div { padding：1px; }
-
-
-
- 缩写中间一个词
-
-
如果前后缀相同，中间不同，也可以如下进行压缩，如：
div {
broder-top-width：thim;
broder-right-width：thick;
broder-bottom-width：medium;
border-left-width：inherit;
}
可缩写为：div { broder-width：thim thick medium inherit; }
列表和背景缩写：遵循盒模型缩写规律，可以复合属性替代多个单项属性，如：
#newsList {
list-style-type：circle;
list-style-image：url(star.gif);
list-style-position：inside;
}
可缩写为：
#newsList {
list-style：circle url(star.gif) inside;
}
这三个值没顺序，当定义了多个单项属性时，同样可以压缩。如：
#newsBg {
background-color：#FF99FF;
background-image：url(bg.gif);
background-position：left top;
background-repeat：repeat;
background-attachment：inherit;
}
可缩写为：
#newsBg {
background：#FF99FF url(bg.gif) left top repeat inherit;
}
这些属性值没先后顺序，也不管单项属性有几个可以用复合属性压缩来代替。
-
-
- 颜色值缩写
-
如果每两位的值相同，可以缩写一半，如：
.bg {
background：#223344;
}
可以缩写为：
.bg { background：#234; }
非法缩写，如：
.bg {
background：#223456
}
不能缩写为：
.bg {
background：#23456;
}
字体缩写：字体属性比较多，缩写规则也有点特殊，如：
p {
font-style：italic;
font-variant：small-caps;
font-weight：bold;
font-size：1em;
line-height：1.6em;
font-family："Lucida Grande"，宋体，sans-serif;
}
可缩写为：
p {
font：italic small-caps bold 1em/1.6em "Lucida Grande"，宋体，sans-serif;
}
注意事项：
如果仅定义部分属性，同样也可以缩写，但要保证定义 font-size 和 font-family 两个属性值，且位置按顺序排在值列表的最后。
另外， font-size 和 line-height 应用斜杠连接在一起。
