DHTML2-表格层与样式表.ppt

表格、层与样式表,回顾,什么是Web服务器？Web服务器的作用？常见的Web服务器有哪些？ 什么是Browser？Browser的作用？常见的Browser有哪些？ Browser如何与Web Server通信？ Request与Response的结构？ 简述HTML页面的结构？ 简述HTML中的几个重点meta标记？ 简述HTML中的转义字符？,本讲内容,表(Table) 层(div) 样式表,表格,行,列,列标题,在 HTML 文档中，广泛使用表格来存放网页上的文本和图像,单元格,与表相关的标记, 使用表格 姓名 性别 分数 robert m 80 . ,创建表格,代表表格的开始，border=2表示边框尺寸为2,表示行，这是表格的第一行，有三列数据，代表列,表格的第二行，有三列数据,表格的第三行，也有三列数据,增加单元间隔和单元填充,cellspacing 属性定义单元格之间的间距（以像素为单位）。cellpadding 属性定义表的单元格边界与单元格内容之间的间距 （以像素为单位） 。 ,单元格中数据的对齐方式,Align = left Align = center Align = right, 学员档案信息 姓名 性别 分数 robert m 80 . ,表格的标题,表示表格标题,表示行或列标题，粗体显示,表格的第二行，有三列数据,表格的第三行，有三列数据, 学员档案信息 姓名 性别 分数 robert m 80 . ,表格的对齐方式,整个表格居中,姓名列默认左对齐,性别列居中,分数列右对齐,合并单元格(跨列), 创建表格 第一学期 第二学期 数学 科学 英语 数学 科学 英语 98 95 80 95 87 88 ,COLSPAN=“n” 属性表示跨多少列,合并单元格(跨行), 创建表格 螺母 螺栓 锤子 第一季度 一月 2500 1000 1240 二月 3000 2500 4000 .,ROWSPAN=“n” 属性表示跨多少行, 学员档案信息 姓名 性别 分数 robert m 80 mary f 18 ,表格的背景色和尺寸设置,表格的颜色设置： 表格的背景色 行的背景色 列的背景色 颜色值可以采用 RGB（red/green/blue）红绿蓝十六进制值表示，如红色#FF0000, 或是一些预定义色彩名称：red ，blue，yellow等。,表格的尺寸设置： 例如： 表示一个长为200像素，宽为100像素的表格。 表示一个宽为窗口的20%，高为窗口的10%的表格。,层简介,使用多个层，可以将一个层放到另一个层的上面或下面。 Z 顺序决定元素的显示顺序。 层就像一个包含内容的框架，可以将它放置在所需的位置。,使用层,在Web页中插入层时，可以使用两种标记进行设置：div，span,使用层示例：, 图3.11：示例10的输出结果 将元素分组 第一层 这是第一部分内的一个段落元素 第一层的内容。 该部分之外 第二部分 这是第二部分内的一个段 第一层的内容。 ,创建层,下面的代码是一个使用 标记的示例: 层 1 ,样式表简介,什么是样式表 用于描述文档如何在屏幕上显示 W3C推荐的样式表标准包括CSS和XSL CSS主要用于HTML XSL主要用于XML CSS是一种用来装饰HTML的标记集合，是对HTML标记的一种扩展，可以进一步美化HTML页面,样式表的作用,覆盖浏览器 页面布局 可以重用 多个文档可以链接到一个样式表,样式表规则,样式规则 样式表 规则,样式表中的选择器,简单选择器(仅描述元素，而不考虑该元素在文档结构中的位置) HTML选择器-选择器是HTML标记的名称 类选择器使用HTML元素的CLASS属性 ID选择器使用HTML元素的ID属性 上下文选择器(引用元素的上下文),HTML选择器示例, pfont-style:italic; font-weight:bold; color:limegreen 这些选择器使用html元素的名称唯一的区别是删除了尖括号。 ,类选择器示例, .water color:blue .danger color:red 测试水 测试危险 无样式 斜体 ,类选择器示例,ID选择器示例, id选择器 #control color:red 这是火焰的颜色 本段没有应用样式 ,ID选择器示例,上下文选择器示例, 上下文选择器 ul li color:#9933FF ol li color:#FFCCFF A 1 ,上下文选择器示例,在HTML中引用样式表,Style元素 Style属性 Link元素,使用Style元素,STYLE元素应插入文档的元素部分中，所有规则都放置在开始标记和结束标记之间。显示页面时，只有嵌入了STYLE元素的文档会受到影响, h1 color:maroon; p color:hotpink; font-family:arial; ,使用Style属性内嵌样式表,style属性用于将样式表应用于单个元素。直接将在HTML标记里加入style参数，而style参数的内容就是CSS的属性和值。样式表可以只有一条规则。使用Style属性，可以绕过Style元素，而将声明直接放入单个的开始标记中。, 设置属性 本段应用了内嵌样式 本段以默认样式显示。 您能发现本行中的 不同之处吗？ ,使用Link元素链入外部样式表,链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用标记链接到这个样式表文件，这个标记必须放到页面的区内, 设置属性 。 ,CSS框模型,W3C组织就建议把所有网页上的对象都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对象包括段落、列表、标题、图片以及层。 盒模型主要定义四个区域： 内容(content) 边框距(padding) 边界(border) 边距(margin)。 margin，background-color，background-image， padding，content，border之间的层次、关系和 相互影响。,框模型层次,样式表属性 2-1,样式表属性 2-2,Table常用样式, 内容11111111111111111111111111111111111111