CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染(值得一提的是，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非<img>标签)。
这种方法已经广泛的应用到了众多的网站上，如果想学习，可以参考一下GOOGLE、Tencent等知名网站的CSS，相信你会获益匪浅。
我认为这里的篇幅太小，详细的了解及操作方法，建议去这些地方学习：
1、CSS雪碧操作方法视频讲解 http://www.aa25.cn/div_css/896.shtml
2、前端观察神飞：CSS雪碧:要还是不要？ http://www.qianduan.net/to-sprite-or-not-to-sprite.html
3、CSS雪碧在线生成器 http://www.tulongzhiji.com/mopvhs/2010/08/26/css-sprite-generator%E4%B8%A8css%E9%9B%AA%E7%A2%A7%E5%9C%A8%E7%BA%BF%E7%94%9F%E6%88%90%E5%99%A8/
4、CSS雪碧是鱼翅还是三鹿 http://www.qianduan.net/css-sprites-useful-technique-or-potential-nuisance.html
5、CSS雪碧的一些实用技巧 http://www.qianduan.net/css-spriting-tips.html
1、3楼，人家问的浏览器滚动条样式怎么定义，唉，对牛弹琴！百度：在线滚动条生成器，进去直接选好滚动条的边框，高光，阴影颜色，然后css代码就生成出来了，跟div无关，你只用把生成的css代码复杂到你的css中就行了。
(这个效果只对ie及穿ie马甲的浏览器有效，其他浏览器不认。想全部浏览器都实现滚动条自定义视觉效果，你只有做图片用js来控制实现，那个就复杂了)
