Css基础学习（九）—缩写

 

css的样式缩写简洁，而且减少了页面传输的流量，应该是每一个页面设计师追求的目标。我们就来看看我们前面讲解的内容中的一些缩写。

文本缩写

1. /* 文本没有缩写 */
2. /* Specify blanket rules for all elements */
3. font-size:12px;
4. line-height:160%;
5. font-weight:bold;
6. font-style:italic;
7. font-family: "Lucida Grande",Arial,Sans-serif;
9. /* 文本有缩写 */
10. /* Specify blanket rules for all elements */
11. font: 12px/160% bold italic "Lucida Grande",Arial,Sans-serif;

注意：这个规则只有在你同时设定了font-size和font-family的情况下才起作用，这两个属性中任何一个没有定义，该规则都将被忽略。同时，如果你没有设定font-weight、font-style或font-variant，它们将默认设置为normal。

背景缩写

1. /* 背景没有缩写 */
2. background-color:#CCC;
3. background-image:url(image.gif);
4. background-repeat:no-repeat;
5. background-position:top left;
7. /* 背景有缩写 */
8. background:#CCC url(image.gif) no-repeat top left;

注意：在background中省略任何值，浏览器将使用默认值。如果没有设定background-repeat值，背景图像将默认为在水平和垂直两个方向上重复。

列表缩写

1. /* 列表没有缩写 */
2. list-style-type:disc;
3. list-style-position:inside;
4. list-style-image:url(image.gif);
6. /* 列表有缩写 */
7. list-style:disc inside url(image.gif);

注意：在此css规则中省略任何值，浏览器将使用默认值，即分别为disc、outside和none。

外边距和内边距缩写

根据外边距或内边距值有多少不同，针对外边距和内边距有4种不同的css缩写命令

4个不同值

1. /* 外边距没有缩写 */
2. margin-top:50px;
3. margin-right:auto;
4. margin-bottom:20px;
5. margin-left:10px;
7. /* 外边距有缩写 */
8. margin:50px auto 20px 10px;

3个不同值

1. /* 外边距没有缩写 */
2. margin-top:50px;
3. margin-right:10px;
4. margin-bottom:3px;
5. margin-left:10px;
7. /* 外边距有缩写 */
8. margin:50px 10px 3px;

两个不同值

1. /* 外边距没有缩写 */
2. margin-top:50px;
3. margin-right:10px;
4. margin-bottom:50px;
5. margin-left:10px;
7. /* 外边距有缩写 */
8. margin:50px 10px;

一个值

1. /* 外边距没有缩写 */
2. margin-top:10px;
3. margin-right:10px;
4. margin-bottom:10px;
5. margin-left:10px;
7. /* 外边距有缩写 */
8. margin:10px;

注意：这4种缩写方法同样适用于内边距和边框。这里的属性值排列顺序很重要，顺序为上、右、下、左。简单记忆为时间的半天时针的走动。

边框缩写

1. /* 边框没有缩写 */
2. border-width:1px;
3. border-color:#CCC;
4. border-style:dashed;
6. /* 边框有缩写 */
7. border:1px #CCC dashed;
9. /* 边框没有缩写 */
10. border-right-width:1px;
11. border-right-color:#CCC;
12. border-right-style:dashed;
14. /* 边框有缩写 */
15. border-right:1px #CCC dashed;
17. /* 边框没有缩写 */
18. border-style:dashed dotted solid ridge;
19. border-top-width:thin;
20. border-right-width:20px;
21. border-bottom-width:medium;
22. border-left-width:thick;
23. border-color:#000 #999 #333 #ccc;
25. /* 边框有缩写 */
26. border-top:#000 thin dashed;
27. border-right:#999 20px dotted;
28. border-bottom:#333 medium solid;
29. border-left:#ccc thick ridge;