资源简介

(共22张PPT)
项目九 运用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】
谢谢

展开更多......

收起↑

资源预览