CSS代码缩写

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}

字体缩写

• 网页中的字体css样式代码也有对应的缩写方式

// 下面是给网页设置字体的代码
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，要注意，单独设置的属性一定要写在缩写属性的后面，或者使其对应选择器的权值更高，不然缩写属性中的默认值会覆盖我们单独给某属性设置的值