第七章层叠样式表.pptVIP

* * 层叠样式表 第七章 Version 1.0 * 回顾 框架将 Web 浏览器的窗口分为几个单独的区域，每个区域可以显示独立的可滚动页面。 有框架的 HTML 文档有一个 HEAD 和一个 FRAMESET 部分。 FRAMESET 部分指定主用户代理窗口中的视图布局。 BODY 元素和 FRAMESET 元素不能同时使用 。 在网页中创建链接时，可以将框架设置为链接目标。 如果浏览器不支持框架，则可以使用 NOFRAMES 元素指定要使用的替代内容。 IFRAME 元素用于定义行内框架或浮动框架。　 描述 DHTML的功能 创建、使用样式表 * 目标 DHTML 的功能 　　 动态样式 　使用样式表，可以指定页面内容的颜色、样式或大小。用户的动作发生变化时，网页的样式也变化 * 动态内容 　可以通过响应用户输入或单击鼠标这样的事件来修改页面上的内容 脚本 　可以编写脚本修改网页的样式和内容，这些脚本嵌入到网页中，显示页面时，浏览器就会解释该脚本 可下载字体 　该功能允许在网页中插入选择的字体，可以将字体与页面打包 定位 　可以指定元素的精确位置 　 样式表简介 概念与功能 样式表：包含HTML元素样式定义的列表。 样式规则：定义元素内文本的样式。例如，可以创建一个样式规则，指定所有 H1 标题均显示为蓝色。 * HTML HEAD TITLE应用样式/TITLE STYLE TYPE=text/css !-- 　H1 {color:blue;} -- /STYLE /HEAD BODY 　H1这是应用了样式的标题 1/H1 /BODY /HTML 样式表 样式规则 属性 CSS 名称 说明 颜色 color 设置或检索文本的颜色 背景属性 background-color 设置或检索对象的背景颜色 background-image 设置或检索背景图像 字体属性 font-family 设置或检索要应用于文本字体 font-size 设置或检索文本字体的大小 font-style 设置或检索文本的字体样式。如： 斜体 文本属性 text-align 设置或检索文本的对齐方式，包括：右对齐、左对齐、居中对齐或两端对齐 text-indent 设置或检索文本第一行的缩进 vertical-align 设置或检索文本的纵向位置 * 在样式表中设置属性2-1 属性 CSS 名称 说明 边框属性 border-style 设置或检索对象的边框样式 border-width 设置或检索边框的宽度 border-bottom 设置或检索下边框的属性 border-color 设置或检索边框颜色 定位属性 width 设置或检索对象宽度 height 设置或检索对象的高度 left 设置或检索对象的左定位 top 设置或检索对象的顶部定位 position 设置或检索对象的定位形式 z-index 设置或检索对象的叠层顺序 * 在样式表中设置属性2-2 * HTML HEAD STYLE TYPE=text/css !-- 　H1 {color:limegreen;} 　H1 {font-family:Arial;} 　H2 {color:limegreen;} 　H2 {font-family:Arial;} -- /STYLE /HEAD BODY 　H1这是 H1 元素/H1 　H2这是 H2 元素/H2 　H3这是 H3 元素，其默认样式如浏览器所示/H3 /BODY /HTML 样式表 3-1 在每个样式规则之后应加上分号 * HTML HEAD STYLE TYPE=text/css !-- H1, H2{color:limegreen;font-family:Arial;} -- /STYLE /HEAD BODY H1这是 H1 元素/H1 H2这是 H2 元素/H2 H3此处，H1和H2的样式声明组合在单个语句中/H3 /BODY /HTML 样式表 3-2 * HTML HEAD TITLE设置属性/TITLE STYLE TYPE=text/css !-- BODY { background-image: url(holiday.gif); } P { text-align: center; font-size:50px; color:blue; } -- /STYLE /HEAD BODY P学习样式表/P /BODY /HTML 样式表 3-3 * HTML HEAD STYLE TYPE=text/css !-- 　P{font-style:italic; font-weight:bold; color:limegreen;} -- /