第10章 CSS风格的继承演示文稿.PPTVIP

第10章 CSS风格的继承 本章将从计算机世界中一般的继承开始讲起，再到网页中的继承，最后是本章的重点--CSS风格的继承。通过学习和使用继承，我们不仅可以提高制作网页的效率，更能够进一步熟悉继承这个计算机概念，为今后从事IT业的其他领域，比如软件开发，软件测试等确立基本的观念，提高自己的竞争力。 我们常听爱好编程的人提到面向对象编程方法之类的词眼，听起来很高深。其实，在日常生活中，我们自己无时不刻都可能接触到这样的概念和方法，只是并没有主动意识到。在第一节里，就先举出一些继承的例子。 10.1 有其父必有其子：继承与面向对象 继承在生活中本来是一个法律术语。继承，是指自然人死亡时其法律规定范围内的亲属按照死者生前所立的合法有效的遗嘱或者法律的规定取得死者所遗留的个人合法财产。在继承中，其生前所享有的财产因其死亡而移转给他人的死者称为被继承人，依法承接被继承人财产的人称为继承人 后来，随着继承这个词含义的扩大，日常生活的语言中处处都可以找到继承的概念。比如这样一句俗语：有其父必有其子。意思就是说，儿子不光长的像父亲，有时候脾气秉性，做事情的方式也会很像父亲。这里边就有继承的影子了。 10.2 查看继承关系的工具 还记得第四章介绍过的DOM图吗？它也叫做DOM树，描绘了网页中各个标签的层次关系。在这里我们再次把它约出来，通过一个网页的实例来加深印象。 DOM树只是人们为了理解的方便而画出来的一个树状图，实际的HTML代码中虽然可以根据标签彼此的层次关系归纳出来，但在页面显示中是看不到的。如果想看到它，除了熟能生巧，在我们的脑子中生成之外，还有没有别的办法呢？ “工欲善其事，必先利其器”。如果能有一两件得心应手的工具帮助我们，初学者也能变得专业起来。这里以占市场份额最大的IE浏览器为例，给大家介绍一个很好用的查看DOM树以及了解HTML和CSS的工具 --- IE开发人员工具条（IE Developer Toolbar）。 IE开发人员工具条实际上面向所有要控制浏览器行为、显示等的人，当然也包括我们。该工具是免费的，可以在微软网站上下载，支持所有主流的IE版本（不过，目前还不支持IE8，毕竟还没有正式发布）。下载的地址是：/fwlink/?LinkId=71881。 10.3 CSS中的继承 在CSS中所说的继承就是指子标签在没有特别设置的情况下默认已经具有并应用了父标签的样式规则。 Inherit.html是一个用于测试CSS继承的网页，当在浏览器中打开时，忽略显示效果，只关心网页下方的IDT给出的层次信息，如图所示。我们将通过这个图来了解网页的层次结构。 10.3.1 文字样式的继承 首先看一下Body的样式规则，这确定了页面中基本的字体样式： BODY { /*Body内所有标签中的样式规则*/ color: red; /*字体颜色为红色*/ background: white; /*背景为白色*/ padding: 0; /*内边距为0*/ margin: 0; /*外边距也是0*/ } 10.3.2 边距的继承 我们继续看下一个Body的子标签，这是一个Div标签，应用了Div.three样式规则： DIV.three { margin-left: 5em; /*左边距为5em*/ padding: 0; /*内边距为0*/ background-color: #CCC; /*背景颜色为某种灰色*/ color: black; /*字体颜色为黑色*/ } 按照样式设置，Div的左边距为5em，也就是离浏览器左边框5个汉字字符的距离。内边距为0，即内容贴着边框显示；文字为黑色，背景灰色。在Div中有一个段落（编号为3），应用了P.three样式： P.three { font-size: 2em; /*字体大小为2em*/ } 10.4 标签的继承性 在上一节中我们通过实际的网页了解了字体样式默认就可以被继承，而边距样式则默认不被继承，除非在打算继承的标签样式中设置inherit值。那么，在众多的HTML标签中，默认被继承的总共有哪些呢？ 列出了默认被继承的标签，其中取值范围一栏：length代表具体的数值，%代表对于父标签属性的百分数值，其它均为实际设置值。(详细内容请参照本书) 默认就能够继承的标签都和文字样式有关。对于不在此表中的元素，一般来说都是默认不可以继承的，当然，我们也可以通过属性:inherit的方式来改变默认设置。 10.5 小结 在本章中，我们对CSS继承做了基本的探讨。在第1节，通过和日常生活的类比，基本建立了继承的感性认识。第2节介绍了一个非常有用而且好用的工具 --- 微软的IE开发者工具条，以及利用它形象地认识网页的层次结构树图。这种层次的关系将是判断父子标签的依据