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

今天收到了吴昊读者的提问，谈到关于HTML属性和CSS属性的问题，感到这个问题比较有意思，而且很重要，所以在这里同意回答一下。他的问题是这样的：

“谢谢此教程的编写者，给我们初级学习带来了便捷且有效的方式，在此表示诚挚的谢意!

不知道html有没有类似的教程，有些标记和html的功能一样，但是属性标记不同，比如说：font face(这个是字体)；font-family(也是字体)，这种对比是不是应该在学习的过程中，连带给提一下呢，谢谢！”

吴昊读者是一个喜欢思考的人，他说的这个问题确实如此，有的属性确实在HTML和CSS都有，那么我们到底应该使用那一个更好呢？

这首先要从HTML和CSS的核心思想谈起。在互联网发展的初期，各种规范还远没有像今天这样完善和普及，因此当时为了更容易被大家和软件厂商所接受，网页主要是由HTML来完成的，这样写起来更简单，因此一个网页的两个方面——“结构”和“表现”就都由HTML来承担，因此HTML标记就由两类构成——负责定义网页结构的标记，以及负责定义网页表现形式的标记。比如一个p标记,就是用来定义一个段落，这就是一个结构标记；而font标记，用于定义网页元素的字体，这就是“形式”标记。

这样一个HTML承担了双重任务，在早期网页都很简陋的时候，还问题不大，而随着网页越来越复杂、精致，问题就越来越显现出来了。由于结构和形式混杂在一起，使得网页非常混乱，难于维护、修改和升级。比如一个网页上如果多处文字是用font标记定义了字体，如果日后需要修改，就不得不依次修改每处font标记，这样对于一个大型的网站，无疑非常复杂。

因此，自然会有高人来解决这个问题，思路是很明确的，那就是“结构与表现”分离，而这就是CSS的核心思想，学习CSS，最重要的就是真正深刻理解这一点。使用CSS以后，HTML只负责定义网页的结构和内容，比如p标记的任务在CSS中是无法替代的，而font标记的作用则完全应该由CSS来负责定义。这样做的好处是，一个网页的“结构”和“表现”分离以后，网页就可以保持非常好的结构性，而如果希望修改网页的样式，也仅需要修改CSS中的相应设置即可，因此维护、修改、升级都变得非常高效。

对于HTML来说，后来W3C组织发布了XHTML规范，把诸多用于表现的标记都已经划归为“废弃”的标记，如果要按照Web标准的写法，就不应该使用了，当然这也不是非常严格，如果你要用的话，浏览器也还是可以正确显示的，当然，你应该再了解一下关于“文档类型”（DOCTYPE）的问题，这一点在视频教程里我们进行了讲解。

现在回到你的问题，对于font这样的标记，你应该用CSS来实现，而不应该使用HTML标记。而且你会发现，即使有的属性，它们二者看起来作用是相同的，但实际上CSS所能实现的控制远远比HTML的要细致、精确的多。比如font标记，你仔细比较一下，就会发现二者的区别。

希望上面的回答能够给大家一个比较明确的解释。

来自广西的杨金雄读者提出了一个问题，如何在鼠标指针经过一个图像时，图像出现一个细线的边框呢？这里对这个问题给出一个回答。

先来看一下最终的效果，请读者将鼠标移动到图像范围内：

首先请注意：学习本文需要一定的CSS基础，必须对“CSS选择器”、“后代选择器”、“伪类”这几个基本概念有所了解。

这个效果如何实现最方便呢？如果对于CSS选择器理解不够深入，可能想到的方法是把图像放在a标记中，然后在设置a元素的边框，这样做会非常麻烦，我们现在来看一下更为方便的解决方法。

首先我们假设这个图片不需要连接到其他的页面，因此尽量不使用“a”标记，而是仅对“img”标记进行设置，CSS代码如下：

1
2
3
4
5
6
7

img{
	padding:5px;
	border:1px white solid;
}
img:hover{
	border:1px green solid;
}

html代码当然非常简单，仅一句话：

1

<img src="cup.gif" />

效果如下：

如果使用Firefox浏览器的用户会发现这个效果和最上面的效果相同，因此，这样简单的几句话就实现了这个效果。然而这里对img标记使用了“:hover”伪类，因此使用IE 6浏览器的用户会发现，鼠标移动到图像范围内不会出现绿色边框。

那么应该如何解决呢？

在IE6中，只有“a”标记支持“:hover”伪类，因此必须从这里寻找突破口。首先改造HTML代码，也就是在图像的外面套上一个“a”标记，代码如下：

1

<a href="#"><img src="cup.gif" /></a>

接下来，为它编写CSS代码，核心要点是把原来应用于img标记的:hover伪类改在a标记上。

1
2
3

a img {padding:5px;}
a:link img, a:visited img {border:1px white solid;}
a:hover img,a:active img {border:1px green solid;}

如果对CSS选择器了解比较深入的读者，看懂这段代码是比较容易的，第1行的目的是使边框与图像之间有5个像素的空间，如果希望边框紧贴着图像，那么这行代码可以删除；第2行的作用是定义在鼠标没有经过时，设置边框为1像素宽白色实线，第3行的作用是定义当鼠标经过或者点击图像的时候，边框的颜色变为绿色。

因此需要读者必须熟悉CSS的选择器的含义和伪类的含义，特别是“后代选择器”的含义，在这里第2行和第3行中，把“img”写在“a:hover”的后面，就表示在a元素处于鼠标经过状态时，里面的图像被选中。

以上写法是完全符合标准CSS写法的，在Firefox中，也是可以正常显示的。然而，“倒霉催”的IE 6在这里又出问题了，它对于这种情况存在bug，好在已经有人找到了解决的方法，也就是在上面CSS代码的前面加一句话，最终的代码如下所示：

1
2
3
4

a:hover {color: #FFF;}
a img {padding:5px;}
a:link img, a:visited img {border:1px white solid;}
a:hover img,a:active img{ border:1px green solid;}

这样，就可以同时适用用IE 6/IE7/Firefox了。

最后补充说明一点，如果你希望的效果是，平常状态没有边框，鼠标经过图像时出现某种颜色的边框，那么只需要将上面代码中，平常状态的边框颜色设置为背景的颜色，而不要去掉平常状态的边框，否则会发生跳动，视觉效果会变得不好。

此外，使用了“a”标记以后，鼠标经过图像时，鼠标指针会变成手的形状，如果希望仍然保持箭头指针，可以在“a:hover”中增加一条对鼠标指针的设置：“cursor:default;”即可。

需要仔细研究的读者可以下载本案例的页面代码：下载本文的案例源代码。

今天收到读者的一个提问，不是关于具体的技术，而是关于一些宏观的指导，或者往大了说，叫做“职业规划”吧，感觉有一定的代表性，相信不少初学者都有这方面的问题，因此这里扩展回答一下。这位张同学的问题是：

“本人在学校学过一点点ＣＳＳ，刚从学校毕业出来不久吧，虽然我学的是设计，但我知道设计师也要懂这个．虽然我还没有看完．但您讲的这个使我学到了很多，我非常谢谢您，辛苦了．

我可否请教老师，做为一名设计师应该懂的哪些软件，刚踏进社会，什么都不懂，请帮我指示一下．深表感谢！！！”

实际上这个问题蛮大的，所以概括来说一下了。随着互联的发展，现在网站设计和开发的这行业也越来成熟了，从分工的角度来说，可以用网页“设计”、“制作”、“开发”来概括这方面的工作。

–“设计”主要指的是用Photshop、以及各种美术相关的软件进行页面的设计，这个主要看美术创意设计能力。

–“制作”主要是把前面设计好的页面方案变成真正的页面和网站，这个主要需要掌握HTML语言，以及最近越来越流行的CSS/DIV，主要工具是Dreamweaver或者ExpressionWeb等软件。

–“开发”主要指的是服务器端的程序开发，例如ASP、ASP.net、PHP等语言，以及SQL Server或者MySQL等数据库系统。随着Web 2.0概念的逐步深入，现在也有很多开发工作是关于前端的，主要就是对Javascript要非常精通，现在这方面的人很缺。

对于美工来说，主要完成的是“设计”这个环节，本来这个是最需要的创意的，不过现在国内抄袭成风，所以除非是顶级的，有时候确实做起来比较难，但是我觉得将来还是会靠真本事吃饭的，而且会非常值钱的。因为无论技术怎么飞速发展，但是美术创意实际上是不会变的，也不可能程序化、自动化，都必须由人来产生。

对于制作来说，不许要很高的理论基础和创意，门槛是最低的，但确实是个非常辛苦的工作，需要反复调整保证在各种浏览器中都能正确显示，而且如果一旦实际发生变化，很可能工作就需要彻底重来。但是用CSS布局以后，这个工作的技术门槛有所提高。

对于开发来说，如果要真有发展，还是需要对编程有一点了解的，这需要慢慢来。

其实每个人还是应该根据自己的情况，来选择自己的发展道路，如果您对这方面的技术感兴趣，可以在我们的网站中找到一些相关的资料，相信会对您有所帮助。您进入这个网站以后，可以看到课程的目录，有关于Flash的、网页制作的、Photoshop的。每节课就十几分钟，学习起来也很轻松。按照目录的顺序一遍看，一边实际操作，相信您很快就能掌握了。

关于具体学习什么软件比较好，这个一方面你可以根据自己的情况来定，另一方面可以根据市场需求来定，看看现在招聘网站上对什么需要的最多，你就学什么，这样你的选择余地就会比较大。你可以参考《学点什么技术好？》这篇文章，也许可以给你一些启发。

今天焦飞龙读者提出一个问题，颇具代表性。对于使用CSS布局和设计网页，很大的麻烦来自于不同浏览器对CSS解释的差异。特别是IE浏览器和Firefox浏览器的差异。

这位读者的问题是：

“我学CSS一个多月了,以前网页制作的基础还不错,感觉CSS很好用,我正在用它做一个网站,刚开始有些地方遇上不少麻烦,不过还好,都解决了,经过半个月主页制作好了,感觉很满意,可是遇是了一个更麻烦的问题,我一直通过IE浏览器来查看的,可我今天放到Firefox里乱的好厉害,这是怎么回事啊,是不是有些浏览器里还不支持CSS的一些功能啊,还是自己制作过程中的问题,我买了精通CSS DIV这本书,主要是通过它来学习的,感觉很不错,不过现在看来有些基础了,有没有更好的书啊,实例多一些,麻烦您和我说说这些情况,真是不明白,谢谢！”

首先，对于浏览器的兼容问题，这里给大家两个建议，供大家参考：

1：当一个效果在Firefox和IE6中显示的不一样时，一般来说Firefox显示的是“正确”的效果，这里说的正确，并不是指主观希望的效果达到了就是正确效果，而是说按照真正的CSS规则，应该显示的效果，叫作正确的效果。也就是说，如果Firefox中显示的效果和希望的效果吻合，而与 IE显示不吻合，那么是IE有错误的可能性更大，而反之则说明很可能是为了迁就IE6的错误，而写了错误的代码。

那么为什么不能以IE为标准，当作是IE的效果是正确的呢？这是因为，CSS的规则本身是严格符合逻辑的，是可以计算和预测的，而IE中的很多错误是没有道理的，无法预测的，因此，用一个错误修正了另一个错误，在局部看起来可能效果是正确的，但是很可能在其它地方，或者更大范围内带来不可预知的麻烦，从而严重影响效率。因此，比较好的做法是以Firefox作为正确的效果，让IE想办法来适应它。

2：测试的时候，不要在一个浏览器中完全做好，再用另一个浏览器测试。例如，对于一个很复杂的页面，如果首先在Firefox中制作，已经完全测试好了，然后用IE查看，可能很多地方都是混乱的，此时就针对IE进行一系列调整，等调整好了，回到Firefox查看，又乱了，如此往复，结果可想而知。因此，从空白页面开始，每做一小步，就同时在各种浏览器中查看，一旦发现显示效果不同，立即查找原因，寻找解决办法，因为每次增加的代码都很少，这样就很容易找出原因，从而做到最后就可以同时满足各种浏览器了。

关于问到的深入一些的CSS书籍，我们现在推荐的是即将出版的《CSS设计彻底研究》，我们的目前正在连载的视频教程，就是为这本书配套制作的，这套书会深入地讲解很多更为深入的CSS原理和方法，希望对大家有所帮助！

大家好：

今天收到袁马飞读者的一个问题，我觉得比较有价值，可能不少学习CSS的读者都会遇到相似的问题。因此这里详细讲解一下。

他的问题是：

“ 我是一个热爱ＣＳＳ的读者，你们写的书我都看完，也跟着做完了！可是我有一个问题，就是你们书本上没有介绍到的。我画了一个ＴＯＰ图片，可是左边有一个花纹，右边也有一个花纹，中间还有一张底图图片， 还有文字标题，我不知道怎样用CSS定义的啊！ 所以就要请教一下你们了！ ”

我理解他的问题是希望在标题文字的下面有背景图像，比如这样：

对于这样的标题，如果标题宽度是固定的，那么就很简单，可以制作一个固定的背景图像，作为h1标记的background-image就可以了。

而如果标题宽度不固定，需要变化宽度，而同时保证花纹在左右两端，就麻烦一些，需要使用一种称为“滑动门”（Slide Door）的技术。例如下面的这个标题和上面的例子,宽度变化了，但是左右两端的花纹依然保持正确的效果。

这就是通过滑动门技术来实现的。所谓“滑动门”，就是两个嵌套的元素，各自使用一个背景图像，二者中间部分重叠，两端不重叠，这样，左右两端的花纹就可以都被显示出来，中间部分的宽度可以自动适应，因此宽度变化时，依然可以保证左右两端的图案不变。“滑动门”这个名称很形象地描述了这种方法的本质，两个图像就像两扇门，二者可以滑动，当宽度小的时候，就多重叠一些，宽度大的时候，就少重叠一些。

具体操作如下：

首先，为了“挂上”两个背景图像，需要两个HTML元素，因此在h3标记中间在嵌套一层span：

1

<h3><span>标题文字</span></h3>

然后，分别对h3和span的CSS样式进行设置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

h3{
	font-size:13px;
	line-height:21px;
	text-align:center;
	width:200px;  /*修改这个值即可改变宽度，且保持两端的花纹*/
	background-image:url(bg.gif);
	background-repeat:no-repeat;
	padding-left:40px;
}
 
span{
	display:block;
	padding-right:40px;
	background-image:url(bg.gif);
	background-repeat:no-repeat;
	background-position:right;
}

可以看到，实际上二者是用的是同一个背景图像，这个背景图像如下所示。

关键的要点是，由于span元素在h3元素里面，因此span的背景图像在h3的背景图像的上面。h3通过设置左侧的padding露出左端的花纹。

而span通过background-position属性，从右边开始显示背景图像，这样就可以露出背景图像的右端了。

大家如果还不十分清楚，可以点击这里查看滑动门效果，然后把文件下载到您的计算机上，修改一下宽度，试验一下效果。

如果对CSS比较熟悉的话，上面的CSS代码可以简写如下：

1
2
3
4
5
6
7
8
9
10
11
12

h3{
	font:13px/21px;
	text-align:center;
	width:200px;  /*修改这个值即可改变宽度，且保持两端的花纹*/
	background:url(bg.gif) no-repeat;
	padding-left:40px;
}
span{
	display:block;
	padding-right:40px;
	background:url(bg.gif) no-repeat right;
}

“滑动门”是一个非常有用的技术，可以用在很多很多地方，我们最近编写的《CSS设计彻底研究》书中，多次用到了滑动门技术来解决各种问题，核心就是解决需要适应宽度的问题。在制作导航菜单、为图像制作阴影、为页面布局设置背景色等很多地方，都有“滑动门”的用武之地。如果大家有兴趣，等书出版以后，可以参考一下。