DHTML2表格层与样式表

《DHTML2表格层与样式表》由会员分享，可在线阅读，更多相关《DHTML2表格层与样式表（36页珍藏版）》请在装配图网上搜索。

1、HandsOn表格、层与样式表表格、层与样式表HandsOn回顾回顾p什么是什么是Web服务器？服务器？Web服务器的作用？常见的服务器的作用？常见的Web服务器有哪些？服务器有哪些？p什么是什么是Browser？Browser的作用？常见的的作用？常见的Browser有哪些？有哪些？pBrowser如何与如何与Web Server通信？通信？pRequest与与Response的结构？的结构？p简述简述HTML页面的结构？页面的结构？p简述简述HTML中的几个重点中的几个重点meta标记？标记？p简述简述HTML中的转义字符？中的转义字符？HandsOn本讲内容本讲内容p表表(Table)p

2、层层(div)p样式表样式表HandsOn表格表格行行列列列标题在在 HTML 文档中，广泛使用表格来存放网页上的文本和图像文档中，广泛使用表格来存放网页上的文本和图像单元格单元格表格标题HandsOn与表相关的标记与表相关的标记 表标记表标记 行标记行标记 单元格标记单元格标记 标题标记标题标记 列标记列标记HandsOn使用表格 姓名 性别 分数 robert m 80 .创建表格创建表格 代表表格的开始，border=2表示边框尺寸为2表示行，这是表格的第一行，有三列数据，代表列 表格的第二行，有三列数据表格的第三行，也有三列数据HandsOn增加单元间隔和单元填充增加单元间隔和单元填充

3、pcellspacing 属性定义单元格之间的间距（以像素为单位）。cellpadding 属性定义表的单元格边界与单元格内容之间的间距 （以像素为单位） 。HandsOn单元格中数据的对齐方式单元格中数据的对齐方式nValign = topnValign = middlenValign = bottom数据单元格 1pAlign = leftpAlign = centerpAlign = rightHandsOn学员档案信息 姓名 性别 分数 robert m 80 .表格的标题表格的标题表示表格标题表示行或列标题，粗体显示 表格的第二行，有三列数据表格的第三行，有三列数据HandsOn 学

4、员档案信息 姓名 性别 分数 robert m 80 .表格的对齐方式表格的对齐方式整个表格居中姓名列默认左对齐 性别列居中 分数列右对齐 HandsOn合并单元格合并单元格(跨列跨列)创建表格 第一学期第二学期 数学 科学 英语 数学 科学 英语 98 95 80 95 87 88. COLSPAN=“n” 属性表示属性表示跨多少列跨多少列 HandsOn合并单元格合并单元格(跨行跨行)创建表格 螺母 螺栓 锤子 第一季度一月250010001240 二月300025004000 .ROWSPAN=“n” 属性表示属性表示跨多少行跨多少行 HandsOn 学员档案信息 姓名 性别 分数 ro

5、bert m 80 mary f 18 表格的背景色和尺寸设置表格的背景色和尺寸设置 表格的颜色设置：表格的背景色 行的背景色 列的背景色 颜色值可以采用 RGB（red/green/blue）红绿蓝十六进制值表示，如红色#FF0000, 或是一些预定义色彩名称：red ，blue，yellow等。表格的尺寸设置：例如：表示一个长为200像素，宽为100像素的表格。表示一个宽为窗口的20%，高为窗口的10%的表格。1880分分数数FM性性别别MaryRobert姓名姓名学员档案信息学员档案信息HandsOn层简介层简介p使用多个层，可以将一个层放到另一使用多个层，可以将一个层放到另一个层的上面

6、或下面。个层的上面或下面。pZ 顺序顺序决定元素的显示顺序。决定元素的显示顺序。p层层就像一个包含内容的框架，可以将就像一个包含内容的框架，可以将它放置在所需的位置。它放置在所需的位置。HandsOn使用层使用层 1.在在Web页中插入层时，可以使用两种标记进页中插入层时，可以使用两种标记进行设置：行设置：div，spanHandsOn使用层示例：使用层示例：图图3.11：示例：示例10的输出结果的输出结果将元素分组将元素分组 第一层第一层这是第一部分内的一个段落元素这是第一部分内的一个段落元素第一层的内容。第一层的内容。该部分之外该部分之外 第二部分第二部分这是第二部分内的一个段这是第二部分

7、内的一个段第一层的内容。第一层的内容。 HandsOn创建层创建层下面的代码下面的代码是一个使用是一个使用 标记的示例标记的示例:层 1 HandsOn样式表简介样式表简介p什么是样式表什么是样式表用于描述文档如何在屏幕上显示用于描述文档如何在屏幕上显示pW3C推荐的样式表标准包括推荐的样式表标准包括CSS和和XSLCSS主要用于主要用于HTMLXSL主要用于主要用于XMLpCSS是一种用来装饰是一种用来装饰HTML的标记集合，是的标记集合，是对对HTML标记的一种扩展，可以进一步美化标记的一种扩展，可以进一步美化HTML页面页面HandsOn样式表的作用样式表的作用p覆盖浏览器覆盖浏览器p页

8、面布局页面布局p可以重用可以重用p多个文档可以链接到一个样式表多个文档可以链接到一个样式表HandsOn样式表规则样式表规则p样式规则样式规则p样式表样式表p规则规则RuleSelector property:value;property: value; . 规则选择器规则选择器声明声明属性属性属性值属性值HandsOn样式表中的选择器样式表中的选择器p简单选择器简单选择器(仅描述元素，而不考虑该元素仅描述元素，而不考虑该元素在文档结构中的位置在文档结构中的位置)HTML选择器选择器-选择器是选择器是HTML标记的名称标记的名称类选择器类选择器使用使用HTML元素的元素的CLASS属性属性ID

9、选择器选择器使用使用HTML元素的元素的ID属性属性p上下文选择器上下文选择器(引用元素的上下文引用元素的上下文)HandsOnHTML选择器示例选择器示例pfont-style:italic; font-weight:bold; color:limegreen 这些选择器使用这些选择器使用html元素的名称唯一的区别是删除了尖元素的名称唯一的区别是删除了尖括号。括号。HandsOn类选择器示例类选择器示例.water color:blue .danger color:red 测试水测试水测试危险测试危险无样式无样式斜体斜体类选择器示例类选择器示例HandsOnID选择器示例选择器示例id选择

10、器选择器#control color:red这是火焰的颜色这是火焰的颜色本段没有应用样式本段没有应用样式ID选择器示例选择器示例HandsOn上下文选择器示例上下文选择器示例上下文选择器上下文选择器ul li color:#9933FFol li color:#FFCCFFA1上下文选择器示例上下文选择器示例HandsOn在在HTML中引用样式表中引用样式表pStyle元素元素pStyle属性属性pLink元素元素HandsOn使用使用Style元素元素pSTYLE元素应插入文档的元素应插入文档的元素部分中，元素部分中，所有规则都放置在开始标记和结束标记之间。显所有规则都放置在开始标记和结束标

11、记之间。显示页面时，只有嵌入了示页面时，只有嵌入了STYLE元素的文档会受到元素的文档会受到影响影响 h1 color:maroon; p color:hotpink; font-family:arial;HandsOn使用使用Style属性内嵌样式表属性内嵌样式表pstyle属性用于将样式表应用于单个元素。直接将在属性用于将样式表应用于单个元素。直接将在HTML标记里加入标记里加入style参数，而参数，而style参数的内容就是参数的内容就是CSS的属的属性和值。样式表可以只有一条规则。使用性和值。样式表可以只有一条规则。使用Style属性，可属性，可以绕过以绕过Style元素，而将声明直

12、接放入单个的开始标记中元素，而将声明直接放入单个的开始标记中。 设置属性设置属性本段应用了内嵌样式本段应用了内嵌样式本段以默认样式显示本段以默认样式显示。您能发现本行中的您能发现本行中的不同之处不同之处吗？吗？HandsOn使用使用Link元素链入外部样式表元素链入外部样式表p链入外部样式表是把样式表保存为一个链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用样式表文件，然后在页面中用标标记链接到这个样式表文件，这个记链接到这个样式表文件，这个标记必须放到页面的标记必须放到页面的区内区内 设置属性设置属性。HandsOnCSS框模型框模型pW3C组织就建议把所有网页上的对象都放在一个

13、组织就建议把所有网页上的对象都放在一个盒盒(box)中，设计师可以通过创建定义来控制这个中，设计师可以通过创建定义来控制这个盒的属性，这些对象包括段落、列表、标题、图盒的属性，这些对象包括段落、列表、标题、图片以及层。片以及层。p 盒模型主要定义四个区域：盒模型主要定义四个区域：内容内容(content)边框距边框距(padding)边界边界(border)边距边距(margin)。 margin，background-color，background-image， padding，content，border之间的层次、关系和之间的层次、关系和 相互相互影响。影响。 HandsOn框模型层次

14、框模型层次HandsOn样式表属性样式表属性 2-1类型类型CSS属性属性值值字体字体属性属性font-familyArial，serif，宋体宋体font-sizeSmall，medium，large或直接指定字体大小或直接指定字体大小font-stylenormal, italicfont-weightnormal, bold, lighter, 100, 200文本文本属性属性text-alignleft, right, center, justifytext-indent度量或度量或%text-decoration none, blink, underline, overline, l

15、ine-throughtext-transform none, capitalize, uppercase, lowercasevertical-alignBaseline, super, sub, top, text-top, middle-bottom, text-bottomword-spacing度量度量letter-spacing度量度量HandsOn样式表属性样式表属性 2-2类型类型CSS属性属性值值框框属属性性borderNone, solid, double, ridge, inset, outset, groove, dotted dashedborder-style同上同

16、上border-width度量度量，thick，medium，thinborder-color#RRGGBB，颜色名称，颜色名称margin-top度量或度量或%Margin-left度量或度量或%定位定位属性属性top度量度量width度量或度量或%height度量或度量或%left度量度量颜色颜色属性属性color#RRGGBB，颜色名称，颜色名称background-color #RRGGBB，颜色名称，颜色名称，transparentbackground-image urlbackground-repeatrepeat, repeat-x, repeat-y, no-repeatHandsOnTable常用样式常用样式 内容内容111111111111111111111111111111111111111111 内容内容HandsOn总结总结p表表p层层pCSSHandsOn作业作业p尝试制作出以下尝试制作出以下HTML页面页面要求字体的大小、颜色以及间距与图中相同；要求字体的大小、颜色以及间距与图中相同；所有图片和蓝色字体所有图片和蓝色字体 都是超链接都是超链接,当鼠标移动当鼠标移动 到超链接上时显示下划到超链接上时显示下划 线；线；如果使用的是如果使用的是table 方式实现，则尝试使方式实现，则尝试使 用用div+css方式实现，方式实现， 反之亦然。反之亦然。