第9章 使用CSS样式表.pptVIP

第9章 CSS样式表 本章学习要点： 创建CSS样式 设置CSS样式属性 应用CSS样式 9.1 创建CSS样式 9.2 设置CSS样式属性 9.3 应用CSS样式 9.4 编辑CSS样式 9.5 综合实例 * * CSS的全称为Cascading Style Sheet，层叠样式表。它是一组显示规则的集合，其中每一条规则都规定了适用的对象以及应用到该对象的显示方案。 ★ 显示CSS样式面板 执行“窗口|CSS样式”命令或按shift+F11键即可打开“CSS样式”面板。 ★ 创建方法 单击“CSS样式表”面板右下角的“新建CSS样式”按钮，打开“新建CSS规则”对话框，在其中设置层叠样式的类型及保存的样式即可。 样式表是通过其属性来编辑样式的。在CSS规则定义对话框中可定义的CSS规则很多，主要有8种类型。 ★ 类型 用来定义字体、大小、粗细、斜体、行高和颜色等设置。该设置主要针对网页中的文字有效。 ★ 背景 用来定义背景设置。它可以对网页中的任何元素应用背景属性，还可以设置背景图像的位置。 ★ 区块 用来定义文字的排列格式，是对文本段落控制的补充。 ★ 方框 用来控制元素在页面上的放置方式以及属性定义。 ★ 边框 用来定义元素周围边框的设置，如边框宽度、颜色和样式。 ★ 列表 用来为列表标签定义列表设置(如项目符号外观、自定义图像和位置)。 ★ 定位 主要针对层元素，也可以将页面中已有的对象转变为层元素的内容 ★ 扩展 用于设置CSS样式的打印、滤镜及鼠标指针格式。 当创建好CSS样式后，标签CSS样式和伪类CSS样式会自动应用到相应的HTML标签和伪类上，但类CSS则需要手动将其应用到网页元素上。 ★ 使用快捷菜单应用CSS样式 方法：选中要应用样式的网页元素后，单击鼠标右键，在弹出的快捷菜单的“CSS样式”选项中选择要应用的样式即可。 ★ 使用“CSS样式”面板应用CSS样式 方法：选中要应用样式的网页元素后，在“CSS样式”面板的CSS样式名称上单击鼠标右键，在弹出的快捷菜单中选择“套用”命令即可。 ★ 使用“属性”面板应用CSS样式 方法：选中要应用样式的网页元素后，在“属性”面板的“样式”下拉列表框中选择需要的CSS样式即可。 ★ 链接外部CSS样式 在网页中要使用外部CSS样式文件，可以通过链接将已经建好的CSS样式表文件链接到当前页面中。 方法：选中要应用样式的网页元素后，在“CSS样式”面板中，单击附加样式表按钮，弹出“链接外部样式表”对话框。 说明：将两个或多个CSS样式应用于同一网页元素时，这些样式可能会发生冲突，浏览器将按以下规则显示： ①如果应用于同一网页元素的两个样式发生冲突，则浏览器显示最里面的规则，即离元素本身最近的规则。 ②如果外部样式和内部样式同时影响元素时，则应用内部样式表。 ③如果有直接冲突，则自定义CSS规则中的属性将覆盖HTML标签样式中的属性。 ★ 修改CSS样式表 方法： ①在CSS规则定义对话框中进行修改。 ②直接在“CSS样式”面板中单击编辑按钮进行修改。 ★ 删除CSS样式 方法： ①在要删除的CSS样式上单击鼠标右键，在弹出的快捷菜单中选择“删除”命令。 ②在“CSS样式”面板中单击删除按钮。 ★ 实例9-1 设置文字样式 ★ 实例9-2 制作图像翻转效果 ★ 实例9-3 制作超链接样式 *