CSS回顾复习三（CSS书写规范、顺序和命名规则——CSS书写规范）

一、CSS的缩写

（一）padding和margin

顺序：顺时针

1. 上 右 下 左 padding: 10px 20px 30px 40px

2. 上 右左 下 padding: 10px 20px 30px

3. 上下 右左 padding: 10px 20px

4. 上右下左 padding: 10px

（二）font

顺序：

font: 
    font-style（规定规定字体样式）
    font-variant(规定是否以小型大写字母的字体显示文本)
    font-weight(规定字体粗细)
    font-size（规定字体大小）/ line-height（规定行高）
    font-family（规定字体族）

如font: italic small-caps 700 12px/1.5 "微软雅黑"

注意：

1. 使用这一简写方式你至少要指定 font-size 和 font-family 属性
2. 简写时，font-size和line-height直接一样要用斜杠，不能分开写；
3. 如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值

   font属性详解

（三）background

在CSS2.1里，background属性的简写方式包含五种属性值 – background-color, background-image, background-repeat, background-attachment, and background-position。从CSS3开始，又增加了3个新的属性值，加起来一共8个。
顺序：

background:
    background-color（规定背景颜色）
    background-image（规定背景图片）
    background-repeat（设置重复背景图像）
    background-attachment（规定背景图像是否固定或者随着页面的其余部分滚动）
    background-position（规定背景图像的位置）/ background-size（规定背景图片的尺寸）
    background-origin（背景图片的定位区域）
    background-clip（背景的绘制区域）;

如background: #229 url(maomao.png) no-repeat 15px center/20px content-box

background 属性详解

（四）animation动画

顺序：

animation:
    animation-name（规定需要绑定到选择器的 keyframe 名称）
    animation-duration（规定完成动画所花费的时间，以秒或毫秒计）
    animation-timing-function（规定动画的速度曲线）
    animation-delay（规定在动画开始之前的延迟）
    animation-iteration-count（规定动画应该播放的次数）
    animation-direction（规定是否应该轮流反向播放动画）

如animation: maomao 10s ease-in-out 3s 2 alternate

animation 动画属性详解

（五）transition

顺序：

transition:
    transition-property（规定设置过渡效果的 CSS 属性的名称）
    transition-duration（规定完成过渡效果需要多少秒或毫秒）
    transition-timing-function（规定速度效果的速度曲线）
    transition-delay（定义过渡效果何时开始）

如transition: width 10s ease-in-out 3s

transition 过渡属性详解

二、去掉小数点前的“0”

如font-size:0.8em写为font-size:.8em
好处是精简代码

三、id应按需使用，不能滥用

id在javascript中是唯一的，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。

四、连字符CSS选择器命名规范

1. 长名称或词组可以使用“-”中横线来为选择器命名
2. 为了区分JavaScript变量命名（JS变量命名是用“”）所以不建议使用“”下划线来命名CSS选择器

五、16进制颜色代码缩写

如color：#ffffff写为color：#fff
好处是精简代码

喜欢的小伙伴们就打赏下（嘿嘿）

上期回顾：CSS回顾复习二（CSS书写规范、顺序和命名规则——CSS书写顺序与命名规则）

下期内容：CSS新手学习一（语法、注释、选择器）