每位编写CSS的页面的用户，都喜欢简洁明了的感觉。简洁的好处不言而喻，CSS文件小了更加容易阅读。现在把CSS简写方法的八个规则总结出来，希望大家可以学习到。

1、颜色的缩写

CSS中对于颜色的表现形式有以下4种

• 十六进制的形式#RRGGBB，如:#FF00FF，具体表现形式如下：P{color:#FF00FF}
• RGB函数值的形式（RGB（X,X,X）），其中X有两种方式。

0~255之间的整数，如果（RGB(125，0，255)），具体表现形式是：P{color:RBG(125,0,255,);}

0%~100%之间的数字，但是数字一定是整数，如果：RGB（25%，0%100%），具体的表现形式如下：P{color：RBG（25%，0%100%）;}

• 颜色的名称，如red,blue,green等，具体的表现形式时候：p{color:red;}
• 用系统色盘值，如：background，windowtext等，具体表现形式为：p{color:windowtext,background-color:background;}

注意：用户系统的色盘值会根据用户系统所设定的颜色值而改变，具体的颜色值可以查阅CSS手册的附录中的颜色表。

了解了怎么对颜色进行声明之后，需要进一步了解怎样去缩写颜色值。颜色的缩写方式很简单，只能对十六进制的颜色进行简单的缩写。十六进制的表现形式为#RRGGBB，如果RR/GG/BB这三种颜色是由三种两个相同的值组成的颜色值，那就可以缩写成为#RGB，如#FF00EE，就可以缩写成:#F0E的形式、

简写的前提必须是成对出现的值才可以，例如：#EE003F这样的颜色是不可以进行缩写的，必须是RR/GG/BB这3组的颜色都是成对的才可以缩写。

2、单位值的缩写

对于CSS单位值的省略主要体现在数值为0的时候，无论是什么形式的单位都可以省略，如：width：0px;,可以简写为width:0;.

3、内外补丁的简写

内补丁padding以及外补丁margin是使用率非常高的属性，对其缩写的掌握可在代码量及效率上有所提高。内外补丁属性有四个属性，分别是：上右下左，即：padding-top、padding-right、padding-bottom、padding-left,以及margin-top、margin-left、margin-bottom、margin-left，将其简写的话就是将四个属性合并成为一个padding和margin即可。

内外补丁按照上右下左的顺时针方式可以罗列为四种简写方式：

• margin：0; 表示所有的边都是0像素;代表的是（上下左右）
• margin：10px 20px; 表示top和bottom的值是10px;right和left的值是20px;即是：上下是10px,左右是20px; 代表的是（上下）、（左右）。
• margin:30px 50px 10px; 表示：上的值是30px.左右、左右的值是50px,下的值是10px;代表的是（上）、（左右）、（下）
• margin：10px 20px 30px 40px; 代表的是顺时针，上右下左 分别是10,20,30,40,像素。

4、 边框的简写

边框属性是个复合属性，相对而言比较特殊，分别由border-width、border-style、border-color 3个属性构成，如：

div{

border-width:1px;定义边框的大小为1px;

border-style:solid:定义边框的样式为实线边框;

border-color:#ff0000;定义边框的颜色为红色

}

边框的简写方式为：div{ border:1px solid #f00; } 只需要记住border属性的基本与法式：border：border-width、border-style、border-color 即可。

• 边框具有四个方向属性，即border-top、border-right、border-bottom、border-left。在CSS样式的定义中具有上右下左四个方向的属性，一般情况下都是按照顺时针的方向来记忆的。边框的这四个属性不具备简写的条件，但却可以在border-width、border-style、border-color中体现，具体如下：

div{

border-width:1px;定义边框4个方向大小都是1;

border-style：solid dashed、double;定义上框为实线、左右框为虚线、下框为双实线;

border-color：#f00 #000;定义上下框为红色，左右框为黑色。

}

是否觉得这三个属性的定义方式有点眼熟呢？在内外补丁的简写方式和他一样都是按照上右下左顺时针方式排列定义的。

5、背景的简写

背景background是在页面表现中出现频率很高的属性，页面中的很多图片都是存在背景中的，并不全部是用img标签来实线的例如：

body{

background-color：#f00，定义背景颜色为红色;

background-image:url(1.gif) 自定义背景图片。

background-repeat：no-repeat;背景图片无平铺效果

background-attachment：fixed;背景图片固定，不随页面滚动而滚动。

background-posittion:0 0;定义背景图片的位置，必须先定义背景图片之后才会生效。

}

如此繁琐的属性写法不仅让代码量变多，而且不易于阅读,简写方法：

div{ background：#f00 url(1.gif) no-repeat fixed 0 0;} 就可以了。

提高代码的可读性并不难，background是一个䄦属性，可以将背景中所有可能用到背景属性定义到一个属性当中。

定义背景不需要将所有的属性都要写上，浏览器会根据未定义的默认属性来表现具体如下：

background-color：transparent  背景颜色默认为透明的;

background-images:none;背景图片默认不存在。

background-repeat:repeatl 背景图片默认是平铺的;

background-attachment:scroll 背景图像是岁对象默认滚动的;

background-posittion:0% 0%

6、字体的简写

字体是一个页面中最重要的属性之一，如何最简单的写出来也是一种学问

body{

font-style:iatlic:定义字体为斜体;

font-variant：small-caps:定义字体为小型的大写字母，针对于英文;

font-weight:bold:将文字加粗

font-size:12px;字体的大小为12px;

line-heigt：140% 字体的行高为140%

font-famile：“微软雅黑”字体的名称为微软雅黑;

}

字体的简写方法body{font：italic small-caps bold 12px/140% "微软雅黑" }

注意：文字大小和行高之间不能用空格分开，必须要以斜杠进行

6、表的简写

有序列表ol和无序列表ul是页面中经常用到的元素，在CSS中对其设置的必不可少的是list-style属性。list-style属性是符合属性，该属性是由list-style-image(列表前的图片) 、list-style-position(作为对象列表项标记的定位)及list-style-type(对象列表项所使用的预设标记)三个属性构成。

li{list-style:url(image.gif) inside square}