最近蛮忙的，有些日子没有更新了。正在经历博客的第一阶段-疲倦期。希望可以顺利度过，呵呵。下面是给新站长简单的介绍一下CSS的简写规则和一些简单的CSS优化技巧，希望对大家许些帮助，文章有点水，大家莫怪。最下面的两个CSS技巧可以重点了解一下，也许可以给你带来一些意想不到的收获。
颜色缩写
我们可以将#ff0099缩写成#f09，#ffffff，
缩写成#fff。(小技巧，用记事本等工具的替换功能，可直接输入#ff0099将CSS文件内全部替换成#f09)
使用 line-height 垂直居中
例如：line-height:22px;
固定宽度的容器需要一行垂直居中时，使用 line-height 即可。
背景(background)属性多参数简写
例如：
background-image: url("huceo.png");
background-position: top center;
background-repeat: no-repeat;
其实可以写成:
background: url(huceo.png) no-repeat top center;
背景图片路径不加引号
background:url("image/huceocom.gif") #999;
可以写为
background:url(images/huceo.gif) #999;
定位属性值为0的值可去掉单位(如:px/em)
例如：padding: 10px 8px 0px 0px;
简写：padding: 10px 8px 0 0;
有相等值可合并
例如：padding: 10px 8px 10px 8px;
简写：padding: 10px 8px;
Margin(外边距/空白边),Padding(内边距)声明:
例如：
margin-top:0px;
margin-right:10px;
margin-bottom:0px;
margin-left:10px;
简写:
margin:0 10px 0 10px;(上-右-下-左)
再简写：
margin:0 10px;(上下值为0，左右值为10)
Borders(边框属性)
例如：
border-width:1px;
border-style:solid;
border-color:#000;
简写:
border:1px solid #000;
多组共用属性
例如：规定h1到h6使用同一属性（英文逗号间隔）
h1,h2,h3,h4,h5,h6
margin:0;
padding:0;
font-size:12px;
font-weight:normal;
....
当CSS中有相同属性时都可以归类到一起，使用共同属性
CSS简写技巧有很多，更具体的可以百度一下。建议大家尽量使用CSS简写来优化代码，减少文件体积。
清除容器浮动
#main {
overflow:hidden;
}
不让链接折行
a {
whitewhite-space:nowrap;
}
始终让 Firefox 显示滚动条
html {
overflow:-moz-scrollbars-vertical;
}
跨浏览器的支持
body, html {
min-height:101%;
}
最简单的 CSS 重置
* {
margin: 0; padding: 0
}
CSS 图片拼合 (CSS sprites)
可有效降低图片文件的HTTP请求数,可以将多个小图片将以一定间距合并为一个大图片文件.例如，本站侧栏图标(包括搜索框图标)和评论框上面的三个图标(名称，邮箱，网址)都是拼合在一起的。
拼合完成后，系统自动给出background-position定位属性代码来显示拼合图片中的指定位置。
http://cn.spritegen.website-performance.org/
使用CSS压缩
百度一下，可以在应用框内直接压缩CSS文件
压缩后去除空格，代码可读性降低，但可以节省文件体积，加快下载速度。压缩后代码可读性差的问题不用担心，可以随时还原。为了维护修改更加方便，也可以将CSS原文件放在与压缩后的文件放在同一目录内，修改时对照下就行了。
鄂公网安备 42112302000017号