CSS缩写汇总备忘录

使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下：

 

盒尺寸

margin: 1em 0 2em 0.5em;  （一般应用在margin和padding上）

通常有下面四种书写方法:

• property:value1 value2 value3 value4;
  //4参数依次表示top,right,bottom,left 的值
• property: value1 value2 value3;
  //value1表示top的值，value2是right和left的值，value3表示bottom的值
• property: value1 value2;
  //value1表示right和left的值,value2表示right和left的值
• property: value1;
  //value1表示所有边统一的一个值

方便的记忆方法是顺时针，上、右、下、左。

 

颜色

#C3E; （完整的表示为：#CC33EE）

16进制的色彩值，如果每两位的值相同，可以缩写一半。

 

边框（border）

border:1px solid #000; 

边框的属性如下：

• border-width:1px;
• border-style:solid;
• border-color:#000; 

缩写时参数顺序为：width、style、color 。

 

字体（fonts）

font:italic small-caps bold 1em/140% "Trebuchet MS", Arial;

字体的属性如下：

• font-style:italic;
• font-variant:small-caps;
• font-weight:bold;    //字体粗细
• font-size:1em;  //字体大小
• line-height:140%; //行间距
• font-family:"Trebuchet MS", Arial;
• color:red; //注意不是font-color

注意：在缩写字体定义时，至少要定义font-size和font-family两个值；另外对字体颜色color不能应用于缩写，需要单独进行定义。

 

背景（Backgrounds）

background:#f00 url(background.gif) no-repeat fixed 0 0;

背景的属性如下：

• background-color:#f00;
• background-image:url(img/background.gif);   //图像地址不需要加引号
• background-repeat:no-repeat;
• background-attachment:fixed;
• background-position:0 0;

分别对应背景的 颜色、图像、重复、附着、水平位置、垂直位置 等属性；

如果省略其中一个或多个属性值，则该属性将用浏览器默认值，默认值为：

• background-color: transparent
• background-image: none
• background-repeat: repeat
• background-attachment: scroll
• background-position: 0% 0%

 

列表(lists)

list-style:square inside url(image.gif);

list 的属性如下:

• list-style-type:square;
• list-style-position:inside;
• list-style-image:url(image.gif);

经常会用到 list-style:none; 来取消列表前默认的圆点和序号。