10个CSS简写/优化技巧

margin-top:1px;
margin-right:2px;
margin-bottom:3px;
margin-left:4px;

　　你可以简写成：

1	`margin:1px` `2px` `3px` `4px;`

　　语法 margin:top right bottom left;

-----------------

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

//四个方向的边距相同，等同于margin:1px 1px 1px 1px;
margin:1px;
//上下边距都为1px，左右边距均为2px，等同于margin:1px 2px 1px 2px;
margin:1px 2px;
//右边距和左边距相同，等同于margin:1px 2px 3px 2px;
margin:1px 2px 3px;
//注意，这里虽然上下边距都为1px，但是这里不能缩写。
margin:1px 2px 1px 3px;
/*二、边框(border)*/
边框的属性如下：
border-width:1px;
border-style:solid;
border-color:#000;
可以缩写为一句：
border:1px solid #000;
语法 border:width style color;
 
/*三、背景(Backgrounds)
背景的属性如下：*/
background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:00;
/*可以缩写为一句：*/
 
background:#f00 url(background.gif) no-repeat fixed 0 0;
语法是background:color image repeat attachment position;
你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：
 
color: transparent
 
image: none
 
repeat: repeat
 
attachment: scroll
 
position: 0% 0%
 
四、字体(fonts)
字体的属性如下：
font-style:italic;
font-variant:small-caps;
font-weight:bold;font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
可以缩写为一句：
 
font:italic small-caps bold 1em/140%"Lucida Grande",sans-serif;
注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。
/*五、列表(lists)*/
取消默认的圆点和序号可以这样写list-style:none;,
l/*ist的属性如下:*/
 
list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
可以缩写为一句：
 
 
list-style:square inside url(image.gif);
六、颜色(Color)
 
16进制的色彩值，如果每两位的值相同，可以缩写一半。例如：
 
Aqua: #00ffff ——#0ff
Black: #000000 ——#000
Blue: #0000ff ——#00f
Dark Grey: #666666 ——#666
Fuchsia:#ff00ff ——#f0f
Light Grey: #cccccc ——#ccc
Lime: #00ff00 ——#0f0
Orange: #ff6600 ——#f60
Red: #ff0000 ——#f00
White: #ffffff ——#fff
Yellow: #ffff00 ——#ff0
 
七、属性值为0
书写原则是如果CSS属性值为0，那么你不必为其添加单位(如:px/em)，你可能会这样写:
 
padding:10px 5px 0px 0px;
试试这样吧:
 
padding:10px 5px 00 ;
八、最后一个分号
 
最后一个属性值后面分号可以不写，如：
#nav{
border-top:4px solid #333;
font-style: normal;
font-variant:normal;
font-weight: normal;
}
可以简写成:
#nav{
border-top:4px solid #333;
font-style: normal;
font-variant:normal;
font-weight: normal
}
九、字体粗细(font-weight)
 
你可能会这样写:
h1{
font-weight:bold;
}
p{
font-weight:normal;
}
可以简写成:
h1{
font-weight:700;
}
p{
font-weight:400;
}
十、圆角半径(border-radius)
border-radius是css3中新加入的属性，用来实现圆角边框。
 
-moz-border-radius-bottomleft:6px;
-moz-border-radius-topleft:6px;
-moz-border-radius-topright:6px;
-webkit-border-bottom-left-radius:6px;
-webkit-border-top-left-radius:6px;
-webkit-border-top-right-radius:6px;
border-bottom-left-radius:6px;
border-top-left-radius:6px;
border-top-right-radius:6px;
可以简写成:
-moz-border-radius:6px 6px 0;
-webkit-border-radius:6px 6px 0;
border-radius:6px 6px 0;
语法 border-radius:topleft topright bottomright bottomleft