学习情境5_CSS样式1.pptVIP

【温故知新】 知识回顾 多媒体在网页中的基本使用； 表单和表单元素的综合使用。 本课堂知识点 CSS样式表的基本知识和基本使用方法; CSS样式表的综合应用。 1.2.3 “CSS样式”面板中的按钮 面板底部共有7个按钮： 2.1　CSS样式类型的介绍 类型简介 【类(可应用于任何标签)】：类名称必须以“.”开头，这种方式定义的样式可以定义绝大多数的的HTML对象。 【标签】：重新定义HTML标识。 【高级】：设定链接文本的样式。 a:link——定义链接文字的样式。 a:visited——浏览者已经访问过的样式。 a:hover——鼠标悬浮时链接样式。 a:active——鼠标点击链接，但还没跳转时的样式。 课堂实例：综合练习1 1、创建【类(可应用于任何标签)】样式。 (1)定义标题样式。 (2)定义内容样式。 (3)应用样式。 (4)修改样式。 课堂实例：综合练习1 2、创建【标签】样式。 (1)重定义body标签。 (2)重定义table标签。 (3)重定义img标签。 (4)对比类样式。 实验任务1：CSS样式综合练习1 2.2 CSS样式表基本设置 2.2 CSS样式表基本设置 2.2 CSS样式表基本设置 2.2 CSS样式表基本设置 2.2 CSS样式表基本设置 2.2 CSS样式表基本设置 2.2 CSS样式表基本设置 2.2 CSS样式表基本设置 2.2 CSS样式表基本设置 　2.3 CSS样式类型【高级】 【高级】：设定链接文本的样式。 a:link——定义链接文字的样式。 a:visited——浏览者已经访问过的样式。 a:hover——鼠标悬浮时链接样式。 a:active——鼠标点击链接，但还没跳转时的样式。 课堂实例：综合练习2 2.4 CSS的规则管理 2.4 CSS的规则管理 说明： 样式表文件的扩展名为“.css”。 “链接”：只是读入样式表中的信息，而没有将信息导入到当前文档中。 “导入”：将外部CSS样式表中的信息导入到当前文档中。 在 “媒体”下拉列表中选择样式表的目标媒体。 单击“确定”按钮，在CSS样式面板的“全部”模式下，可以看到附加的外部CSS样式表文件。 2.5 CSS的语法规则 CSS的语法规则 　　CSS样式由两部分组成：选择器和声明。例如： H1 { Font-size: 16 pixels; Font-family: Helvetica; Font-weight: bold; } CSS术语中的cascading表示向同一个元素应用多种样式的能力。多个定义的样式向下“层叠”到Web页面上的元素，并最终创建用户想要的设计效果。 2.5 CSS的语法规则 2. 6 CSS样式表层叠 多重样式将层叠为一个样式表允许以多种方式规定样式信息。当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？ 浏览器缺省设置 外部样式表 内部样式表（位于 head 标签内部） 内联样式（在 HTML 元素内部） 因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：head 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。 2.6　CSS样式表层叠 外部样式表 2.6 CSS样式表层叠 内部样式表（位于 head 标签内部） 2.6　CSS样式表层叠 内联样式（在 HTML 元素内部） 2.6 CSS样式中滤镜的使用 2.6.1 Alpha 滤镜?? 功能：指定一个元素的透明度。 例如：设置滤镜 Alpha(Opacity=100, FinishOpacity=10, Style=2, StartX=100, StartY=75, FinishX=200, FinishY=150) 2.6 CSS样式中滤镜的使用 2.6.2 Blur 滤镜 功能：指定一个元素的模糊效果。 例如：设置滤镜 blur（add=true，direction=135，strength=10） 2.6 CSS样式中滤镜的使用 2.6.3 FlipH， FlipV 滤镜 功能：这两个滤镜可以分别将对象水平翻转和垂直翻转。 例如：设置滤镜 FilpH与FilpV 2.6 CSS样式中滤镜的使用 2.6.4 Glow 滤镜 功能：使对象的边缘产生类似发光的效果。 例如：设置滤镜glow（color=red，strength=10） 2.6 CSS样式中滤镜的使用 2.6.5 Gray ，Invert，Xray 滤镜 功能：Gray滤镜