前沿视频教室————最好的CSS和Web设计与开发的视频教程

如何在CSS中使用图像，是令不少初学者琢磨不定的问题，往往会使人感到有些迷茫。

今天专门就这个问题来谈一谈CSS Sprite技术，这是个非常实用的技术，在我们的几本CSS书籍中，都没有深入介绍。今天算是做个补充。

从十年前说起

十年前，网页设计开始逐渐成为一项应用比较比较广的技术，那时制作网页就开始“切图”了。之所以要切图，主要有两个目的：

1：为了使用表格布局，就要把图像切成一个个小部分，分别放到表格中各自的单元格里面。

2：这样做可以使网页打开和显示速度更快。这是为什么呢？原因是，那时候人们主要还是通过33.6K或者54K的电话线拨号上网，速度非常慢，比现在主流的上网速度慢10到40倍，所以把一个比较大的图像分成若干块，这样浏览器在显示的时候 ，就会同时开多个线程，同时下载各个小块，这样可以更充分地利用带宽，其实原理就和“FlashGet快车”等下载软件是一个道理。

十年后又如何？

当今世界上没有什么技术的发展速度，可以和IT技术相比的。十年后的今天，情况已经发生了很大的变化，很重要的一点是上网的速度快了很多，虽然我们还不能和发达国家（甚至我们不甚看得上的韩国）动辄上百兆的入户带宽相比，但是好歹1-2兆的ADSL还是很普及的。当下载速度快了以后，我们考虑的侧重点就不一样了。

1：当浏览器显示一个图像时，所花费的时间实际上由两个部分组成的，通俗来说是“发出请求建立连接的时间”以及“传输图像数据”的时间。在网速很低的时代，前者时间与后者相比可以忽略不计，而当宽带上网以后，后者的时间大幅度的降低了，而前者并没有明显降低，因此前者所占的比例就不能忽略不计了。

2：一个网页上往往需要很多边边角角的很多小图象，比如按钮、圆角、边框等等，这写图像通常本身的大小都非常小，因此他们的传输时间都非常短，反而建立连接的时间无论图像大小，都是一样的，因此“建立连接”花去了整个下载时间中的较大比例。

3：因此，人们就想到了一个方法，把这些小图像都平放在一个大图像中，这样当显示页面的时候，一次就把他们都下载下来了，然后通过CSS仅仅把需要的部分显示在需要的位置，本质上的原理就是“通过减少HTTP请求的次数，达到加快网页打开的速度的目的。”

4：读者可能要问，“Sprite”是什么意思？这个技术为什么要叫这个名字呢？说到这里，就要再往前推若干年啦，想当年，如果你玩过任天堂的红白机，肯定会知道超级马力、魂斗罗之类的经典游戏，90后的新生代朋友估计就未必知道了，我们这个年纪的人应该是没有人不知道的，总之就是那种很古老的接在电视上的游戏了。而“Sprite”就是这些游戏程序开发中的一个很重要的技术，就拿超级马力来说吧，超级马力这个人物、他要吃的蘑菇、花、金币、要顶的砖块、要躲避的小怪物、乌龟等等游戏中的各种元素，都是事先做好的一些图像元素，这些元素的大小都是固定的，然后整个游戏就是把这些元素拼接在画面中形成的。而所有这些基本的图像元素就叫做Sprite——“精灵”。

5：和上面说的当年开发游戏中的Sprite很类似，如果我们把需要显示在页面中的多个图像放到一个图像中，一次性下载到浏览器，然后再分别显示到需要的地方，拼接成最终的效果，因此就使用了Sprite这个名词了。

案例说明

下面通过从小到大的几个例子，说明下Sprite技术是如何应用在实际工作中的。

实际案例1：

在《CSS设计彻底研究》这本书里，我们虽然没有给出CSS Sprite这个名称，但实际上也介绍了使用的方法，192页，8.4节“三状态玻璃效果菜单”这个案例中，我们就是把三种状态的背景图像都放在了一个图像文件中，并提到了这样做的两个优点：

1：减少了文件的数量，便于网站的维护管理。

2：鼠标指针移动到某个菜单项上，如果要更换一个背景图像文件，那么有可能要替换的图像还没有下载下来，就会出现一个停顿，浏览者会不知发生了什么，而如果使用同一个文件，就不会出现这个问题了。

这个完整案例比较复杂，这里应用的CSS Sprite只是整个例子中很小的一部分，这里就不再详细介绍了。下面针对Sprite举一个实际的案例。

实际案例2：

其实我们这个网站的页面右侧栏中，就用到了Sprite技术。如果您使用Firefox浏览器浏览本页面，用鼠标右键单击右侧栏的每个圆角框中的四字标题，比如“视频教程”这4个字，然后在弹出菜单中选择“查看背景图像”，你将会看到如右图所示的这个图像。

可以看到，我们把若干个项目的标题都放在了一幅图像中。在对应的CSS中，比如“视频教程”这4个字所在的元素是一个span，它的CSS代码如下，文件style.css 第 803 行：

1
2
3
4
5
6
7

#sidebar ul li h2 span.category 
{
    background: url(images/side-title.png) no-repeat 0 -40px;
    display:block; 
    height:20px;
    width:200px;
}

可以看到，这个图像作为span元素的背景，span元素设置为块级元素（相当于div），并设置高度和宽度，在background属性中，设置了图像的路径，以及位置，关键在于这里的-40px，表示向上移动40像素，这时在高20px、宽200px这个“窗口”中显示的就正好是“视频教程”这一行了。其他各标题，以此类推，只要修改这个竖直方向的数值即可了。

这个小例子非常简单，相信只要有一点点CSS基础的读者都可以一眼就看明白。如果对上面这几行代码还不清楚的读者，可以看一下右侧“视频教程”目录下的教程，相信就会理解了。

下面我们看看一些大网站是怎么用这个技术的。

Apple公司网站

苹果公司是彻底靠设计吃饭的公司，我们先来看看苹果公司网站的菜单是如何实现的，请进入苹果公司的网站： www.apple.com.cn ，然后使用上面相同的方法，查看背景图像，可以开到结果如下所示。或直接察看源文件，也许以后苹果公司网站会改版，这个图像可能会变化。

原来是把菜单的不同鼠标状态都做到了一幅图中，再根据不同的页面，以及不同的鼠标状态，通过CSS在各个菜单项对应的“小窗口”中透出需要的那一小块。

淘宝网

淘宝网站的设计是很重视用户体验的，也是不少设计师向往去工作的公司。我们来看看淘宝是否使用了Sprite技术，结果如下图所示，点击查看源文件。

可以看到，同样，也把页面上的很多边边角角的设计元素都做到一张图上，然后再拼成所需要的显示效果。

思考题

1：Sprite技术的核心原理是什么？你能否将淘宝中Sprite图的各个“零件”与最终页面中出现的位置和元素对应起来？

2：从Sprite这个技术来由，你能否体会到“新技术”和“老技术”之间的关系？对你学习新技术有什么启示吗？

3：自己动手，查看一下其它还有那些大网站使用了类似的技术，163.com、yahoo.com、amazon.com 。

相信有一点经验的读者都会感到，使用CSS进行页面布局，调试是个大麻烦。特别是IE浏览器，各种版本都要测试，为此我们需要想各种方法，在自己的机器上按装各种版本的浏览器，这是很麻烦的事情。

有今天介绍的这个软件，就轻松多了—— IE Tester。IETester 是一个免费的浏览器，它同时包括了IE 5.5、IE 6、IE 7、IE 8 RC1的所有内核，所以你可以非常方便地使用它来对你设计制作的页面进行测试。以保证你设计的页面可以在各种IE浏览器中正确显示。

IE Tester 目前的最新版本是 V0.3 , 网站地址：http://www.my-debugbar.com/wiki/IETester/HomePage。也可以直接下载。他们还提供不少其他的Web设计开发中可以用得上的辅助工具，有兴趣的读者可以看一下。

对于很多人来说，学习CSS的一个很大的困难，不是因为CSS难以理解，而是因为CSS中的英文单词太多。其实CSS的原理非常简单。举个例子来说，比如说我们要描述一个人，我们可以这样写：

张飞{
    身高：185厘米；
    体重：105公斤；
    性别：男；
    性格：暴躁；
    民族：汉族；
  }

通过这样一张表，就可以把一个人的基本情况描述出来了。表中每一行分别描述了一个人的某一种属性，以及该属性的属性值。CSS的作用就是设置网页的各个组成部分的表现形式。因此，如果把上面的表格换成描述网页上一个标题的属性表，可以设想应该大致是这个样子：

2级标题{
    字体：宋体；
    大小：15像素；
    颜色：红色；
    装饰：下划线
    }

再进一步，如果我们把上面的表格用英语写出来：

h2{
    font-family: 宋体;
    font-size:15px;
    color: red;
    text-decoration: underline;
    }

奇迹发生了，这就是完全正确的CSS代码了。由此可见，CSS的原理实际上非常简单，对于英语为母语的人来说，写CSS代码几乎就像使用自然语言一样简单。

而对于我们，母语不是英语的人来说，自然就稍微难一些了。当然，实际上CSS中用到的英语单词也就几十个。即使一点英语都不懂，只要花一些时间，把必要的这几十个单词，以及一些在CSS布局中经常用到的单词，比如content、container等这些“习惯用语”理解，在加上不断的实践，相信学习会容易很多了。

这里我总结了一个“CSS英语小字典”，pdf格式，读者可以下载，一共有160个单词，如果您对英语实在不灵光，可以花几天时间，集中背一次，或者在开始学的时候遇到单词不认识，可以查一查什么意思。

========= 华丽的分割线 =========

附赠老笑话一则：

母老鼠带孩子在外散步，遭到猫的攻击，母老鼠学了几声狗叫将猫吓跑，事后，母老鼠语重心长地说：“学好一门外语是多么重要啊！”

自从互联网出现以后，人们生活中的某些方面发生了变化，当然也有很多方面没有发生改变。比如互联网出现以后，我们可以在网上找到很多很多资料，这是原来不可想象的事情，这就是变化；而我们学习某一项技能的本质过程，“理解概念和方法->实践->纠正错误->理解新的概念->再实践-〉再纠正错误->……”，如此往复，并没有变化，所谓“学而不思则罔，思而不学则殆”，几千年来都是如此的。

在学习过程，有一本好书，可以帮助提高学习的效率。因此，对于希望学习CSS这门技术的爱好者，这里给出一些建议。另外，我今天写这篇文章的目的也是因为我们出版了3本CSS方面的图书，因此，我觉得有必要把每本书的内容和特点，以及我们的出发点，和客观的一些因素，都交代给读者，帮助读者选择。

概述

首先，我查了一下，目前书名中包含CSS的图书，总体可以分为“讲解类”和“手册类”，这两大类。前者的目的是教会读者如何掌握和使用CSS这个技术，后者则是像字典一样，列出各种CSS属性等内容，以备在工作或学习随手查询。

目前来看，对于后者而言，一些设计师还是习惯于一本实实在在的手册，作为参考，但是实际上，手册的内容万万是非常标准的，网上可以找到很多CSS手册，虽然是各不相同，但是内容大同小异。

这里给大家推荐一个“最标准”的手册，就是CSS的根本——“CSS 2 规范”。原来我个人一直在看英文版，后来发现已经有中文版了，而且翻译的很不错，尽管里面的一些术语和我们使用的不同，比如“选择器”/“选择子”，但是对应起来也很容易。

网上很多网站可以下载，但是我建议大家到真正的原翻译者的网站，Taylor Ren，W3C的CSS2多语言翻译计划中文组的成员，他的个人网站（任氏有无轩），他的blog，以及他翻译的CSS2规范中文版。规范是最严谨、标准的手册，一切答案都在里面，非常感谢Taylor Ren做的这项工作。

当然规范存在的一个小缺点就是，它并不是那么容易读的，特别是对于初学者，要看懂CSS规范并非易事。因此，我们出版的书，都不是手册性质的书，我们的出发点是讲清楚里面的道理，以及如何用这些道理进行实际的工作。帮助读者在尽快的时间里掌握它。

我们一共出版了3本CSS方面的图书：

《精通CSS+DIV网页样式与布局》，2006年12月完成书稿，2007年7月出版上市；

《CSS设计彻底研究》，2007年11月完成书稿，2008年2月出版上市；

《HTML+CSS网页样式与布局从入门到精通》，2008年4月完成书稿，2008年8月出版上市。

编写过程回顾

《精通CSS+DIV网页样式与布局》这本书是两年前构思编写的了，当时国内的网页设计，还是以传统的表格布局为主流，CSS布局方式还没有被广泛接受，因此这本书是有一些“布道”的含义。

另外，由于CSS还属于比较新鲜的事物，我们在考虑内容的时候，尽可能地考虑了入门的门槛和技术的铺垫，CSS最核心的一些内容，比如盒子模型、浮动、定位等容，都放在了书的后半部分，此外我们也在书名中说明是“样式与布局”，样式在先，布局在后。这样做的好处就是降低了门槛，只要稍稍有些基础的读者，都可以入门。

当然，这也引起了一些不是很耐心的读者的误解，看了几章，都没有出现DIV这三个字母，其实，只要耐心看下去，都是有的。尽管这本书中的理论讲得并不很多，但是后面举了5个综合案例，如果读者能够把这5个综合案例真正吃透的话，完全可以应付大多数需要了。

《CSS设计彻底研究》的出发点，就和上一本书不同了，我们希望真正把CSS讲透彻，CSS和HTML不同，远比HTML复杂，加之各种浏览器的不统一，总之学习的过程中，总会遇到很多问题。更为重要的是，我们感觉到CSS的学习有其自身的特点，那就是学习CSS，必须先下功夫把核心的基础概念理解透彻，否则你想做的花哨效果都不可能做出来。

因此，在这本书中，我们把最重要的几个核心概念和原理的讲解放在书的最前面部分，并且反复告诉读者，一定要先踏踏实实地把这些概念真正理解，然后再开始后面的复杂案例的实践。因为现在的读者有太多“急性子”了，太多人希望直接做出效果，而不想搞懂为什么。而CSS偏偏是一个你必需搞懂为什么，才能知道怎么做的东西。

此外，为了吸引读者，不至于一上来就被枯燥的基础“烦死”，我们在第2章，专门讲解了“CSS禅意花园”网站，通过它，读者可以看到CSS的强大，这样也可以帮助读者能够耐下心来，啃一啃那几章出不来效果的理论章。总体来说，这本书，要比《精通CSS+DIV网页样式与布局》更系统、更深入，而且对于一些布局的方法，我们都做了完整的分类讲解，这些方法覆盖了CSS布局的所有的可能情况。

总之，《精通CSS+DIV网页样式与布局》更注重于怎么做，而《CSS设计彻底研究》在讲怎么做的同时，一定要把为什么讲清楚。

后来的第三本书，《HTML+CSS网页样式与布局从入门到精通》就是为了照顾没有任何HTML基础的读者编写的了，这本书把HTML和CSS揉在了一起，但是我们花了很多功夫考虑，应该先讲什么，后讲什么。

因为对于一个完全没有相关基础知识的读者，如何让他在一本书的过程中，建立起正确的概念体系，是很需要研究的。这和给一个已经对HTML和网页制作有很多经验的读者，讲一讲怎么用CSS，是完全不同的。而且，HTML的属性和CSS的属性有很多重叠的东西，那么如何让读者理解二者之间的关系，在头脑中建立“结构与表现分离”的核心思想，我们也想了很多办法，总之希望读者可以通过这本书，真正建起来一个健康的概念体系，这对于读者以后实际工作，有着非常重要的意义。

建议

如果您只打算买一本书，学习您可以根据您的基础和学习习惯，选择其中的一本。这里要特别说明的是，如果您打算买两本书，您可以买 [《精通CSS+DIV网页样式与布局》+《CSS设计彻底研究》]，或者[《HTML+CSS网页样式与布局从入门到精通》+《精通CSS+DIV网页样式与布局》]，都没有问题。但是不要购买[《HTML+CSS网页样式与布局从入门到精通》+《CSS设计彻底研究》]，这两本书中关于CSS内容有一部分比较接近，因为这些理论毕竟都是一样的，您只需要学习《HTML+CSS网页样式与布局从入门到精通》就够了，实际上《HTML+CSS网页样式与布局从入门到精通》这本书的内容密度非常大，都掌握了，就可以应付绝大多数任务了。

好了，就写这么多吧，非常感谢广大读者的支持！昨天我偶然发现在卓越亚马逊书店里，搜索书名中包含“CSS”的图书，然后按照销量排序，我们的三本书竟然占据了第1、2、4的位置，看来只要下功夫做好内容，就会有读者喜欢。

上次的文章中，我们介绍了一位非常可爱的小朋友讲解的jQeury。

今天介绍一个jQeury的实际案例。通过这个案例我们可以再次看到jQuery的方便和强大！

效果展示

这个效果称为表格的“行锁定”效果，鼠标单击表格中的一行，该行变色，单击另一行后，新点击的行变色，上次点击的行颜色恢复，如下所示：

使用这个效果以后，用户选中某一行的选项更加方面，而且选中以后也会更加醒目。

实现方法

这个案例来自一个美国设计师的网站，这里也推荐给大家：Ask the CSS Guy。实际上这是一个Web设计师的个人网站，发表文章并不算频繁，但是每一篇文章都非常精彩，会让你有所收获。如果你不懂英语，也应该可以通过Google翻译工具，加上清晰代码，看懂他的文章。

这里我就翻译一篇他最近发表的文章，这篇文章非常好地体现了jQeury的优点和技巧。点击这里查看原文。

为了方便对比，您在开始学习之前，可以查看这个案例的“纯Javascript版”和“jQuery版”。如果查看这两个页面的源代码，可以看到前者的代码远比后者复杂。

如果使用jQuery实现这个效果，仅需要下面这几行非常简单的代码：

1
2
3
4
5
6
7
8
9
10

$(function() {
  $('.pickme tbody tr:odd').addClass('odd');
  $('.pickme tbody tr').hover(
    function() { $(this).addClass('highlight'); },
    function() { $(this).removeClass('highlight'); }
  ).click( function() {
    $('.selected').removeClass('selected');
    $(this).addClass('selected').find('input').attr('checked','checked');
  });
});

这里简单解释一下上面的代码，是这样的：

1：当页面装载DOM结束以后开始执行：
2：首先表格中，每间隔一行，给一行增加一个“odd”（奇数）CSS类别。
3：然后，设置一个鼠标经过行为，它包括：
3.1：当鼠标进入某一行，为该行增加“lighlight”CSS类别，
3.2：当鼠标离开某一行，为该行删除“lighlight”CSS类别，
4：然后，设置一个鼠标单击行为，行为当任意一行被点击时：
5：删除除了被点击行以外的所有行的“selected”类别
6：然后给当前行增加“selected”类别，并把该行的单选框选中

这些代码比原来直接用Javascrtipt实现的代码短得多，而且理解和编写都容易得多。

注意事项

当然，对于使用Javascript库还是有一些需要注意的问题：

首先，如果你的网页上仅仅需要一个单独的效果，可能最好还是用Javascript来实现，这样更简洁；但是如果你已经在网站上使用jQeury（或者其他的Javascript库），那就尽可能地利用它的优势吧。也就是如果仅仅为了一点点非常小的效果，而使用Javascript库，特别是一些比较大的库，也许是不必要的。

其次，容易实现并不意味正确（就好像你购买一件衣服，并不应该因为它便宜，而是应该因为它适合你）。在你决定使用某个效果之前，先仔细想一想，这个效果是必须的吗？

课后作业

如果你看了这篇文章，给你留一个作业：作为练习，把单选某一行，改为复选某些行，即可以同时“锁定”多行，应该会做了吧。