图像、CSS样式定义与应用、浮动窗体

1、图像、图像、CSSCSS样式定义与样式定义与应用、应用、浮动窗体浮动窗体回顾回顾n设置标题用哪个标签？设置标题用哪个标签？n段落的设置用哪个标签段落的设置用哪个标签? ?n文本字体的设置用那个标签文本字体的设置用那个标签? ?列举出列举出2 2个属个属性性n滚动字符有那个标签来控制？默认的滚动滚动字符有那个标签来控制？默认的滚动方向是怎么样的？方向是怎么样的？n清单的分类清单的分类预习检查预习检查控制图片显示的标签是什么？控制图片显示的标签是什么？CSS样式表的引入有几种方式？样式表的引入有几种方式？本讲目标本讲目标n理解在页面中如何插入图像理解在页面中如何插入图像n掌握掌握CSSCSS样式定

2、义及应用样式定义及应用n掌握掌握HTMLHTML页面的浮动窗体页面的浮动窗体在网页中插入图像在网页中插入图像 HTML采用的图像格式有采用的图像格式有gif、jpg、png 3种种 在网页中插入图像时，必须使用在网页中插入图像时，必须使用HTML的的标记标记 这个图形文件可以是本地机上的图形，也可以是位于远程主机上的图形 2设置图像布局设置图像布局 q“width=# 、height=# ”属性。此属性用来设定图属性。此属性用来设定图片大小，此宽度及高度一般采用像素作单位片大小，此宽度及高度一般采用像素作单位 通常只设为图片的真实大小，以免失真，若需要改图片大小最好使用图像编辑工具 图片边框厚

3、度图片边框厚度“border=# ” 属性用来设定图片边框属性用来设定图片边框厚度厚度 align=# 属性属性此属性用来调整图片旁边文字的位置，你可以控此属性用来调整图片旁边文字的位置，你可以控制文字出现在图片的偏上方、中间、底部、制文字出现在图片的偏上方、中间、底部、 左右左右等，可选值：等，可选值：top, middle, bottom, left, right，内，内定为定为bottom q qq定风波定风波-苏轼苏轼qq莫听穿林打叶声，何妨吟啸且徐行。竹杖芒鞋轻胜马，谁怕？一莫听穿林打叶声，何妨吟啸且徐行。竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。料峭春风吹酒醒，微冷，山头斜照却相迎。回

4、首蓑烟雨任平生。料峭春风吹酒醒，微冷，山头斜照却相迎。回首向来萧瑟处，归去，也无风雨也无晴。向来萧瑟处，归去，也无风雨也无晴。qq alt=属性属性 此属性是用以描述该图形的文字，若用户使用文字浏此属性是用以描述该图形的文字，若用户使用文字浏览器，由于不支持图片，这些文字会代替图片而被显示。览器，由于不支持图片，这些文字会代替图片而被显示。若在支持图片显示的浏览器，当鼠标移至图片上该些文字若在支持图片显示的浏览器，当鼠标移至图片上该些文字亦会显示亦会显示 小结小结q在在HTML中插入图片用什么标签？中插入图片用什么标签？q图片标签中的常用属性有那些图片标签中的常用属性有那些?CSSqCSS就是

5、就是Cascading Style Sheets，中文翻译，中文翻译为为“层叠样式表层叠样式表”，简称样式表，它是一，简称样式表，它是一种制作网页的新技术种制作网页的新技术qCSS是一种用来装饰是一种用来装饰HTML的标记集合，的标记集合，是对是对HTML标记的一种扩展，可以进一步标记的一种扩展，可以进一步美化美化HTML页面页面 样式表的作用样式表的作用q覆盖浏览器覆盖浏览器q页面布局页面布局q可以重用可以重用q多个文档可以链接到一个样式表多个文档可以链接到一个样式表样式表规则样式表规则q样式规则样式规则q样式表样式表q规则规则RuleSelector property:value;prop

6、erty: value; . 规则选择器规则选择器声明声明属性属性属性值属性值样式表中的选择器样式表中的选择器q简单选择器简单选择器(仅描述元素，而不考虑该元素仅描述元素，而不考虑该元素在文档结构中的位置在文档结构中的位置)qHTML选择器选择器-选择器是选择器是HTML标记的名称标记的名称q类选择器类选择器使用使用HTML元素的元素的CLASS属性属性qID选择器选择器使用使用HTML元素的元素的ID属性属性q上下文选择器上下文选择器(引用元素的上下文引用元素的上下文)HTML选择器示例选择器示例Pfont-style:italic; font-weight:bold; color:lime

7、green 这些选择器使用这些选择器使用HTML元素的名称唯一的区别是删除了尖括元素的名称唯一的区别是删除了尖括号。号。HTML选择器示例选择器示例类选择器示例类选择器示例.water color:blue .danger color:red 测试水测试水测试危险测试危险无样式无样式斜体斜体类选择器示例类选择器示例ID选择器示例选择器示例ID选择器选择器#control color:red这是火焰的颜色这是火焰的颜色本段没有应用样式本段没有应用样式ID选择器示例选择器示例上下文选择器示例上下文选择器示例上下文选择器上下文选择器 BODY color:blue;background:lavend

8、er;font-family:Arial; UL color:red 芒果芒果桔子桔子苹果苹果芒果芒果桔子桔子苹果苹果 上下文选择器示例上下文选择器示例在在HTML中引用样式表中引用样式表qStyle元素元素qStyle属性属性qLink元素元素使用使用Style元素元素qSTYLE元素应插入文档的元素应插入文档的元素部元素部分中，所有规则都放置在开始标记和结束分中，所有规则都放置在开始标记和结束标记之间。显示页面时，只有嵌入了标记之间。显示页面时，只有嵌入了STYLE元素的文档会受到影响元素的文档会受到影响 H1 color:maroon; P color:hotpink; font-fam

9、ily:Arial; import sheet1.css 导入外部样式表导入外部样式表使用使用Style属性内嵌样式表属性内嵌样式表q style属性用于将样式表应用于单个元素。直接将在属性用于将样式表应用于单个元素。直接将在HTML标记里加入标记里加入style参数，而参数，而style参数的内容就是参数的内容就是CSS的属性的属性和值。样式表可以只有一条规则。使用和值。样式表可以只有一条规则。使用Style属性，可以绕属性，可以绕过过Style元素，而将声明直接放入单个的开始标记中。元素，而将声明直接放入单个的开始标记中。 设置属性设置属性本段应用了内嵌样式本段应用了内嵌样式本段以默认样式

10、显示。本段以默认样式显示。您能发现本行中的您能发现本行中的不同之处不同之处吗？吗？使用使用Link元素链入外部样式表元素链入外部样式表链入外部样式表是把样式表保存为一个样式表链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用文件，然后在页面中用标记链接到这个标记链接到这个样式表文件，这个样式表文件，这个标记必须放到页面的标记必须放到页面的区内区内 设置属性设置属性。样式表属性样式表属性 2-1类型类型CSS属性属性值值字体字体属性属性font-familyArial，serif，宋体宋体font-sizeSmall，medium，large或直接指定字体大小或直接指定字体大小font

11、-stylenormal, italicfont-weightnormal, bold, lighter, 100, 200文本文本属性属性text-alignleft, right, center, justifytext-indent度量或度量或%text-decoration none, blink, underline, overline, line-throughtext-transformnone, capitalize, uppercase, lowercasevertical-alignBaseline, super, sub, top, text-top, middle-bo

12、ttom, text-bottomword-spacing度量度量letter-spacing度量度量样式表属性样式表属性 2-2类型类型CSS属性属性值值框框属属性性borderNone, solid, double, ridge, inset, outset, groove, dotted dashedborder-style同上同上border-width度量，度量，thick，medium，thinborder-color#RRGGBB，颜色名称，颜色名称margin-top度量或度量或%Margin-left度量或度量或%定位定位属性属性top度量度量width度量或度量或%heig

13、ht度量或度量或%left度量度量颜色颜色属性属性color#RRGGBB，颜色名称，颜色名称background-color#RRGGBB，颜色名称，颜色名称，transparentbackground-image urlbackground-repeat repeat, repeat-x, repeat-y, no-repeat小结小结qCSS样式表有什么用途？样式表有什么用途？q页面引入样式表有几种方式页面引入样式表有几种方式?浮动窗口浮动窗口 q Iframe标记，又叫浮动帧标记，你可以用它将一个标记，又叫浮动帧标记，你可以用它将一个HTML文档嵌入在一个文档嵌入在一个HTML中显示中

14、显示 如同如同“画中画画中画“电视电视 Iframe标记的使用标记的使用 文件的路径，既可是HTML文件，也可以是文本、ASP、JSP等 画中画区域的宽与高 是否出现滚动条区域边框的宽度 另外，在中还可以添加name=#属性，属性后面的文字将出现在不支持FRAMES的浏览器中 浮动窗口实例浮动窗口实例q我们先创建一个文件名叫我们先创建一个文件名叫iframe.html文件，文件，其代码如下：其代码如下： 登鹳雀楼登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。效果如图所示 主页面代码主页面代码浮动窗口 效果如图所示 设置浮动窗口区域的宽与高设置浮动窗口区域的宽与高浮动窗口 效果如图所示 设置浮动窗口区域边框设置浮动窗口区域边框浮动窗口 效果如图 小结小结