div+css第四讲.pptVIP

别具光芒《CSS网页布局案例剖析》 软件教研室:顾海燕 第1章　从基础开始 1.1　(X)HTML与CSS 1.2　基本CSS选择器 1.3　在HTML中引入CSS的方法 1.4　动手体验CSS 1.5　网页使用的编辑软件 1.6　CSS的复合选择器 1.7 CSS的继承特性 1.8　CSS的层叠特性 1.9　本章小结 1.9 本章小结 本章重点介绍了4个方面的问题。 先介绍了XHTML和HTML的发展历程以及需要注意的问题，然后介绍了如何将CSS引入HTML，接着讲解了CSS的各种选择器及其各自的使用方法，最后重点说明了CSS的继承与层叠特性以及它们的作用。作为CSS设计的核心基础，请读者务必真正搞懂这些最基础和核心的基本原理。 本章通过一个简单的实例，让读者体验了CSS的设置方法，从中可以看出，基本的方法就是要通过选择器确定对哪个或哪些对象进行设置，然后通过对各种CSS属性进行适当的设置，实现对页面样式的全面控制。在本例中，用到的许多样式前面都没有介绍过，从下一章开始，就会逐渐讲清楚它们的含义和用法了。 课后作业 （1）什么是CSS的继承特性？ （2）什么是CSS的层叠特性？ 1.7 CSS的继承特性 在本节中，对后代选择器的应用在未进一步做一些讲解，因为它将会贯穿在所有的设计中。 学习过面向对象语言的读者，对于继承（Inheritance）的概念并不陌生。 在CSS语言中的继承是将各个HTML标记看作一个个容器，其中被包含的小容器会继承包含它的大容器的风格样式。 本节从页面各个标记的父子关系出发，来详细地讲解CSS的继承。 1.7.1 继承关系 html head title继承关系演示/title /head body h1前沿emWeb开发/em教室/h1 ul li Web设计与开发需要使用以下技术： ul liHTML/li liCSS ul li选择器/li li盒子模型/li li浮动与定位/li /ul /li liJavascrip/li /ul /li 所有的CSS语句都是基于各个标记之间的继承关系的，为了更好地理解继承关系，我们首先从HTML文件的组织结构入手，如下例所示。 li此外，还需要掌握： ol liFlash /li liDreamweaver/li liPhotoshop/li /ol /li /ul p如果您有任何问题，欢迎联系我们/p /body /html 1.7.1 继承关系 说明： ul标签：无序列表; li标签：定义列表项目,可用在有序列表 (ol) 和无序列表 (ul) 中; ol标签：有序列表; em标签：强调标签，多数浏览器都会使用斜体显示em标签里的内容。 这里着重从“继承”角度来考虑各个标记之间的“树”形关系，如图所示。在这个树形关系中，处于最上端的html标记被称之为“根（root）”，它是所有标记的源头，往下层层包含。如图1.4.1所示。 1.7.2 CSS继承的运用 style h1 { color: blue; text-decoration: underline; } em{ color: red; } /style CSS继承指的是子标记会继承父标记的所有样式风格，并可以在父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格完全不会影响父标记。例如在前面的案例中加入如下CSS代码： CSS的继承贯穿整个CSS设计的始终，每个标记都遵循这CSS继承的概念。可以利用这种巧妙关系，大大缩减代码的编写量，并提高其可读性，尤其是在页面内容很多且关系复杂的情况下。 1.7.2 CSS继承的运用 li{ font-weight:bold; } 例如，现在如果要嵌套最深的第3级列表的文字显示为粗体，那么增加如下样式设置： li ul li ul li{ color:green; font-weight:bold; } 效果是所有列表项目的文字都变成了粗体。解决的方法之一是设置单独的类别，比如定义一个“.bold”类别，然后将该类别赋予需要变为粗体的项目，但这样有点麻烦。另一种方法是利用继承的特性，使用“后代选择器”，例如下面代码： li li li{ color:green; font-weight:bold; } 还可以化简为： 1.7.2 CSS继承的运用－思考题 li li{ font-weight:bold; } （1）如果设置如下代码，效果