好好学习，是为了写更少的代码

写过CSS的都清楚，，，代码看起来真TM乱。其中一个原因就是我们写代码不够精简，想到一点写一点。我们是如此的随意，以至于后来自己都不想看那一堆bullshit了。
解决CSS代码可读性的办法，是有的。
主要包括以下几个方面：
1、利用SASS或LESS编写模块化的代码，那么我们修改时只需要修改scss或less文件就可以了，这些工具为我们提供了变量、函数等功能，确实能让我们少写或少改很多代码；
2、利用gulp或grunt等构建工具引入 autoprefixer 插件，该插件能自动为我们的CSS代码添加必要的前缀，从而让我们所写代码看起来更顺眼一些，而不用到处乱写前缀。
3、就是我们应当学会使用简写属性啦，合理使用简写属性会使我们编写CSS代码时更快，代码也会更好看哦。

以下，就介绍几个简写属性，比较有代表性的几个。对于padding、margin、border、outline、border-radius这些属性，因为大家用的更多，早已熟能生巧，就不赘述了。

background:

    例子——
    背景：颜色值 图片url地址 背景图片重复模式 背景图片滚动模式 背景图片位置；
    在这里颜色值就是该元素的背景颜色，背景图片则是不重复的、不随着鼠标滚动的，且图片所在的位置是元素的所呈现的范围的中心（包括宽高）；
    background: #f00 url(img/01.jpg) no-repeat fixed center;
    说明——
    background简写属性可设置的属性包括
        background-color
        background-position
        background-size     （css3）
        background-repeat
        background-origin   （css3）
        background-clip     （css3）
        background-attachment
        background-image
    其中，
    background-position负责设置背景图片的方位，默认在左上角；如果仅设置一个值(left/right/top/bottom)，那么第二个值默认为center。
    background-size负责设置背景图片的尺寸，可以设置为cover(完全覆盖背景区域)、contain(图片的宽高比不变的情况下，最大地适应内容区域)
        [length/percentage](第一个值设置宽度，第二个值设置高度，若只设置第一个值，第二个默认为auto)，其中percentage是根据父元素
        的百分比来进行计算。
    background-origin负责设置背景图片的相对定位点(均为左上角)，默认的padding-box，可以另外设置border-box或content-box。
    background-clip负责设置背景(包括图片和颜色)被裁剪的位置，默认是border-box，可以另外设置padding-box或content-box。
    background-attachment负责设置背景图片对屏幕滚动事件的响应，默认是scroll，可以另外设置fixed或inherit。

font:

    例子——
    字体：字体样式 字体异体 字体粗细 字体大小/行高 字体系列；
    font: italic bold 12px/20px arial,sans-serif;
    其中，字体异体被忽略了，另外多个字体系列用逗号隔开。
    font简写属性可设置的属性包括
        font-style
        font-variant
        font-weight
        font-size/line-height
        font-family
    可以不设置其中的某个值，未设置的属性会使用其默认值。但是，至少要指定字体大写和字体系列。而且，顺序不能更改。
    其中，
    font-style负责设置字体的风格，默认是normal，可以另外设置italic(斜体)或oblique(倾斜)或inherit。
    font-variant负责设置小型大写字母的字体显示文本(即把小写字母转换为大写的，但其字体变小)，默认为normal，可另设置small-caps或inherit。
    font-weight负责设置文本的粗细，可设置的值有normal、bold、bolder、lighter、100-900、inherit。
    除了组合各个属性，font还可以直接使用与用户计算机环境某个方面一致的字体，可设置的关键词以下
        caption         被标题控件（比如按钮、下拉列表等）使用的字体
        icon            被图标标记使用的字体
        menu            被下拉列表使用的字体
        message-box     被对话框使用的字体
        small-caption       caption 字体的小型版本
        status-bar      被窗口状态栏使用的字体

animation:

    例子
    动画：动画名称 动画时长 动画速度曲线 动画播放前延时 动画播放次数 动画是否轮流反向播放；
    animation: none 0 ease 0 1 normal;
    注意，请务必始终规定 animation-duration 属性，否则时长为0，就不会播放动画了。
    animation简写属性可设置的属性包括
        animation-name
        animation-duration
        animation-timing-function
        animation-delay
        animation-iteration-count
        animation-direction
    其中，
    animation-name属性为 @keyframes 动画规定的名称，默认为 none。
    animation-duration属性为动画一个周期所需时间，以 s 或 ms 作为单位，默认为 0。
    animation-timing-function属性指定速度曲线，预定义值包括 linear、ease、ease-in、ease-out、ease-in-out，
        也可以使用自定义三次贝塞尔函数 cubic-bezier(n,n,n,n) ，其中 n 是0到1的数值。
    animation-delay属性定义动画何时开始，值的单位可以是 s 或 ms。当值为负时，则是跳过该值大小的时间时开始。
    animation-iteration-count属性定义动画的播放次数，可以是数值 n 或无限值 infinite。
    animation-direction属性定义动画是否轮流反向播放，normal则是正常播放，alternate则是在奇数次数时正常播放，
        偶数次数时反向播放。

transition:

    例子
    过渡：过渡属性 过渡时长 过渡速度曲线 过渡何时开始；
    transition: all 0 ease 0;
    注意，请务必始终规定 animation-duration 属性，否则时长为0，就不会产生过渡效果了。
    transiton简写属性可设置的属性包括
        transition-property
        transition-duration
        transition-timing-function
        transition-delay
    其中，
    transition-property属性可设置为none(没有属性会获得过渡效果)，
        all(所有可过渡的属性都将获得过渡效果)，
        property[,property...](定义应用过渡效果的css属性名称列表，以逗号分隔)。
    transition-duration属性规定完成过渡效果所需时间，以 s 或 ms 作为单位，默认为 0。
    transition-timing-function 基本同  animation-timing-function。
    transition-delay 基本同 animation-delay。

学了一大堆，不就是为了少些几句代码嘛