工信版（中职）网页设计与制作项目九 运用Div+css样式电子课件.pptx

YCF（中职）网页设计与制作项目九 运用Div+css样式电子课件=项目九 运用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样式，这是就要用标签选择器。IDID选择器和类选择器相似，不同的是，ID选择器只能运用一次。在网页中，一个ID选择器只能把其CSS样式指定给一个标签。类使不同的CSS样式应用于相同的标签就应使用类选择器，编写时要与相应的Div标签配合使用。类选择器是网页中最常用的选择器。=选择器全局作用于网页中的所有元素。复合标签选择器、类选择器和ID选择器是可以组合起来使用的。一般的组合方式是标签选择器和类选择器组合，标签选择器和ID选择器组合。=自主练习利用dreamweaver 软件制作如下图所示的网页。【练习1】利用dreamweaver 软件制作如下图所示的网页。【练习2】利用dreamweaver 软件制作如下图所示的网页。【练习3】=谢谢