图像、CSS样式定义与应用、浮动窗体_第1页
图像、CSS样式定义与应用、浮动窗体_第2页
图像、CSS样式定义与应用、浮动窗体_第3页
图像、CSS样式定义与应用、浮动窗体_第4页
图像、CSS样式定义与应用、浮动窗体_第5页
已阅读5页，还剩28页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

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

<imgsrc="图形文件地址"><Body> <imgsrc="liwupu.jpg"></Body>

这个图形文件可以是本地机上的图形，也可以是位于远程主机上的图形2．设置图像布局“width=#、height=#”属性。此属性用来设定图片大小，此宽度及高度一般采用像素作单位<Body><imgsrc="liwupu.jpg"width=120height=160></Body>通常只设为图片的真实大小，以免失真，若需要改图片大小最好使用图像编辑工具图片边框厚度“border=#”属性用来设定图片边框厚度<Body><imgsrc="liwupu.jpg"border="5"></Body>

align=#属性 此属性用来调整图片旁边文字的位置，你可以控制文字出现在图片的偏上方、中间、底部、左右等，可选值：top,middle,bottom,left,right，内定为bottom<Body><imgsrc="bamboo.JPG"align="left"width="100"height="150"hspace="20"><h3align="center">定风波-苏轼</h3><p>莫听穿林打叶声，何妨吟啸且徐行。竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。料峭春风吹酒醒，微冷，山头斜照却相迎。回首向来萧瑟处，归去，也无风雨也无晴。</p></Body>

alt=""属性

此属性是用以描述该图形的文字，若用户使用文字浏览器，由于不支持图片，这些文字会代替图片而被显示。若在支持图片显示的浏览器，当鼠标移至图片上该些文字亦会显示

<Body> <imgsrc="bamboo.JPG"alt="岁寒三友--竹"></Body>

小结在HTML中插入图片用什么标签？图片标签中的常用属性有那些?CSSCSS就是CascadingStyleSheets，中文翻译为“层叠样式表”，简称样式表，它是一种制作网页的新技术CSS是一种用来装饰HTML的标记集合，是对HTML标记的一种扩展，可以进一步美化HTML页面样式表的作用覆盖浏览器页面布局可以重用多个文档可以链接到一个样式表样式表规则样式规则样式表规则RuleSelector

{property:value;property:value;...}规则选择器声明属性属性值样式表中的选择器简单选择器(仅描述元素，而不考虑该元素在文档结构中的位置)HTML选择器--选择器是HTML标记的名称类选择器—使用HTML元素的CLASS属性ID选择器—使用HTML元素的ID属性上下文选择器(引用元素的上下文)HTML选择器示例<HTML><HEAD><STYLETYPE="text/css">

P{font-style:italic;font-weight:bold;color:limegreen}

</STYLE></HEAD><Body> <P>这些选择器使用HTML元素的名称唯一的区别是删除了尖括号。</P> </BODY></HTML>HTML选择器示例类选择器示例<HTML> <HEAD> <STYLETYPE="text/css">

.water{color:blue} .danger{color:red} </STYLE> </HEAD> <BODY> <Pclass=water>测试水</P> <Pclass=danger>测试危险</P> <P>无样式</P> <BR> <EMclass=danger>斜体</EM> </BODY></HTML>类选择器示例ID选择器示例<HTML> <HEAD> <TITLE>ID选择器</TITLE> <STYLETYPE="text/css"> #control{color:red} </STYLE> </HEAD> <BODY> <Pid="control">这是火焰的颜色</P> <BR> <P>本段没有应用样式</P> </BODY></HTML>ID选择器示例上下文选择器示例<HTML> <HEAD> <TITLE>上下文选择器</TITLE> <STYLETYPE="text/css"> BODY {color:blue;background:lavender;font-family:Arial;} UL{color:red} </STYLE> <HEAD> <BODY>

<UL><LI>芒果<LI>桔子<LI>苹果</UL> <OL><LI>芒果<LI>桔子<LI>苹果 </OL> </BODY></HTML>上下文选择器示例在HTML中引用样式表Style元素Style属性Link元素使用Style元素STYLE元素应插入文档的<HEAD>元素部分中，所有规则都放置在开始标记和结束标记之间。显示页面时，只有嵌入了STYLE元素的文档会受到影响<STYLETYPE="text/css">H1 {color:maroon;} P {color:hotpink;font-family:Arial;}</STYLE><STYLETYPE="text/css">@import'sheet1.css'

</STYLE>导入外部样式表使用Style属性－－内嵌样式表style属性用于将样式表应用于单个元素。直接将在HTML标记里加入style参数，而style参数的内容就是CSS的属性和值。样式表可以只有一条规则。使用Style属性，可以绕过Style元素，而将声明直接放入单个的开始标记中。<HTML> <HEAD><TITLE>设置属性</TITLE></HEAD><BODY><Pstyle="color:aqua;font-Style:italic;">本段应用了内嵌样式<BR><P>本段以默认样式显示。<BR><P>您能发现本行中的<SPANstyle="color:red">不同之处</SPAN>吗？</BODY></HTML>使用Link元素－－链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用<link>标记链接到这个样式表文件，这个<link>标记必须放到页面的<head>区内<HTML> <HEAD><TITLE>设置属性</TITLE><LINKREL=stylesheetHREF="stylesmine.css“Type="text/css"></HEAD><BODY>。。。。。。。。。。。。。。。。。。。。</BODY></HTML>样式表属性2-1样式表属性2-2小结CSS样式表有什么用途？页面引入样式表有几种方式?浮动窗口Iframe标记，又叫浮动帧标记，你可以用它将一个HTML文档嵌入在一个HTML中显示如同“画中画“电视

Iframe标记的使用<Iframesrc="URL"width="x"height="x"scrolling="[OPTION]"frameborder="x"></iframe>

文件的路径，既可是HTML文件，也可以是文本、ASP、JSP等

"画中画"区域的宽与高是否出现滚动条区域边框的宽度

另外，在<iframe>中还可以添加name=#属性，属性后面的文字将出现在不支持FRAMES的浏览器中浮动窗口实例我们先创建一个文件名叫iframe.html文件，其代码如下：<html> <head> <Title>

登鹳雀楼

</Title> </head> <bodybgcolor="pink"> <h3align="center">

登鹳雀楼

</h3> <Palign="center">白日依山尽，黄河入海流。

<br>欲穷千里目，更上一层楼。

</P> </body></html>效果如图所示主页面代码<Html><Head><Title>

浮动窗口</Title></Head><Iframesrc="iframe.html"></iframe></Html>效果如图所示设置浮动窗口区域的宽与高<Html><Head><Title>

浮动窗口</Title></Head><Iframesrc="iframe.html"width="400"height=300></iframe></Html>效果如图所示

设置浮动窗口区域边框<Html><Head><Title>

浮动窗口</Title></Head><Iframesr

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论