Web 前端开发技术 教案 项目四 CSS 基础_第1页
Web 前端开发技术 教案 项目四 CSS 基础_第2页
Web 前端开发技术 教案 项目四 CSS 基础_第3页
Web 前端开发技术 教案 项目四 CSS 基础_第4页
Web 前端开发技术 教案 项目四 CSS 基础_第5页
已阅读5页，还剩3页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

Web前端开发技术教案设计项目课题CSS基础授课时间授课对象大学生学习目标1.理解CSS的概念。2.掌握CSS基本语法、选择器的分类与声明的结构。3.理解CSS继承与层叠的含义。学习重点掌握CSS基本语法、选择器的分类与声明的结构。学习难点掌握CSS基本语法、选择器的分类与声明的结构。教学方法讲授法、课堂演示法教学用具多媒体课件教学流程教学环节教学内容教学过程任务一CSS概述一、CSS概述由于Netscape和Microsoft两家公司在自己的浏览器软件中不断地将新的HTML标记和属性(如字体标记和颜色属性等)添加到HTML规范中,因此导致创建具有清晰的文档内容并独立于文档表现层的站点变得越来越困难。为了解决这个问题,HakonWiumLie(哈肯·维姆·莱,挪威)和BertBos(伯特·波斯,荷兰)于1994年共同发明了级联样式表。级联样式表(CascadingStyleSheet,CSS),也称为层叠样式表,是一种用于描述网页或文档外观和样式的语言。它允许网页设计者通过CSS规则来控制网页中元素的位置、大小、颜色等视觉特性。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页中各元素进行格式化。CSS能够对网页中各元素位置的排版进行像素级的精确控制,支持几乎所有的字体、字号样式,拥有对网页对象和模型样式进行编辑的能力。CSS的主要优势之一是支持内容和样式的分离,这意味着网页的结构(内容)和外观(样式)可以分开处理,这种分离提高了网站的可维护性和重用性。二、HTML5的优势1.摆脱对平台的依赖用户打开浏览器,直接就可以访问自己的应用,不需要经过各种审核。2.实时更新通常平台的审核都需要7个工作日左右,如果发布之后再出现问题则很难补救,而Web系统不存在这种问题。3.离线使用用户可以离线使用,更新下载量较少时,可以全部更新,也可以选择替换部分文件。4.代码更安全Web应用有一个很重要的问题就是代码的安全性问题,但HTML5可以将Web代码全部加密,本地应用解密后再运行,在很大程度上提高了代码的安全性。5.跨平台HTML5的跨平台兼容特性,使大部分核心代码不需要重写,这是因为JavaScript的代码可以在许多地方使用,包括移动应用、移动网站、PC网站、各种浏览器插件,甚至可以用WebKit封装作为跨平台的应用程序。6.可以充分利用NativeHTML5可以通过浏览器充分利用Native的好处。例如,可以使用GPS、照相机、本地相册、读取本地通信录,也可以使用推送功能,最重要的是,某些Web无法实现的功能可以利用Native来实现。任务二CSS基本语法一、语法规则1.选择器选择器可以是HTML标记名称或属性的值,也可以是自定义的标识符。选择器选择网页上的具体对象和元素,指定了CSS属性规则应用的对象。浏览器根据选择器严格解析匹配元素,再将定义的属性值应用到匹配的对象和元素上。当多条属性规则作用于同一个元素时,采用就近原则,越接近该元素的属性规则优先级就越高。2.属性CSS提供了丰富的属性,包括宽度、高度、颜色、大小等。例如,font-style属性用于设置文本的体,color属性用于设置文本的颜色等。一个对象元素可以同时设置多组属性效果。多组属性设置之间用分号隔开。不同的对象元素可以设置的属性有差别,如文本可以设置字体属性,而图像无字体属性。应用CSS3中新增的部分属性时,要考虑浏览器的兼容性。3.属性值每个属性可以设置的属性值不同。在CSS中,有些属性可以设置多个属性值,用逗号分隔,其基本语法格式如下。selector{font-family:"楷体_gb2312","黑体","TimesNewRoman";}该样式表说明了可以使用楷体_gb2312、黑体、TimesNewRoman3种字体来设置selector的字体效果。若在系统中找不到楷体_gb2312,则使用黑体;若找不到黑体,则使用TimesNewRoman,即按出现的先后顺序优先选择。4.注释像其他语言一样,CSS允许用户在源代码中嵌入注释。CSS注释可以被浏览器忽略,不影响网页效果。注释有助于记住复杂的属性规则的作用、应用的范围等,便于属性规则的后期维护和应用。CSS注释以字符“/∗”开始,以字符“∗/”结束。注释格式如下。/*这是多行注释CSS文件名:out.css功能说明:定义属性*//*单行注释属性段落p*/p{font-size:20px;/*行尾注释定义字号*/}“/∗……∗/”这种格式可以单独一行书写,也可以写在语句的后面;可以注释一行,也可以注释多行。注释不能嵌套。二、使用方式CSS的使用方式是指属性规则作用到网页元素的方式,通常有行内属性、内嵌属性、链接属性和导入属性。1.行内属性行内属性是把CSS属性规则直接添加到HTML标记中,作为标记style的属性值。行内属性的应用范围是当前标记的内容,属性规则中省略了选择器,其基本语法格式如下。<标记名称style="属性规则">……</标记名称>行内属性虽然简单,但不推荐使用,因为不能将网页内容和属性分离,不利于维护和属性重用。2.内嵌属性内嵌属性是将CSS属性规则先用<style>……</style>进行声明,然后添加在HTML文件的任意位置(一般放在<head>和</head>之间)。内嵌属性的应用范围是本网页中所有匹配的选择器的内容,其基本语法格式如下。<styletype="text/css">CSS属性规则……</style><style>标记中可以用type="text/css"属性声明类型,也可以不声明。<style>和</style>之间的注释,以“/∗”开始,以“∗/”结束。内嵌属性虽然没有将内容和属性完全分离,但是可用于设置少量的属性,实现同一页面上元素属性的统一。3.链接属性链接属性是先创建单独的CSS样式表文件,然后通过链接标记<link>将样式表文件链接到网页中使用。CSS样式表文件是纯文本文件,文件内容是属性规则的集合。CSS样式表文件的扩展名是.css。网页中链接样式文件时,<link>标记要放在<head>和</head>之间。链接的样式表中的属性规则,对引用了该样式表文件的网页有效。一个网页中可以使用多个<link>标记链接多个CSS样式表文件。多个样式表中的属性规则,依次作用于网页元素,<link>标记的基本语法格式如下。<head><linkrel="stylesheet"type="text/css"href="路径/样式表文件名.css"></head>链接属性很好地实现了内容和属性的分离,使网页的设计和维护变得十分方便,是最实用的CSS使用方式。4.导入属性导入属性和链接属性的操作过程基本相同,需要在内嵌样式表的<style>标记中使用@import导入一个外部的CSS文件。导入样式是指在HTML文件初始化时将外部CSS文件导入到HTML文件内,作为文件的一部分,类似于嵌入效果。而链接样式则是在HTML标记需要样式风格时才以链接方式引入。导入样式表的最大用处在于可以让一个HTML文件导入很多的样式表,不单是可以在HTML文件的<style>与</style>标记中导入多个样式表,在CSS文件中也可以导入其他样式表,其基本语法格式如下。@importurl("路径");或者@import"路径";其中,“路径”是指被导入样式表文件的位置,可以是相对路径或绝对路径。使用url()函数时,路径被作为字符串来处理,并且必须是有效的URL。任务三CSS选择器一、基本选择器1.标记选择器标记选择器的形式为标记名称。若使用标记名称作为选择器,则选择了网页内标记定义相同的元素。例如,p表示选择网页上的所有<p>标记定义的元素。2.类选择器类选择器的形式为“.类名”。在网页元素标记中,需要事先使用class属性设置元素的类名。若CSS中使用类名作为选择器,则选择了网页内类名相同的元素。网页中元素的定义如下。<pclass="x">第一段落</p><h3class="x">第一行文字</h3>3.id选择器id选择器的形式为“#id名”。在网页元素标记中,需要事先使用id属性设置元素的id。若CSS中使用id名作为选择器,则选择了网页内特定id名的元素。网页中的元素定义如下。<pid="x">第一段落</p>4.全局选择器使用全局选择器“∗”,可选择页面中所有的HTML元素。二、关系选择器1.群组选择器群组选择器是用逗号连接多个选择器,匹配列举的选择器。2.后代选择器后代选择器是用空格连接多个选择器,从父代选择器依次向下匹配到指定的后代选择器。后代选择器包含在父代选择器中。3.子代选择器子代选择器用“>”连接两个选择器,在父代选择器下匹配到指定的子代选择器。子代选择器包含在父代选择器里,并且是第一代的子代。4.兄弟选择器兄弟选择器用“~”连接两个选择器,匹配前一个选择器后的所有同级的后一个选择器。5.相邻选择器相邻选择器用“+”连接两个选择器,匹配前一个选择器后相邻的同级的后一个选择器。三、动态伪类选择器动态伪类选择器用于用户交互时选择处于不同状态的元素。任务四CSS继承与层叠CSS继承即子标记会继承父标记的所有样式风格,并且可以在父标记样式风格的基础上再加以修改,产生新的样式风格,而子标记的样式风格完全不影响父标记。值得注意的是,并不是所有的属性都会自动传给子元素,有的属性不会继承父标记的属性值,如边框属性就是非继承的。(1)CSS层叠是多个样式的叠加,是指浏览器解决冲突的一种能力,如果一个属性通过两个相同选择器设置到同一个元素上,这时属性就会将另外一个属性覆盖掉。可以把层叠特性理解成“冲突”的解决方案,即对同一内容设置了不同类型属性产生冲突时的处理。(2)CSS的选择器优先级是一个相对复杂的概念,它规定了在一组样式冲突时,哪些样式将被浏览器采纳。CSS规定优先级为:行内属性>id属性>class属性>标记属性。作业布置一、问答题(1)CSS的含义是什么?CSS的作用是什么?(2)CSS的语法规则包含哪几部分?每部分的含义是什么?(3)CSS应用到网页中的方式有哪几种?分别适用于什么类型的网页?在大型复杂的网站中,多个网页的样式风格要保持一致,最好采用哪种CSS使用方式?(4)CSS文件的内容由什么组成?扩展名是什么?(5)CSS的基本选

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论