【百家讲坛】网页设计基础 层叠样式模板与库 16.pptVIP

第十六章 层叠样式、模板与库 计算机信息中心 授课教师：邵熹雯 jsjsxw@ 本章内容 16.1层叠样式表（CSS）概述 16.2层叠样式表的创建与编辑 16.3 CSS样式表的应用 16.4模板的应用 16.5库的应用 16.6本章小结 层叠样式表（CSS）概述 样式是预先定义好的、格式化网页文档的工具。 （Cascading Style Sheets） 是一种网页元素定义规则，是一种可以对网页文档内容进行精确格式化控制的工具。 利用CSS样式可自动格式化网页文档 包含了CSS样式和格式的说明 以单独文件存储在本地站点下。 直接存储在网页文档。 CSS样式被修改后，使用这个CSS样式的网页文档的格式也都将自动更新。 【CSS样式】面板 选择【窗口】|【CSS样式】命令，或 Shift+F11，或单击【属性】面板的【CSS】按钮，打开样式面板。 创建CSS样式和CSS样式表 CSS样式列表的三种保存方式 仅作用于当前网页文档的CSS样式，则与网页文件一起保存。 存放在某个已建好的外部CSS样式表文件中。应先附加该样式表文件，然后将新建的CSS样式存放其中。 存放在一个新建的CSS样式表文件中。应先新建该样式表文件，然后将新建的CSS样式存放其中。 选中【类（可应用于任何标签）】单选项后，可在【名称】下拉列表框中输入样式的名称，该名称必须以“.”开始，确认后便可以创建一个应用于文本范围和选择区域的Class属性的样式。 选中【标签（重新定义定义特定标签的外观）】单选项后，则可在【标签】下拉列表框中输入一个HTML标记，或从下拉列表框中选择一个标记，这样便可以重新定义定制的HTML标记的格式 选中【高级(ID、伪类选择器等)】单选项后，则可为特殊的标签组合或含有特定ID属性的标签定义样式。在【选择器】文本框中输入一个选择器的标签，或从【选择器】下拉列表中选择一个标签 教材例16.1 外部样式表链接、导入和编辑 外部样式表 多个网页文档与同一个样式列表文件建立链接，可以对多个网页文档的进行批量修改的操作。 导入和链接外部样式表 打开【链接外部样式表】对话框 在【文件/URL】文本框中输入要链接或导入的样式表文件的路径和名称 在【添加为】选项组中，可选择用那种方法调用外部CSS样式表。 编辑外部样式表 单击【CSS样式】面板的【全部】按钮 在【所有规则】窗口中，展开CSS样式表 选中要编辑的CSS样式 在【.char1的属性】窗口中，选择要修改的颜色属性 选中样式 ，单击右键，在快捷菜单中选择【编辑】选项，在对话框中，修改该样式的各项参数 保存CSS样式文件 当某个CSS样式中的属性被修改后，在网页编辑窗口中会打开该CSS样式表的文件 选择【文件】|【保存】命令，保存修改CSS样式后的CSS样式表文件。 若要对CSS样式进行复制、删除和重命名操作，可在【所有规则】窗口中，展开CSS样式表，并选中要编辑的CSS样式，单击右键，在快捷菜单中选择。 滤镜的概述 打开【CSS样式定义】对话框，在【分类】列表中选择【扩展】类别，在【过滤器】下拉式列表中便可对选中的滤镜设置参数 透明度滤镜（Alpha）的应用 通过具体的数值来指定网页中对象点、线、面的透明度 Alpha滤镜的语法是： {filter:Alpha（Opacity=？,FinishOpacity=？,Style=？,StartX=？, StartY=？, FinishX=？, FinishY=？)） Alpha滤镜的参数意义如下。 Opacity表示滤镜作用后对象的不透明度，其值为100时表示对象完全不透明；其值为0时表示对象完全透明。 FinishOpacity与Opacity同时使用：如果要制作出渐变的效果，就可以使用该参数来指定结束时的不透明度，其数值范围是0到100。 Style：指定渐变区域的形状特征。它的值为0表示无渐变；值为1表示直线渐变；值为2表示圆形渐变；值为3表示矩形渐变。 StartX、StartY、FinishX、FinishY：渐变开始和结束的坐标值。 教材例16.2 本例是要创建2个网页，并创建CSS样式和CSS样式表文件。在第一个网页中将新建的CSS样式作用于文字和图像，保存CSS样式表文件。在第二个网页中附加CSS样式表文件，并修改和保存其中的CSS样式，并作用于第二个网页中的文字和图像。浏览第一个网页可以发现网页元素的样式已经变为修改后的样式。 显示滤镜（RevealTrans）的应用 可以利用混合(blend)和显示(reveal)两种滤镜在页面上添加动人的淡入淡出、网页转换效果，前者可以使页面中的对象逐渐消失或显示，后者提供24种网页转换效果。 其语法意义如下： {filter:blendTrans(duration=时间数值)} {fil