div css 网页布局.ppt

项目三 用DIV+CSS网页布局 教学重点 1、掌握CSS的定义与引用 2、掌握常用的CSS属性 3、能够利用DIV+CSS进行网页布局 教学要求 1、掌握在HTML文档中加入CSS样式 2、掌握常用的CSS属性 3、掌握CSS框模型与定位技术 4、能够编写DIV+CSS布局的网页 教学内容 CSS是Cascading Style Sheets（层叠样式表单）的简称。CSS可以完成以下工作： （1）弥补HTML对网页格式化功能的不足，如段落间距、行距等。 （2）设置字体变化和大小。 （3）设置页面格式的动态更新。 （4）进行排版定位。 1. CSS的定义与引用 2.常用的CSS属性 2）CSS 定位机制 定位（position）是CSS排版中非常重要的概念。通过使用 position 属性，我们可以选择4中不同类型的定位，这会影响元素框生成的方式。 position 属性值的含义： static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。元素保持在应该在的位置上， 默认值。 relative：元素框偏移某个距离。即元素的相对定位。 absolute：元素框从文档流完全删除，并相对于其包含块定位。即元素的绝对定位。 fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。 CSS有三种基本的定位机制：普通流、浮动和绝对定位。 【例3-2】使用具有一栏超链接的浮动来创建水平菜单，效果如下图所示。（源文件：char3\3-2.html） * * 3.1 层叠样式表CSS （1）CSS样式规则的定义 CSS由一系列的样式规则构成的。 CSS样式规则的定义格式为： 选择器{属性1：属性值1；属性2：属性值2；…} 说明： 选择器用于指定样式所作用的对象。选择器可以是HTML标记符，也可以是一个类名。大括号中的部分用于定义具体样式的规则，它由若干组属性名与相应的属性值构成，各组间用分号分隔，属性名与对应的属性值间用冒号分隔。 例如，若要定义H1的字体为黑体，字体大小为20pt，颜色为红色，则该种样式的定义方法为： H1{font-family:黑体;font-size:20pt;color:red} 1）CSS选择器分组 可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。 例如，在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。 h1,h2,h3,h4,h5,h6 { color: green; } 2）派生选择器 派生选择器允许根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。 例如，我们希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器： li strong { font-style: italic; font-weight: normal; } 3）id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 # 来定义。 下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色： #red {color:red;}#green {color:green;} 下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。 p id=red这个段落是红色。/pp id=green这个段落是绿色。/p 4）类选择器 在 CSS 中，类选择器以一个点号显示。例如： .center {text-align: center} 在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。 在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 .center 选择器中的规则。 h1 class=centerThis heading will be center-aligned/h1p class=centerThis paragraph will also be center-aligned./p 5）伪类选择器 CSS 伪类用于向某些选择器添加特殊的效果。 语法： selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用。 selector.class : pseudo-class {property: value} 最常用的伪类是锚伪类。在支持 CSS 的浏览器中，链接的不同