写过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。学了一大堆，不就是为了少些几句代码嘛
随时随地看视频
