css常用的简写属性

1，font

默认顺序是：font-style，font-variant，font-weight，font-size / line-height，font-family

span{
    font: solid italic bold 12px/1.5 Arial,'微软雅黑';
}

• font-style：继承font-family中的斜体italic或者倾斜体oblique。默认值normal（font-family的常规字体）。有的字体没有斜体，就取倾斜体，有的字体没有倾斜体，就取斜体
• font-varint：表示字体大小型的样式（例如：My name is Hege Refsnes）
• font-weight：bold是粗体，bolder是比bold更粗的粗体

2，background

默认顺序是：bg-color，bg-image，bg-repeat，bg-attachment，bg-position，bg-size等

span{
    background: #fff url('src/head.png') no-repeat;
}

• 不强制要求顺序
• 可以省略任意的属性
• background-attachment：设置背景图是固定还是随页面滚动
• background-position：设置图像的位置，因此必须有bg-image属性。他的属性值比较灵活，可以使用0 0px，100% 100%各种计量单位，也可以使用top left这种值
• 如果同时有bg-position和bg-size，要使用/隔开，前者表示position，后者表示size。

3，border、outline

默认顺序是：border-width，border-style，border-color

div {
    border: 1px solid #333;
    outline: 2px solid #666;
}

• border-style的值有：solid-实线，dashed-方形虚线，dotted-圆点虚线，double-双实线，其他的值ridge、groove、inset、outset都是有修饰的边框样式
• outline：轮廓。是绘制在边框外的一条线，用法和border类似。区别是元素的宽高不包含轮廓的宽高。

4，border-image

默认顺序是：border-image-source，border-image-slice，border-image-width，border-image-outset，border-image-repeat

div {
    border-image: url(border.png) 50% 20 stretch;
}

• border-image-slice：各个边向内的偏移（百分比或者数值，数值指的是px），使用方式与margin类似，可以是4个值、2个值、1个值
• border-image-outset：修改边框背景，使移动到盒子外，缺不影响dom结构。可以使用px、em这样的单位，也可以使用数值，数值时代表border-width的宽度
• border-image-repeat：主要值有stretch(默认)-拉伸；repeat-平铺；round-缩放；space-分部在图像周围

5，list-style

理解：对ul、ol列表设置标记的样式。

默认顺序：list-style-type，list-style-position，list-style-image

ul {
    list-style: circle inside none;
}

• list-style-type：每个列表前面标记的样式。

                                disc（默认值）- 实心圆

                                circle - 空心圆

                                square - 实心方块

                                decimal - 数字

                                decimal-leading-zero - 以0开头的数字，例如01, 02, 03

                                lower-alpha和upper-alpha - 小写英文字母和大写英文字母

                                lower-roman和upper-roman - 小写罗马数字和大写罗马数字(i、ii、iii)

                                ... ...

• list-style-position：在哪里放列表前的标记

                                        inside - 放在后面的文本内，后面的文本会根据标记对齐

                                        outside - （默认值）在文本外，位于文本左侧，文本不跟标记对齐

• list-style-image：将列表前的标记替换成图像

                                none - （默认值）不显示图像

                                url('') - 图像路径