CSS代码缩写－占用更少的带宽
盒模型代码缩写
- 盒模型中外边距（margin）、内边距（padding）和边框（border）设置上下左右四个方向的距离时是按照顺时针方向设置的：上右下左。具体应用在margin和padding的例子如下：
// 上设置为10px、右设置为15px、下设置为12px、左设置为14px
margin:10px 15px 12px 14px;
// 1、如果top、right、bottom、left的值相同，如下：
margin:10px 10px 10px 10px;
// 可缩写为
margin:10px;
// 2、如果top和bottom值相同，left和right的值相同，如下：
margin:10px 20px 10px 20px;
// 可缩写为
margin:10px 20px;
// 3、如果left和right的值相同，如下：
margin:10px 20px 30px 20px;
// 可缩写为
margin:10px 20px 30px;
// padding的缩写方法和margin是一致的
颜色值缩写
- 关于颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半
// 实例
p {color: #000000;}
// 可缩写为
p {color: #000;}
p {color: #336699;}
// 可缩写为
p {color: #369}
字体缩写
// 下面是给网页设置字体的代码
body{
font-style: italic; // 设置字体风格
font-variant: small-caps; // 以小型大写字体或者正常字体显示文本
font-weight: bold; // 设置字体的粗细
font-size: 12px; // 设置字体的尺寸
line-height: 1.5em; // 设置行高（行间距）
font-family: "宋体",sans-serif; // 设置字体系列
}
// font 语法：
font: [[<font-style> || <font-variant> || <font-weight>]? <font-size>[/<line-height>?<font-family>];
// 所以上面这串设置字体的代码可以缩写为
body{
font: italic small-caps bold 12px/1.5em "宋体",sans-serif;
}
// 注意：
// 1、使用这一简写方式至少要指定font-size和font-family属性，其他的属性（如font-style、font-variant、font-weight、line-height）如未指定将自动使用默认值
// 2、在缩写时font-size与line-height中间要加入“/”斜杠
// 一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：
body {
font: 12px/1.5em "宋体", sans-serif;
}
// 只是有字号、行间距、中文字体、英文字体设置
- 注意：我们设置css样式时，如果设置了某些样式的缩写属性，比如字体的
font，背景图片的background等，之后我们又想对其中的个别属性单独设置，比如行高line-height，要注意，单独设置的属性一定要写在缩写属性的后面，或者使其对应选择器的权值更高，不然缩写属性中的默认值会覆盖我们单独给某属性设置的值
