第9章使用CSS样式表课件.ppt

1、第第9 9章章 CSSCSS样式表样式表本章学习要点：本章学习要点：创建创建CSS样式样式 设置设置CSS样式属性样式属性 应用应用CSS样式样式 CSS的全称为的全称为Cascading Style Sheet，层叠样式表。它是一组显示，层叠样式表。它是一组显示规则的集合，其中每一条规则都规定规则的集合，其中每一条规则都规定了适用的对象以及应用到该对象的显了适用的对象以及应用到该对象的显示方案。示方案。9.1 创建创建CSS样式样式 显示显示CSS样式面板样式面板 执行执行“窗口窗口|CSS样式样式”命令或按命令或按shift+F11键即可打开键即可打开“CSS样式样式”面板。面板。创建方法

2、创建方法 单击单击“CSS样式表样式表”面板右下角的面板右下角的“新建新建CSS样式样式”按钮，打开按钮，打开“新建新建CSS规则规则”对话框，在其中设置层叠样式的类对话框，在其中设置层叠样式的类型及保存的样式即可。型及保存的样式即可。9.2 设置设置CSS样式属性样式属性 样式表是通过其属性来编辑样式样式表是通过其属性来编辑样式的。在的。在CSS规则定义对话框中可定义规则定义对话框中可定义的的CSS规则很多，主要有规则很多，主要有8种类型。种类型。类型类型 用来定义字体、大小、粗细、斜体、行高用来定义字体、大小、粗细、斜体、行高和颜色等设置。该设置主要针对网页中的文字和颜色等设置。该设置主要

3、针对网页中的文字有效。有效。背景背景 用来定义背景设置。它可以对网页中用来定义背景设置。它可以对网页中的任何元素应用背景属性，还可以设置背的任何元素应用背景属性，还可以设置背景图像的位置。景图像的位置。区块区块 用来定义文字的排列格式，是对文本用来定义文字的排列格式，是对文本段落控制的补充。段落控制的补充。方框方框 用来控制元素在页面上的放置方式以及用来控制元素在页面上的放置方式以及属性定义。属性定义。边框边框 用来用来定义元素周围边框的设置，如边定义元素周围边框的设置，如边框宽度、颜色和样式。框宽度、颜色和样式。列表列表 用来为列表标签定义列表设置用来为列表标签定义列表设置(如项目如项目符号

4、外观、自定义图像和位置符号外观、自定义图像和位置)。定位定位 主要针对层元素，也可以将页面中已有主要针对层元素，也可以将页面中已有的对象转变为层元素的内容的对象转变为层元素的内容 扩展扩展 用于用于设置设置CSS样式的打印、滤镜及鼠标样式的打印、滤镜及鼠标指针格式。指针格式。9.3 应用应用CSS样式样式 当创建好当创建好CSS样式后，标签样式后，标签CSS样式样式和伪类和伪类CSS样式会自动应用到相应的样式会自动应用到相应的HTML标签和伪类上，但类标签和伪类上，但类CSS则需要手则需要手动将其应用到网页元素上。动将其应用到网页元素上。使用快捷菜单应用使用快捷菜单应用CSS样式样式 方法：方

5、法：选中要应用样式的网页元素后，选中要应用样式的网页元素后，单击鼠标右键，在弹出的快捷菜单的单击鼠标右键，在弹出的快捷菜单的“CSS样式样式”选项中选择要应用的样式即可。选项中选择要应用的样式即可。使用使用“CSS样式样式”面板应用面板应用CSS样样式式 方法：方法：选中要应用样式的网页元素后，选中要应用样式的网页元素后，在在“CSS样式样式”面板的面板的CSS样式名称上单样式名称上单击鼠标右键，在弹出的快捷菜单中选择击鼠标右键，在弹出的快捷菜单中选择“套用套用”命令即可。命令即可。使用使用“属性属性”面板应用面板应用CSS样式样式 方法：方法：选中要应用样式的网页元素后，选中要应用样式的网页

6、元素后，在在“属性属性”面板的面板的“样式样式”下拉列表框中下拉列表框中选择需要的选择需要的CSS样式即可。样式即可。链接外部链接外部CSS样式样式 在网页中要使用外部在网页中要使用外部CSS样式文件，样式文件，可以通过链接将已经建好的可以通过链接将已经建好的CSS样式表文样式表文件链接到当前页面中。件链接到当前页面中。方法：方法：选中要应用样式的网页元素后，选中要应用样式的网页元素后，在在“CSS样式样式”面板中，单击附加样式表面板中，单击附加样式表按钮，弹出按钮，弹出“链接外部样式表链接外部样式表”对话框。对话框。说明：说明：将两个或多个将两个或多个CSS样式应用于同样式应用于同一网页元素

7、时，这些样式可能会发生冲突，一网页元素时，这些样式可能会发生冲突，浏览器将按以下规则显示：浏览器将按以下规则显示：如果应用于同一网页元素的两个样如果应用于同一网页元素的两个样式发生冲突，则浏览器显示最里面的规则，式发生冲突，则浏览器显示最里面的规则，即离元素本身最近的规则。即离元素本身最近的规则。如果外部样式和内部样式同时影响如果外部样式和内部样式同时影响元素时，则应用内部样式表。元素时，则应用内部样式表。如果有直接冲突，则自定义如果有直接冲突，则自定义CSS规规则中的属性将覆盖则中的属性将覆盖HTML标签样式中的属性。标签样式中的属性。9.4 编辑编辑CSS样式样式 修改修改CSS样式表样式

8、表方法：方法：在在CSS规则定义对话框中进行修改。规则定义对话框中进行修改。直接在直接在“CSS样式样式”面板中单击编面板中单击编辑按钮进行修改。辑按钮进行修改。删除删除CSS样式样式方法：方法：在要删除的在要删除的CSS样式上单击鼠标右样式上单击鼠标右键，在弹出的快捷菜单中选择键，在弹出的快捷菜单中选择“删除删除”命命令。令。在在“CSS样式样式”面板中单击删除按面板中单击删除按钮。钮。9.5 综合实例综合实例 实例实例9-1 设置文字样式设置文字样式 实例实例9-2 制作图像翻转效果制作图像翻转效果 实例实例9-3 制作超链接样式制作超链接样式 举例：举例：设置超级链接样式设置超级链接样式 a:link：设置在正常情况下超链接的设置在正常情况下超链接的显示格式显示格式 a:visited：设置浏览过的超链接的设置浏览过的超链接的显示格式显示格式 a:hover：设置当鼠标移到超链接上设置当鼠标移到超链接上时的显示格式时的显示格式 a:active：设置在超链接上单击时设置在超链接上单击时的显示形式的显示形式