共计 2299 个字符，预计需要花费 6 分钟才能阅读完成。
css 就是指将多行的 css 属性声明化成一行，又称为 css 代码优化。css 简写的最大好处就是能够显著减少 css 文件的大小，其实还有很多其他益处。臃肿而杂乱的 css 样式表会使你遇到问题是难以调试。尤其是当一个团队在进行设计的时候， 臃肿的 css 代码会使你的团队其他成员的 下降。
1、属性值为 0
书写原则是如果 css 属性值为 0，那么你不必为其添加单位(如:px/em)，你可能会这样写:
padding: 10px 5px 0px 0px;
试试这样吧:
padding: 10px 5px 0 0;
2、外边距(margin)
margin-top
margin-right
margin-bottom
margin-left
简写顺序为顺时针方向（上、右、下、左），如：margin: 1px 2px 3px 4px;
其中四边都相等时可简写为一个，如：margin: 1px;
当上下、左右分别相等时，也可简写，如：margin: 1px 2px; 代表上下 1px，左右 2px
只有左右相等时，可简写为：margin: 1px 2px 3px;
但只有上下相等时不可简写。
3、内边距(padding)
padding-top
padding-right
padding-bottom
padding-left
例：
复制代码
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
复制代码
规则与外边距相同，在此就不细说了。
4、移除选择器
选择器是你在为一些元素应用 css 样式时的基本方法，比如 h1, h2, h2, div, strong, pre, ul, ol 等等…如果你使用了 class(. 类名)或 id(#id 名), 那么就不用再在声明 css 时包含选择器了。
div#logowrap
尝试扔掉多余的选择器吧:
#logowrap
在这个例子中所谓的那个选择器就是 div
5、边框(border)
边框的属性如下：
border-width:1px;
border-style:solid;
border-color:#000;
可以缩写为一句：
border:1px solid #000;
语法 border:width style color;
6、背景
背景 (background) 属性可能会包含设置背景色、背景图、背景图的位置和背景图重复方式的参数，你可能会写成:
background-image: ;
background-position: top center;
background-repeat: no-repeat;
其实可以写成:
background: no-repeat top center;
7、字体(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 两个值。
8、列表
取消默认的圆点和序号可以这样写 list-style:none;,
list 的属性如下:
list-style-type:square;
list-style-position:inside;
list-style-image:;
可以写成:
list-style:square inside ;
9、颜色(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
10、圆角半径(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