图像、CSS样式定义与应用、浮动窗体精要.ppt

图像、CSS样式定义与应用、浮动窗体 回顾 设置标题用哪个标签？ 段落的设置用哪个标签? 文本字体的设置用那个标签?列举出2个属性 滚动字符有那个标签来控制？默认的滚动方向是怎么样的？ 清单的分类 预习检查 本讲目标 理解在页面中如何插入图像 掌握CSS样式定义及应用 掌握HTML页面的浮动窗体 小结 在HTML中插入图片用什么标签？ 图片标签中的常用属性有那些? CSS CSS就是Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表，它是一种制作网页的新技术 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 BODY {color:blue;background:lavender;font-family:Arial;} UL {color:red } /STYLE HEAD BODY ULLI芒果LI桔子LI苹果/UL OLLI芒果LI桔子LI苹果 /OL /BODY /HTML 在HTML中引用样式表 Style元素 Style属性 Link元素 使用Style元素 STYLE元素应插入文档的HEAD元素部分中，所有规则都放置在开始标记和结束标记之间。显示页面时，只有嵌入了STYLE元素的文档会受到影响 使用Style属性－－内嵌样式表 style属性用于将样式表应用于单个元素。直接将在HTML标记里加入style参数，而style参数的内容就是CSS的属性和值。样式表可以只有一条规则。使用Style属性，可以绕过Style元素，而将声明直接放入单个的开始标记中。 使用Link元素－－链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用link标记链接到这个样式表文件，这个link标记必须放到页面的head区内 样式表属性 2-1 样式表属性 2-2 小结 CSS样式表有什么用途？ 页面引入样式表有几种方式? 小结 在HTML页面中引入浮动窗体用什么标签？什么属性？ 总结 在HTML页面中怎么引入图片？ 在HTML页面中显示图片时，如果这张图片不存在,想要它显示一个提示,要用到什么属性来设置? CSS样式的引入有那几种方式? 在HTML页面中设置画中画用什么标签? 主页面代码 Html Head Title 浮动窗口 /Title /Head Iframe src=iframe.html /iframe /Html 效果如图所示 设置浮动窗口区域的宽与高 Html Head Title 浮动窗口 /Title /Head Iframe src=iframe.html width=400 height=300 /iframe /Html 效果如图所示 设置浮动窗口区域边框 Html Head Title 浮动窗口 /Title /Head Iframe src= a.html width=250 height=200 frameborder=0 /iframe /Html 效果如图 控制图片显示的标签是什么？ CSS样式表的引入有几种方式？ 在网页中插入图像 HTML采用的图像格式有gif、jpg、png 3种 在网页中插入图像时，必须使用HTML的img标记 img src=图