最新Web前端XHTML+CSS+JavaScript-3PPT课件.ppt

《最新Web前端XHTML+CSS+JavaScript-3PPT课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、Web前端XHTML+CSS+JavaScript-3能使用各种CSS选择器进行页面基本设置。能使用各种样式表。掌握CSS的继承特性，能够利用继承特性控制页面的显示效果。掌握CSS的层叠特性，能够利用层叠特性控制页面的显示效果。学习目标3.1CSS的基础知识3.1.1CSS的基本思想层叠样式表单（cascadingstylesheets，CSS）又称风格样式表，是一种用来表现XHTML或XML等文件样式的计算机语言，用于进行网页风格设计。XHTML和CSS之间是“内容结构”与“表现形式”的关系。3.1CSS的基础知识3.1.3CSS复合选择器1.交集

2、选择器交集选择器由两个选择器直接连接构成，其中，第一个必须是标签选择器，第二个可以是类选择器或ID选择器，两个选择器名中间不能有空格，必须连续书写。交集选择器的结果是两个选择器的交集。3.1CSS的基础知识2.并集选择器并集选择器也由多个选择器构成，选择器之间由逗号连接，它的结果是多个选择器的并集。如果某几个页面选择器风格相同或者部分相同，可以利用并集选择器进行声明。3.1CSS的基础知识3.后代选择器后代选择器通过各种选择器的嵌套实现对页面的控制，其中，内层标签是外层标签的后代。在写法上，外层标签写在前面，内层标签写在后面，中间用空格分隔。3.1C

3、SS的基础知识3.1.4在XHTML中使用CSS的方法在XHTML中使用CSS的方法主要有4种，分别是行内样式表、嵌入式样式表、链接式样式表和导入式样式表行内样式表链接式样式表嵌入式样式表导入式样式表3.1CSS的基础知识1.行内样式表行内样式表是最直接的一种样式，它在XHTML中通过使用style属性，然后将CSS代码直接写入其中实现。3.1CSS的基础知识2.嵌入式样式表嵌入式样式表又称内嵌式样式表，它利用标签进行页面控制，放在和之间。3.1CSS的基础知识3.链接式样式表链接式样式表属于

4、外部样式表的一种，它将XHTML和CSS分成两个或者多个页面，把CSS样式存储在扩展名为.css的文件中，利用标签的href属性实现样式控制。3.1CSS的基础知识4.导入式样式表导入式样式表也属于外部样式表的一种，与链接式样式表的区别在于引入方法不同，它在HTML文件的标签之间引入CSS文件。课堂实训3-1制作Goodmorning网页本实训将制作的网页是一个个人网站的首页。技能分析实训目的实训步骤实训提高实训内容12345课堂实训3-1制作Goodmorning网页本实训将制作的网页是一个个人网站的首页

5、。课堂实训3-2制作汽车网页制作汽车网页技能分析实训目的实训步骤实训提高实训内容12345课堂实训3-2制作汽车网页制作汽车网页3.2CSS的特性3.2.1CSS的继承特性所谓CSS的继承特性，是指被包含在内部的标签将拥有外部标签的样式性质。继承特性最典型的应用通常发生在整个网页的样式预设中，需要指定为其他样式的部分，设定在个别标签里即可。3.2CSS的特性1.继承的关系CSS的一个主要特性就是继承，它是依赖于祖先与后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的标签，还可以应用于它的后代。3.2CSS的特性3.2CSS的特性2.继承

6、的优先级在制作网页的过程中，制作者可能想要设置某个规则比其他的规则更重要，CSS中允许这样设置，称为重要规则（importantrule）。这是根据其声明的方式和它们的自然属性命名的。通过在一条规则的分号前插入“！important”来标记一条重要规则。3.2CSS的特性3.继承的应用CSS继承是指子标签继承父标签的所有样式风格，并可以在父标签的基础上进行修改覆盖，从而产生新的样式。子标签的风格不会影响父标签。CSS的继承贯穿整个CSS页面设计中，利用CSS继承的这种关系可以大大缩短代码的编写量，并提高程序的可读性。3.2CSS的特性3.2.2CSS

7、的层叠特性CSS样式的优先级从高到低的顺序是：行内样式、id样式、类别样式、标签样式。也就是说，CSS的层叠就是页面样式冲突的解决方案。课堂实训3-3制作校园新闻网页制作校园新闻网页技能分析实训目的实训步骤实训提高实训内容12345课堂实训3-3制作校园新闻网页制作校园新闻网页课堂实训3-3制作校园新闻网页制作校园新闻网页3.3实战训练：制作美术工作室页面制作美术工作室页面任务分析技术难点提示任务提示步骤提示3.3实战训练：制作美术工作室页面制作美术工作室页面3.4思考与练习1.XHTML文档的基本结构由哪几部分组成？2.如何在XHTML代码中使用C

8、SS代码？3.什么是CSS的选择器？CSS一共有几种选择器？4.有几种方法能够保证用户设计的样式可应用到内容