设计师学习HTML/CSS之路-13

不了解前端的UI不是好美工，以下是慕课网HTML+CSS基础教程学习笔记，不废话，Start!

第13章 CSS代码缩写

13-1 盒子型代码简写

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;

13-2 颜色值缩写

例1：

p{color:#000000;}

可以缩写为：

p{color:#000;}

例2：

p{color:#336699;}

可以缩写为：

p{color:#369;}

13-3 字体缩写

body{
    font-style:italic;
    font-variant:small-caps;
    font-weight:bold;
    font-size:12px;
    line-height:1.5em;
    font-family:"黑体",sans-serif;
}

以上代码可以缩写为：

body{
    font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
    }

注意：

1.使用这一简写方式至少需要指定 font-size 和 font-family 属性，其他属性如果不写，则自动使用默认值。

2.缩写时，font-size 与line-height 中间要加入"/"。