《DHTML2-表格层与样式表.ppt》由会员分享，可在线阅读，更多相关《DHTML2-表格层与样式表.ppt（36页珍藏版）》请在三一办公上搜索。
1、表格、层与样式表,回顾,什么是Web服务器？Web服务器的作用？常见的Web服务器有哪些？什么是Browser？Browser的作用？常见的Browser有哪些？Browser如何与Web Server通信？Request与Response的结构？简述HTML页面的结构？简述HTML中的几个重点meta标记？简述HTML中的转义字符？,本讲内容,表(Table)层(div)样式表,表格,行,列,列标题,在 HTML 文档中，广泛使用表格来存放网页上的文本和图像,单元格,与表相关的标记,使用表格 姓名 性别 分数 robert m 80.,创建表格,代表表格的开始，border=2表示边框尺寸为
2、2,表示行，这是表格的第一行，有三列数据，代表列,表格的第二行，有三列数据,表格的第三行，也有三列数据,增加单元间隔和单元填充,cellspacing 属性定义单元格之间的间距（以像素为单位）。cellpadding 属性定义表的单元格边界与单元格内容之间的间距（以像素为单位）。,单元格中数据的对齐方式,Align=leftAlign=centerAlign=right,学员档案信息 姓名 性别 分数 robert m 80.,表格的标题,表示表格标题,表示行或列标题，粗体显示,表格的第二行，有三列数据,表格的第三行，有三列数据,学员档案信息 姓名 性别 分数 robert m 80.,表格的
3、对齐方式,整个表格居中,姓名列默认左对齐,性别列居中,分数列右对齐,合并单元格(跨列),创建表格 第一学期第二学期 数学 科学 英语 数学 科学 英语 98 95 80 95 87 88.,COLSPAN=“n”属性表示跨多少列,合并单元格(跨行),创建表格 螺母 螺栓 锤子 第一季度一月250010001240 二月300025004000.,ROWSPAN=“n”属性表示跨多少行,学员档案信息 姓名 性别 分数 robert m 80 mary f 18,表格的背景色和尺寸设置,表格的颜色设置：表格的背景色 行的背景色 列的背景色 颜色值可以采用 RGB（red/green/blue）红绿
4、蓝十六进制值表示，如红色#FF0000,或是一些预定义色彩名称：red，blue，yellow等。,表格的尺寸设置：例如：表示一个长为200像素，宽为100像素的表格。表示一个宽为窗口的20%，高为窗口的10%的表格。,层简介,使用多个层，可以将一个层放到另一个层的上面或下面。Z 顺序决定元素的显示顺序。层就像一个包含内容的框架，可以将它放置在所需的位置。,使用层,在Web页中插入层时，可以使用两种标记进行设置：div，span,使用层示例：,图3.11：示例10的输出结果将元素分组 第一层这是第一部分内的一个段落元素第一层的内容。该部分之外 第二部分这是第二部分内的一个段第一层的内容。,创建
5、层,下面的代码是一个使用 标记的示例:层 1,样式表简介,什么是样式表用于描述文档如何在屏幕上显示W3C推荐的样式表标准包括CSS和XSLCSS主要用于HTMLXSL主要用于XMLCSS是一种用来装饰HTML的标记集合，是对HTML标记的一种扩展，可以进一步美化HTML页面,样式表的作用,覆盖浏览器页面布局可以重用多个文档可以链接到一个样式表,样式表规则,样式规则样式表规则,样式表中的选择器,简单选择器(仅描述元素，而不考虑该元素在文档结构中的位置)HTML选择器-选择器是HTML标记的名称类选择器使用HTML元素的CLASS属性ID选择器使用HTML元素的ID属性上下文选择器(引用元素的上下
6、文),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:#9933FFol li color:#FFCCFFA1,上下文选择器示例,在HTML中引用样式表,Style元素Styl
7、e属性Link元素,使用Style元素,STYLE元素应插入文档的元素部分中，所有规则都放置在开始标记和结束标记之间。显示页面时，只有嵌入了STYLE元素的文档会受到影响,h1color:maroon;pcolor:hotpink;font-family:arial;,使用Style属性内嵌样式表,style属性用于将样式表应用于单个元素。直接将在HTML标记里加入style参数，而style参数的内容就是CSS的属性和值。样式表可以只有一条规则。使用Style属性，可以绕过Style元素，而将声明直接放入单个的开始标记中。,设置属性本段应用了内嵌样式本段以默认样式显示。您能发现本行中的不同之
8、处吗？,使用Link元素链入外部样式表,链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用标记链接到这个样式表文件，这个标记必须放到页面的区内,设置属性。,CSS框模型,W3C组织就建议把所有网页上的对象都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对象包括段落、列表、标题、图片以及层。盒模型主要定义四个区域：内容(content)边框距(padding)边界(border)边距(margin)。margin，background-color，background-image，padding，content，border之间的层次、关系和 相互影响。,框模型层次,样式表属性 2-1,样式表属性 2-2,Table常用样式,内容,总结,表层CSS,作业,尝试制作出以下HTML页面要求字体的大小、颜色以及间距与图中相同；所有图片和蓝色字体 都是超链接,当鼠标移动 到超链接上时显示下划 线；如果使用的是table 方式实现，则尝试使 用div+css方式实现，反之亦然。,
