网页基础项目九-运用Div+css样式ppt课件

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,项目九 运用,Div+CSS,样式,项目九 运用Div+CSS样式,任务一 了解,Div+CSS,任务一 了解Div+CSS,CSS,CSS样式时层叠样式表的缩写，是一种用来表现HTML或XML等文件样式的计算机语言。网页设计最初是由许多的HTML标签来组成的，但是这些标签渐渐的不能满足所有网页的需求，CSS样式就这样诞生，它能弥补HTML的不足，使网页的创建和修改变得方便灵活。,CSS样式是对HTML语言的补充，是真正能做到表现与内容分离的一种样式设计语言，在网页中使用CSS样式，可以为网页上的元素添加许多特殊的效果和属性,。,CSS CSS样式时层叠样式表的缩写，是一种用,未使用,CSS,的网页,。,未使用CSS的网页。,使用,CSS,的网页,。,使用CSS的网页。,内部样式表,在HTML网页内的CSS样式表叫做内部样式表，它们统一存放在网页的和标签之间，由标签开始，标签结尾。内部样式表只能对该页面进行CSS样式的设置，不能跨页面执行，因此使用范围较小，在大型网站的开发中很少使用。,内部样式表 在HTML网页内的CSS样式表叫做,外部样式表,外部样式表是独立的一个页面，将CSS样式表代码集中存放在一个文档中，当HTML网页中需要使用相应的样式时，只需要调用即可。这种方式能够实现CSS样式的使用最大化，调用时代码写在和标签之间，如下：。,外部样式表 外部样式表是独立的一个页面，将CS,Div,Div全称DIVision，它是一个标签，也是一个容器，专门用于存放网页中的元素，让这些元素能够进行布局设计。Div标签能够把一个网页分割成独立的、不同的部分，同一个Div标签中还能够嵌套Div标签，我们称作层次，所以Div我们也称它图层。,Div Div全称DIVision，它是一个,Div+CSS,的优势,1浏览器支持，使用Div+CSS布局的网页在不同的浏览器中显示的效果最为相近。,2表现与结构分离，便于通过设计代码维护网页。,3设计功能强大，能够对网页中的每一个元素精确控制。,4继承性能好，代码的重复率低，利用率高。,Div+CSS的优势1浏览器支持，使用Div+CSS布局的,盒子模型,盒子模型,自主练习,自主练习,利用dreamweaver软件制作如下图所示的网页，使用Div布局方式。,【,练习,1】,利用dreamweaver软件制作如下图所示的网页，使用Di,12,利用dreamweaver软件制作如下图所示的网页，使用,CSS,样式设置页面,。,【,练习,2】,利用dreamweaver软件制作如下图所示的网页，使用CS,13,任务二,Div+css,的运用方法与,技巧,任务二 Div+css的运用方法与技巧,选择器,标签,类,复合,全局,ID,选择器标签类复合全局ID,选择器,标签,一个HTML文档中有许多标签，例如，等。如果文档中的所有都要使用同一个CSS样式，这是就要用标签选择器。,ID,ID选择器和类选择器相似，不同的是，ID选择器只能运用一次。在网页中，一个ID选择器只能把其CSS样式指定给一个标签。,类,使不同的CSS样式应用于相同的标签就应使用类选择器，编写时要与相应的Div标签配合使用。类选择器是网页中最常用的选择器。,。,选择器标签一个HTML文档中有许多标签，例如，tab,选择器,全局,作用于网页中的所有元素。,复合,标签选择器、类选择器和ID选择器是可以组合起来使用的。一般的组合方式是标签选择器和类选择器组合，标签选择器和ID选择器组合。,。,选择器全局作用于网页中的所有元素。复合标签选择器、类选择器和,自主练习,自主练习,利用,dreamweaver,软件制作如下图所示的网页。,【,练习,1】,利用dreamweaver软件制作如下图所示的网页。【练习1,19,利用,dreamweaver,软件制作如下图所示的网页。,【,练习,2】,利用dreamweaver软件制作如下图所示的网页。【练习2,20,利用,dreamweaver,软件制作如下图所示的网页。,【,练习,3】,利用dreamweaver软件制作如下图所示的网页。【练习3,21,谢谢,谢谢,