阿里妈妈UED谈CSS Sprites
CSS Sprites 简介：
通 常被意译为“CSS图像拼合”或“CSS贴图定位”。CSS Sprites并不是一门新技术，目前它已经在网页开发中发展得较为成熟，阿里巴巴各子公司的网页中到处都可发现css sprites 的影子。但CSS Sprites并不是什么金科玉律，但在很多情况下，它有着一定的优势，最重要的是它可以减轻服务器的负载，提高网页加载速度。随着Web设计向着精致、 巧妙的方向发展，设计师们开始考虑使用非Javascript的方 式制作鼠标滑过、悬停菜单的效果，这时CSS Sprite应运而生。
说白了，CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景 图片的位置。
当页面加载时，不是加载每个单独图片，而是一次加载整个组合图片。这是一个了不起的改进，它大大减少了HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。
CSS Sprites应用：
在这方面，淘宝网做的比较好，我就以淘宝网为例吧。
[实例一:淘宝频道页面导航]
效果图：
sprites图：
[实例二：淘宝首页]
效果图：
sprites图：
CSS Sprites优点：
CSS Sprites为什么突然跑火，跟能够提升网站性能有关。显而易见，这是它的巨大优点之一。
1.利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
2.个人认为CSS Sprites能减少图片的字节，我曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
CSS Sprites缺点：
诚然CSS Sprites是如此的强大，但是也存在一些不可忽视的缺点。
1.在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好只够的空间，防止板块内不会出现不必要的背景，否则可能会出现出现干扰图片的情况；这些还好，做痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；
2.CSS Sprites在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；不过网上已经有高手开发出“CSS Sprites 样式生成工具”，大家可以尝试一下。
3.CSS Sprites在维护的时候比较麻烦，sprites是一般双刃剑，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避 免改动更多的css，如果在原来的地方放不下，有只能（最好）往下加图片，这样图片的字节就增加了，因为每次的图片改动都得往这个图片删除或添加内容，显 得稍微繁琐，而且重新算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情。当然，在性能的口号下，这些都是可以克服的。
4.由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。
CSS Sprites总结：
性能压倒一切。CSS Sprites非常值得学习和应用，特别是页面有一堆ico（图标）。总之很多时候大家要权衡一下利弊，在决定是不是应用CSS Sprites。为保持兼容性和维护性，sprites图片中的各个部分保持一定的距离是一种不错的做法。
原文链接：http://ued.alimama.com/?p=233
CSS超级技巧大放送合集！
一.使用css缩写
使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看 阅读全文
CSS打造评分星级效果
用纯css打造星级评分效果正在被越来越多地应用在网络中，结合ajax等技术，可以渲染出很出色的视觉效 阅读全文
2009年CSS裸奔节（CSS Naked Day ）
CSS Naked Day，也称CSS裸奔节或CSS裸奔日，2009年4月9日是第四界css裸奔节。本站也参加了这次裸奔节！
CSS裸奔节就是将这整站的css样式都去掉，这样所有的布局，颜色，背景什么的就都没有了(除非你使用table布局)，只剩下html实体显示 出来，起源好像是比较无聊的 想法，就是剥去css的外衣，让大家看看你的(x)html代码是否工整，但是时至html语义被极力推崇的今日，CSS裸奔 节就给外的有意义！
CSS裸奔节的意义
不管CSS裸奔节的原始意义是什么，或许只是一个网络恶作剧，但是从第一届CSS裸奔节（2006年4月5日）开始，CSS裸奔节的意义在于：推动Web标准、提倡简洁为美、使用正确的 (x)html语义标记、良好的层次结构。
告诫大家做页面不仅仅是把还原设计稿，更不是所谓的css+div，更多的是使用正确的 (x)html语义标记、良好的层次结构。
历届CSS Naked Day的举办时间
第一届CSS裸奔节：2006年4月5日
第二届CSS裸奔节：2007年4月5日
第三届CSS裸奔节：2008年4月9日
第四届CSS裸奔节：2009年4月9日
如何加入CSS Naked Day
css naked day官方网站：http://naked.dustindiaz.com/
使用如下的PHP代码
function is_naked_day($d) {
$start = date(’U’, mktime(-12, 0, 0, 04, $d, date(’Y’)));
$end = date(’U’, mktime(36, 0, 0, 04, $d, date(’Y’)));
$z = date(’Z’) * -1;
$now = time() + $z;
if ( $now >= $start && $now <= $end ) {
return true;
}
return false;
}
?>
在你的head头文件中这样调用
…
< ?php
if ( is_naked_day(9) ) {
echo ‘‘;
} else {
echo ‘
‘;
}
?>
有关CSS Naked Day的插件
如果你使用的是WordPress,直接可以使用WordPress CSS Naked Day插件页面下载后启用即可.
