第三章DIV+CSS布局基础.pptVIP

1.定义样式 通常定义样式有4种方法： （1）、内联定义样式：内联定义样式是混合在HTML标记里使用的样式，即使用标记的Style属性定义的适用于该标记的样式，例如： TD style=“background-color:green;font-size:12px; line-height:20px;”样式实例/TD 就是定义表格的单元格背景为绿色，单元格字体大小为12px，行距为20px。 4. 样式的使用 （2）、定义内部样式块对象：定义内部样式快就是针对页面中某些公共元素的样式比较类似，如果使用内联定义方法逐个元素地定义比较繁琐，而且维护麻烦，此时就可以在网页的html和body标记之间插入一个style…/style块对象来统一定义，页面运行时会自动引用。例如： head style type=“text/css” body {color:#333333;background-image:url(“image/bg.gif”)} /style /head （3）、导入外部样式表：导入外部样式表是指在HTML文件头部的style…/style标记之间，利用CSS的@import声明引入外部样式表。例如： head style type=text/css !--@import stylefile/style2.css;-- h2 {color:green} /style 注意：导入外部样式表必须在样式表的开始部分，即在其他内部样式表上面。 （4）、链入外部样式表：链入外部样式表是指在HTML文件的头信息标记head…/head之间，利用link标记连接到外部样式表文件。例如： head runat=server link href=stylefile/style1.css rel=stylesheet type=text/css / /head 一个外部样式表文件可以应用于多个页面。当你改变这个样式表文件时，所有页面的样式都随之而改变。在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑。 2.样式的优先级 依照后定义的优先原则，所以优先级最高的是内嵌样式，内部样式表高于导入外部样式表，链入的外部样式表和内部样式表之间是最后定义的优先级高。 5.实例：简单的竖型菜单 本实例讲解如何制作一个简单的竖型菜单。本例子中的菜单选项在静态时是褐色，当鼠标滑过菜单选项时文字会放大变色，并且显示灰色底色。 title简单的竖型菜单/title style type=text/css ul li{ font-size:20px; color:maroon;} ul li a{ text-decoration:none;} #bold{ font-weight:bold;} ul li a:hover{ font-size:24px; color:#009; background:#cfcfcf;} /style /head body ul lia href=# id=bold首页/a/li lia href=#公司简介/a/li lia href=#作品展示/a/li lia href=#关于我们/a/li lia href=#联系我们/a/li li上海理工大学/li /ul /body 3.3 DIV+CSS布局基础 在对CSS技术的基础知识有了一定的掌握后就可以开始学习DIV+CSS的布局的方法。DIV+CSS的布局方法简单来说就是使用div标签作为容器，使用CSS技术来排布div标签的布局方法。常用的CSS布局方式有浮动、定位等。本节内容包括： 了解DIV+CSS布局的流程 学习盒模型以及盒模型的基本元素 学习页面元素的布局方式 1. DIV+CSS布局的流程 使用DIV+CSS的布局方法制作标准的XHTML页面的一般流程如下： 首先确定网页的布局结构。 根据结构，设定好XHTML文档中用于排版的div 标签。 使用css样式排布div标签。 重复上述步骤细分div标签内的内容。 2. 了解盒模型 盒模型是DIV+CSS布局的基础，要实现DIV+CSS布局必须了解盒模型的原理。在页面上的每个元素都能看做一个容器，这个容器就是一个盒子。例如，p标签是一个能装文字的容器，它的高度就是所承载文