dhtml2-表格过层与样式表.ppt

表格、层与样式表 回顾 什么是Web服务器？Web服务器的作用？常见的Web服务器有哪些？ 什么是Browser？Browser的作用？常见的Browser有哪些？ Browser如何与Web Server通信？ Request与Response的结构？ 简述HTML页面的结构？ 简述HTML中的几个重点meta标记？ 简述HTML中的转义字符？ 本讲内容 表(Table) 层(div) 样式表 表格 与表相关的标记 创建表格 增加单元间隔和单元填充 cellspacing 属性定义单元格之间的间距（以像素为单位）。cellpadding 属性定义表的单元格边界与单元格内容之间的间距 （以像素为单位） 。 ·table border = 2 cellspacing = 2 cellpadding = 6 单元格中数据的对齐方式 Align = left Align = center Align = right 表格的标题 表格的对齐方式 合并单元格(跨列) 合并单元格(跨行) 表格的背景色和尺寸设置 层简介 使用多个层，可以将一个层放到另一个层的上面或下面。 Z 顺序决定元素的显示顺序。 层就像一个包含内容的框架，可以将它放置在所需的位置。 使用层 使用层示例： 创建层 下面的代码是一个使用 DIV 标记的示例: div top = 25 id=layer1 pfont color = limegreen size = 4b层 1 /b /font/p /div 样式表简介 什么是样式表 用于描述文档如何在屏幕上显示 W3C推荐的样式表标准包括CSS和XSL CSS主要用于HTML XSL主要用于XML CSS是一种用来装饰HTML的标记集合，是对HTML标记的一种扩展，可以进一步美化HTML页面 样式表的作用 覆盖浏览器 页面布局 可以重用 多个文档可以链接到一个样式表 样式表规则 样式规则 样式表 规则 样式表中的选择器 简单选择器(仅描述元素，而不考虑该元素在文档结构中的位置) HTML选择器--选择器是HTML标记的名称 类选择器—使用HTML元素的CLASS属性 ID选择器—使用HTML元素的ID属性 上下文选择器(引用元素的上下文) HTML选择器示例 html head style type=text/css p{font-style:italic; font-weight:bold; color:limegreen} /style /head body p这些选择器使用html元素的名称唯一的区别是删除了尖括号。/p /body /html 类选择器示例 ID选择器示例 html head titleid选择器/title style type=text/css #control {color:red} /style /head body p id=control这是火焰的颜色/p br p本段没有应用样式/p /body /html 上下文选择器示例 html head title上下文选择器/title style type=text/css ul li { color:#9933FF} ol li { color:#FFCCFF} /style head body ul liA/li/ul ol li1/li/ol /body /html 在HTML中引用样式表 Style元素 Style属性 Link元素 使用Style元素 STYLE元素应插入文档的HEAD元素部分中，所有规则都放置在开始标记和结束标记之间。显示页面时，只有嵌入了STYLE元素的文档会受到影响 使用Style属性－－内嵌样式表 style属性用于将样式表应用于单个元素。直接将在HTML标记里加入style参数，而style参数的内容就是CSS的属性和值。样式表可以只有一条规则。使用Style属性，可以绕过Style元素，而将声明直接放入单个的开始标记中。 使用Link元素－－链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用link标记链接到这个样式表文件，这个link标记必须放到页面的head区内 CSS框模型 W3C组织就建议把所有网页上的对象都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对象包括段落、列表、标题、图片以及层。 盒模型主要定义四个区域： 内容(content) 边框距(padding) 边界(border) 边距(margin)。 margin，background-color，background-image， padding，content，bor