网页设计与制作章节 6.pptxVIP

6.1  CSS样式表概述 6.1.1  样式表的基本操作 6.1.2  定义样式表选项 6.1.3  使用样式 6.2  创建新样式 6.2.1  为调用脚本创建的CSS 规则 6.2.2  定义指定范围内的标签 规则 6.2.3  同时定义多个标签 6.2.4  定义单个元素样式属性 6.3  内部CSS样式表的应用 6.3.1  使文字尺寸保持不变 6.3.2  设置网页行间距 第 6 章 多媒体计算机硬件 6.3.3  制作图像边框效果 6.3.4  控制鼠标样式 6.3.5  修改文字链接的样式 6.3.6  锁定背景不跟随内容滚动 6.3.7  定义项目符号和编号 6.3.8  CSS滤镜的应用 6.4  外部CSS样式表的应用 6.4.1  建立文字段落的CSS样式 6.4.2  建立表格的CSS样式 6.4.3  建立超链接的CSS样式 6.4.4  建立特殊段落的CSS样式 6.4.5  在网页中应用外部CSS 6.5  习题和上机操作 ◆ CSS样式表简介 ◆ 创建CSS样式表 ◆ 内部CSS样式表的应用 ◆ 外部CSS样式表的创建及应用 ◆ 使用和编辑自定义CSS样式表 教学进程 本章要点： 概述 利用CSS样式可以对网页中的文本、图像、页面背景、表单元素外观等实现更加精确的控制，甚至浏览器滚动条等浏览器的一些属性都可以通过它来调整。 教学进程 1 CSS真正实现了网页内容和格式定义的分离，通过修改CSS样式表文件就可以修改整个站点文件的风格。 6.1 CSS样式表概述 6.1.1 样式表的基本操作 教学进程 执行【窗口】|【CSS 样式】命令，打开【CSS 样式】面板，或在面板组上单击“CSS”或者相应的折叠箭头，展开【CSS样式】面板 ● 方法 6.1 CSS样式表概述 当选中一个规则后执行【CSS样式】面板右下方的【编辑样式】命令，打开编辑选中规则的对话框 单击【CSS样式】面板右上方的属性按钮，在弹出的菜单中选择【编辑】命令，也可以启动编辑当前所选规则的对话框 教学进程 在【CSS样式】面板上，选择【新建CSS规则】按钮，会打开【新建CSS规则】对话框。 ● 方法 6.1.2 定义样式表选项 6.1 CSS样式表概述 选择其中一个正方形的热点，在【属性】面板中修改各参数。 在【链接】文本框中输入链接地址“”， 在【目标】选项的下拉列表中选择“_blank”， 在【替换】文本框中输入“链接到洪恩在线!”。 ● 举例 教学进程 在【CSS样式】面板上，选择【新建CSS规则】按钮，会打开【新建CSS规则】对话框。 ● 方法 6.1.2 定义样式表选项 6.1 CSS样式表概述 教学进程 【新建样式表文件】：此选项将会把你设定的样式最终保存在一个外部单独的样式表文件中，这个样式表文件可以被其他文件共同使用，也就是说你可以使站点内的所有页面文件使用同一个样式表文件，甚至不同的站点只要是网页就可以使用。 【定义在】选项 ● 各选项含义 6.1.2 定义样式表选项 6.1 CSS样式表概述 【仅对该文档】：此选项将会把你设定的规则仅仅放在当前文件的头文件中，这些规则只能在此文件中使用。 教学进程 【类（可应用于任何标签）】：选择此类型后，需要在上方的【名称】文本框中填入一个规则名字，需要注意的是，此类名称必须以“.”开头。这种方式定义的样式可以用来定义绝大多数的HTML对象，这样可以使这些对象有统一的外观。 【选择器类型】选项 ● 各选项含义 6.1.2 定义样式表选项 6.1 CSS样式表概述 【标签（重新定义特定标签的外观）】：选择此选项后从上方的【标签】下拉框里选择需要重新定义的HTML标识。这个选项将使得文件中具有统一标签的所有内容使用相同的外观。 【高级（ID伪类选择器等）】：这个选项的功能是可以设定链接文本的样式。 6.1.3 使用样式 教学进程 在【属性】面板选择样式 打开【属性】面板，单击打开【样式】右边的下拉列表框，里面列出了我们已经定义的一些CSS规则。 1 需要指出的是，这里列出的只是部分已定义的规则。使用样式列表指定规则时，必须先选定你将要应用此规则的内容，然后在样式列表框中选择需要的规则，即可将规则应用于选定内容 6.1.3 使用样式 教学进程 利用【标签选择器】选择样式 2 首先需要在【标签选择器】上选定一个标签，如＜span.＞标签，然后在＜span.＞标签上右击，在弹出的快捷菜单中选择【设置类】|【wenziduanluo】，则可以快速把定义的【wenziduanluo】样式类指