CSS Sprites 这是一种利用程序上的技巧来减轻服务器的http请求的压力的方法的一种说法。
简单介绍一下 CSS Sprites 的优点：
- 当用户往U盘中拷200张图片，会等很久。但是如果弄成一个文件，再拷贝就会快很多。
- CSS Sprites 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。
实现方法：
- 首先将小图片整合到一张大的图片上
- 然后根据具体图标在大图上的位置，给背景定位。
background-position:-8px -95px;
我也发现了现在一般的门户网站都这么干，
阿里巴巴，淘宝，拍拍….
插曲：以前在上学的那会儿经常在淘宝网上做交易，偶然的一次发现淘宝网的背景图片居然是在同一个图片文件上面。上面布满了小图标,如：http://assets.taobaocdn.com/app/fp/2009b/hd_20090313.png 就像这一张图片。
—————-
第一次我的发现是一个叫做CSS Sprites是在 http://realazy.org/blog/2007/10/08/css-sprites/ 这里看到的。
下面的文字从以前链接复制来:
原理
我们知道，自CSS革命以降，HTML倾向于语义化，在一般情况下不再在标记里写装饰性的内容而是把呈现的任务交给了CSS。GUI是缤纷多彩的，少不了各种漂亮的图来装点。新时代的生产方式是，在HTML布满各种各样的钩子（hook），然后交由CSS来处理。在需要用到图片的时候，现阶段是通过CSS属性background-image组合background-repeat, background-position等来实现（题外话：为何我提现阶段，因为未来浏览器若支持content则又新增另外的实现方法）。我们的主角是，你一定猜到了，就是background-position。通过调整background-position的数值，背景图片就能以不同的面貌出现在你眼前。其实图片整体面貌没有变，由于图片位置的改变，你看到只该看到的而已。就好比手表上的日期，你今天看到是21，明天看到是22，是因为它的position往上跳了一格。所以你也大概了解到，CSS Sprites一般只能使用到固定大小的盒子（box）里，这样才能够遮挡住不应该看到的部分。
优点
我们从前面了解到，CSS Sprites为什么突然跑火，跟能够提升网站性能有关。显而易见，这是它的巨大优点之一。普通制作方式下的大量图片，现在合并成一个图片，大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响。
缺点
至于可维护性，这是一般双刃剑。可能有人喜欢，有人不喜欢，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐。而且算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情。当然，在性能的口号下，这些都是可以克服的。
由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。
前面我们也提到了，必须限制盒子的大小才能使用CSS Sprites，否则可能会出现出现干扰图片的情况。这就是说，在一些需要非单向的平铺背景和需要网页缩放的情况下，CSS Sprites并不合适。YUI的解决方式是，加大图片之间的距离，这样可以保持有限度的缩放。
总结
性能压倒一切。CSS Sprites是值得推广的一种技术。尤其适宜用于FIR，比如固定大小的icon替换。为保持兼容性，图片中的各个部分保持一定的距离是一种不错的做法。
推荐阅读：
更新：有网友问到IE6不支持png的问题。其实真相是，IE6不支持的是半透明（alpha transparency）的png，对于全透明的png, IE6并不存在问题。因此，在实践中，不涉及到半透明而需要透明背景的图片，其实都可以使用png, 这是很安全的。
1.定义一下CSS Class
.table_break
{
word-break :normal ; word-wrap:break-word;
}
2.引用这个CSS
ItemStyle-Width=”80px” ItemStyle-CssClass=”table_break”
注意：既然是固定列宽，当然要指定宽度啦。
今天遇到一个问题，sql 语句中有单引号，故出现语法错误。
两种方案：
1.使用存储过程，这个谁都知道。
2.将字符串中的1个单引号，换成两个单引号。本来我以为这个方法行不通（我以为读取时还要处理），没有想到居然是可以的。存储在数据库里的是两个单引号的，通过ASP.net 程序读出来显示在Gridview中是一个单引号的，这个暂时不知道为什么。
什么是CSS hack
由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。
CSS Hack的原理是什么
由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。
比如 IE6能识别下划线”_”和星号” * “，IE7能识别星号” * “，但不能识别下划线”_”，而firefox两个都不能认识。等等
书写顺序，一般是将识别能力强的浏览器的CSS写在后面。下面如何写里面说得更详细些。
如何写CSS Hack
比如要分辨IE6和firefox两种浏览器，可以这样写：
<style>
div{
background:green; /* for firefox */
*background:red; /* for IE6 */
}
</style>
我在IE6中看到是红色的，在firefox中看到是绿色的。
解释一下：
上面的css在firefox中，它是认识不了后面的那个带星号的东东是什么的，于是将它过滤掉，不予理睬，解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。
在IE6中呢，它两个background都能识别出来，它解析得到的结果是:div{background:green;background:red;},于是根据优先级别，处在后面的red的优先级高，于是当然这个div的背景颜色就是红色的了。
CSS hack:区分IE6，IE7，firefox
区别不同浏览器，CSS hack写法：
区别IE6与FF：
background:orange;*background:blue;
区别IE6与IE7：
background:green !important;background:blue;
区别IE7与FF：
background:orange; *background:green;
区别FF，IE7，IE6：
background:orange;*background:green;_background:blue;
background:orange;*background:green !important;*background:blue;
注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
IE6 IE7 FF
* √ √ ×
!important × √ √
浏览器优先级别:FF<IE7<IE6,CSS hack书写顺序一般为FF IE7 IE6
以: ” #demo {width:100px;} “为例;
#demo {width:100px;} /*被FIREFOX,IE6,IE7执行.*/
* html #demo {width:120px;} /*会被IE6执行,之前的定义会被后来的覆盖,所以#demo的宽度在IE6就为120px; */
*+html #demo {width:130px;} /*会被IE7执行*/
所以最后,#demo的宽度在三个浏览器的解释为:
FIREFOX:100px;
ie6:120px;
ie7:130px;
参考链接：
Goodbye to CSS Hack
CSS Hack 经验分享
2009年已过去一大半，今天才写To Do List，有点晚，但是Better later than never。根据以往的经验，发现对自己的要求不能再高。如果太高，到时候就会成为自己不能实现的借口。所以这里我只定几个基本的容易实现的目标。
1.认真看完一本Oracle 11g方面的书；在自己的培训没有忘记前好好学习。
2.闲得无聊时要研究研究Mysql；因为个人觉得比较有用。
3.SQL Server 还是要看，主要研究一下高可用性。
4.英语的学习，口语的锻炼；需要加强；每天至少要花一小时时间看，听，说，读，写 ENGLISH.
5.锻炼身体；晚上8点出去跑(30分钟内)，周末有机会和朋友们打球，将体重控制在65KG左右，特别要减少肚子上的肉。
6.RedHat Linux 的学习，最终目标就是能将Oracle 11g 装到 RHEL4上面，进行简单的配置。目前还不会，要求够低的吧！
7.将业余项目中华家教吧运营好，也许这个项目能为我以后买房子作贡献，所以尽量完善好。
8.每周给爸爸妈妈打一个电话，现在都是爸爸打电话给我，很不好意思。So, 从这一周开始做一个孝顺的儿子。
9.买一个新手机，价格在1500元以下的，学会手机上网（目前暂时不会）。注意：移动公司的充话费送手机的活动千万不在参加，如果我不参加，我就不需要换手机，更不需要换号码。So, 非常后悔。【Done】
10.热情、真诚对待每一个朋友。说话前先想一想，不能出口伤人。加强人际交往能力，不要不合群，努力适应环境。
11.当我有感而发的时候，写写full-house.cn，这样的好处不言而喻，多写一些生活和技术方面的文章。
12.努力让自己度过不一样的每一天，反对平庸生活，拒绝浪费时间。即：开心，进步，积极，乐观每一天。
我觉得以上都是一些简单而又容易实现的目标，而且我相信，我能！！！
2009年12月31日，公布结果：
- 第一条没有做到，没有看Oracle数据库。
- 第二条做到了，我对Mysql的使用多了一些了解，这还得归功于我的三个WordPress博客。
- 第三个只做到了一半，没有花太多的时间看。
- 第四个没有做到。
- 第五个没有做到。
- 第六个没有做到。
- 第七个做到了，完成得出乎我的意料地好。虽然也有不少的艰辛，但总算是有回报。
- 第八个我没有做到，我爸妈做到了。
- 第九个做到了，我还开发了手机网站。
- 第十个做到了。
- 第十一也做到了。
- 第十二没有做到，我也浪费了不少时间。
总结一下：2009年在学习上不成功，在业务上比较成功，希望2010年更成功。
最新评论