ID: 16738307

中职《网页设计与制作(项目式教材)》(机工版·2018)同步课件:项目九 运用Div+css样式(共22张PPT)

日期:2025-09-23 科目: 类型:课件 查看:28次 大小:3214919B 来源:二一课件通
预览图 1/9
中职,22张,样式,Div+css,运用,项目
  • cover
(课件网) 项目九 运用Div+CSS样式 > 任务一 了解Div+CSS CSS CSS样式时层叠样式表的缩写,是一种用来表现HTML或XML等文件样式的计算机语言。网页设计最初是由许多的HTML标签来组成的,但是这些标签渐渐的不能满足所有网页的需求,CSS样式就这样诞生,它能弥补HTML的不足,使网页的创建和修改变得方便灵活。 CSS样式是对HTML语言的补充,是真正能做到表现与内容分离的一种样式设计语言,在网页中使用CSS样式,可以为网页上的元素添加许多特殊的效果和属性。 未使用CSS的网页 。 使用CSS的网页 。 内部样式表 在HTML网页内的CSS样式表叫做内部样式表,它们统一存放在网页的和标签之间,由标签结尾。内部样式表只能对该页面进行CSS样式的设置,不能跨页面执行,因此使用范围较小,在大型网站的开发中很少使用。 外部样式表 外部样式表是独立的一个页面,将CSS样式表代码集中存放在一个文档中,当HTML网页中需要使用相应的样式时,只需要调用即可。这种方式能够实现CSS样式的使用最大化,调用时代码写在和标签之间,如下:。 Div Div全称DIVision,它是一个标签,也是一个容器,专门用于存放网页中的元素,让这些元素能够进行布局设计。Div标签能够把一个网页分割成独立的、不同的部分,同一个Div标签中还能够嵌套Div标签,我们称作层次,所以Div我们也称它图层。 Div+CSS的优势 1.浏览器支持,使用Div+CSS布局的网页在不同的浏览器中显示的效果最为相近。 2.表现与结构分离,便于通过设计代码维护网页。 3.设计功能强大,能够对网页中的每一个元素精确控制。 4.继承性能好,代码的重复率低,利用率高。 盒子模型 自主练习 利用dreamweaver软件制作如下图所示的网页,使用Div布局方式。 【练习1】 利用dreamweaver软件制作如下图所示的网页,使用CSS样式设置页面。 【练习2】 任务二 Div+css的运用方法与技巧 选择器 标签 类 复合 全局 ID 选择器 标签 一个HTML文档中有许多标签,例如

等。如果文档中的所有

都要使用同一个CSS样式,这是就要用标签选择器。 ID ID选择器和类选择器相似,不同的是,ID选择器只能运用一次。在网页中,一个ID选择器只能把其CSS样式指定给一个标签。 类 使不同的CSS样式应用于相同的标签就应使用类选择器,编写时要与相应的Div标签配合使用。类选择器是网页中最常用的选择器。 。 选择器 全局 作用于网页中的所有元素。 复合 标签选择器、类选择器和ID选择器是可以组合起来使用的。一般的组合方式是标签选择器和类选择器组合,标签选择器和ID选择器组合。 。 自主练习 利用dreamweaver软件制作如下图所示的网页。 【练习1】 利用dreamweaver软件制作如下图所示的网页。 【练习2】 利用dreamweaver软件制作如下图所示的网页。 【练习3】 谢谢 ... ...

~~ 您好,已阅读到文档的结尾了 ~~