Web前端实用教案

1、能使用各种CSS选择器进行页面基本设置。 能使用各种样式表。 掌握(zhngw)CSS的继承特性，能够利用继承特性控制页面的显示效果。 掌握(zhngw)CSS的层叠特性，能够利用层叠特性控制页面的显示效果。学习学习(xux)目标目标第1页/共31页第一页，共32页。3.1 CSS的基础知识的基础知识3.1.1CSS的基本的基本(jbn)思想思想层叠样式表单（cascading style sheets，CSS）又称风格样式表，是一种用来表现XHTML或XML等文件样式的计算机语言，用于进行网页风格设计。XHTML和CSS之间是“内容结构”与“表现形式”的关系。第2页/共31页第二页，共32页

2、。3.1 CSS的基础知识的基础知识welcome网页的实现代码如代码清单3-1所示第3页/共31页第三页，共32页。3.1 CSS的基础知识的基础知识3.1.2CSS基本基本(jbn)选择选择器器每个CSS选择器都包含选择器名、属性和值3个部分，如图3-2所示，其中，属性和值可以设置多个，从而实现一对多的控制。第4页/共31页第四页，共32页。3.1 CSS的基础知识的基础知识CSS有多种类型的选择器，但是不同的浏览器支持的选择器不同，这里重点介绍3种基本选择器，分别是标签选择器、类选择器和ID选择器。标签选择器类选择器ID选择器第5页/共31页第五页，共32页。3.1 CSS的基础知识的基

3、础知识3.1.3CSS复合复合(fh)选择器选择器1.交集选择器交集选择器由两个选择器直接连接构成，其中，第一个必须是标签选择器，第二个可以是类选择器或ID选择器，两个选择器名中间不能有空格，必须连续书写。交集选择器的结果是两个选择器的交集。第6页/共31页第六页，共32页。3.1 CSS的基础知识的基础知识2.并集选择器并集选择器也由多个选择器构成，选择器之间由逗号连接，它的结果是多个选择器的并集。如果某几个页面选择器风格相同或者部分相同，可以利用并集选择器进行声明。第7页/共31页第七页，共32页。3.1 CSS的基础知识的基础知识3.后代选择器后代选择器通过各种选择器的嵌套实现对页面的控

4、制，其中，内层标签是外层标签的后代。在写法上，外层标签写在前面，内层标签写在后面，中间用空格分隔。第8页/共31页第八页，共32页。3.1 CSS的基础知识的基础知识3.1.4在在XHTML中使用中使用(shyng)CSS的方法的方法在XHTML中使用CSS的方法主要有4种，分别是行内样式表、嵌入式样式表、链接式样式表和导入式样式表行内样式表链接式样式表嵌入式样式表导入式样式表第9页/共31页第九页，共32页。3.1 CSS的基础知识的基础知识1.行内样式表行内样式表是最直接的一种样式，它在XHTML中通过使用style属性，然后将CSS代码直接写入其中实现。第10页/共31页第十页，共32页

5、。3.1 CSS的基础知识的基础知识2.嵌入式样式表嵌入式样式表又称内嵌式样式表，它利用和标签进行页面控制，放在和之间。第11页/共31页第十一页，共32页。3.1 CSS的基础知识的基础知识3.链接式样式表链接式样式表属于外部样式表的一种，它将XHTML和CSS分成两个或者多个页面，把CSS样式存储在扩展名为.css的文件中，利用标签的href属性实现样式控制。第12页/共31页第十二页，共32页。3.1 CSS的基础知识的基础知识4.导入式样式表导入式样式表也属于外部样式表的一种，与链接式样式表的区别在于引入方法不同，它在HTML文件的和标签之间引入CSS文件。第13页/共31页第十三页，

6、共32页。课堂实训课堂实训3-1制作制作(zhzu)Good morning网页网页本实训将制作的网页是一个个人网站的首页。技能分析实训目的实训步骤实训提高实训内容12345第14页/共31页第十四页，共32页。课堂课堂(ktng)实训实训3-1制作制作Good morning网页网页本实训将制作的网页是一个个人网站的首页。第15页/共31页第十五页，共32页。课堂课堂(ktng)实训实训3 -2 制作汽车制作汽车网页网页制作汽车网页技能分析实训目的实训步骤实训提高实训内容12345第16页/共31页第十六页，共32页。课堂实训课堂实训3 -2 制作汽车制作汽车(qch)网网页页制作汽车网页第

7、17页/共31页第十七页，共32页。3.2 CSS的特性的特性(txng)3.2.1CSS的继承的继承(jchng)特性特性所谓CSS的继承特性，是指被包含在内部的标签将拥有外部标签的样式性质。继承特性最典型的应用通常发生在整个网页的样式预设中，需要指定为其他样式的部分，设定在个别标签里即可。第18页/共31页第十八页，共32页。3.2 CSS的特性的特性(txng)1.继承的关系CSS的一个主要特性就是继承，它是依赖于祖先与后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的标签，还可以应用于它的后代。第19页/共31页第十九页，共32页。3.2 CSS的特性的特性(txng)第

8、20页/共31页第二十页，共32页。3.2 CSS的特性的特性(txng)2.继承的优先级在制作网页的过程中，制作者可能想要设置某个规则比其他的规则更重要，CSS中允许这样设置，称为重要规则（important rule）。这是根据其声明的方式和它们的自然属性命名的。通过在一条规则的分号前插入“！important”来标记一条重要规则。第21页/共31页第二十一页，共32页。3.2 CSS的特性的特性(txng)3.继承的应用CSS继承是指子标签继承父标签的所有样式风格，并可以在父标签的基础上进行修改覆盖，从而产生新的样式。子标签的风格不会影响父标签。CSS的继承贯穿整个CSS页面设计中，利用

9、CSS继承的这种关系可以大大缩短代码的编写量，并提高程序的可读性。第22页/共31页第二十二页，共32页。3.2 CSS的特性的特性(txng)3.2.2CSS的层叠的层叠(cn di)特特性性CSS样式的优先级从高到低的顺序是：行内样式、id样式、类别样式、标签样式。也就是说，CSS的层叠就是页面样式冲突的解决方案。 第23页/共31页第二十三页，共32页。课堂实训课堂实训3-3制作制作(zhzu)校园新校园新闻网页闻网页制作校园新闻网页技能分析实训目的实训步骤实训提高实训内容12345第24页/共31页第二十四页，共32页。课堂课堂(ktng)实训实训3-3制作校园新制作校园新闻网页闻网页

10、制作校园新闻网页第25页/共31页第二十五页，共32页。课堂实训课堂实训3-3制作制作(zhzu)校园新校园新闻网页闻网页制作校园新闻网页第26页/共31页第二十六页，共32页。3.3实战训练：制作美术实战训练：制作美术(mish)工作工作室页面室页面制作美术工作室页面任务分析技术难点提示任务提示步骤提示第27页/共31页第二十七页，共32页。3.3实战实战(shzhn)训练：制作美术工训练：制作美术工作室页面作室页面制作美术工作室页面第28页/共31页第二十八页，共32页。3.4 思考思考(sko)与与练习练习1.XHTML文档的基本结构由哪几部分组成？2.如何在XHTML代码中使用CSS代码？3.什么是CSS的选择器？CSS一共有几种选择器？4.有几种方法能够保证用户设计的样式可应用到内容中？第29页/共31页第二十九页，共32页。第30页/共31页第三十页，共32页。谢谢您的观看(gunkn)！第31页/共31页第三十一页，共32页。NoImage内容(nirng)总结能使用各种CSS选择器进行页面基本设置。3.1 CSS的基础知识。XHTML和CSS之间是“内容结构”与“表现形式”的关系。we