第9章使用CSS样式表课件

第9章CSS样式表本章学习要点：创建CSS样式设置CSS样式属性应用CSS样式第9章CSS样式表本章学习要点：1CSS的全称为CascadingStyleSheet，层叠样式表。它是一组显示规则的集合，其中每一条规则都规定了适用的对象以及应用到该对象的显示方案。CSS的全称为CascadingStyleShee29.1创建CSS样式★显示CSS样式面板执行“窗口|CSS样式”命令或按shift+F11键即可打开“CSS样式”面板。★创建方法单击“CSS样式表”面板右下角的“新建CSS样式”按钮，打开“新建CSS规则”对话框，在其中设置层叠样式的类型及保存的样式即可。9.1创建CSS样式★显示CSS样式面板执行“39.2设置CSS样式属性样式表是通过其属性来编辑样式的。在CSS规则定义对话框中可定义的CSS规则很多，主要有8种类型。★类型

用来定义字体、大小、粗细、斜体、行高和颜色等设置。该设置主要针对网页中的文字有效。9.2设置CSS样式属性样式表是通过其属性来编辑样4★背景用来定义背景设置。它可以对网页中的任何元素应用背景属性，还可以设置背景图像的位置。★区块用来定义文字的排列格式，是对文本段落控制的补充。★方框用来控制元素在页面上的放置方式以及属性定义。★背景用来定义背景设置。它可以对网页中的任何元素应5★边框用来定义元素周围边框的设置，如边框宽度、颜色和样式。★列表用来为列表标签定义列表设置(如项目符号外观、自定义图像和位置)。★边框用来定义元素周围边框的设置，如边框宽度、颜色6★定位主要针对层元素，也可以将页面中已有的对象转变为层元素的内容

★扩展

用于设置CSS样式的打印、滤镜及鼠标指针格式。

★定位主要针对层元素，也可以将页面中已有的对象转变79.3应用CSS样式当创建好CSS样式后，标签CSS样式和伪类CSS样式会自动应用到相应的HTML标签和伪类上，但类CSS则需要手动将其应用到网页元素上。★使用快捷菜单应用CSS样式

方法：选中要应用样式的网页元素后，单击鼠标右键，在弹出的快捷菜单的“CSS样式”选项中选择要应用的样式即可。9.3应用CSS样式当创建好CSS样式后，标签C8★使用“CSS样式”面板应用CSS样式

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

方法：选中要应用样式的网页元素后，在“属性”面板的“样式”下拉列表框中选择需要的CSS样式即可。★使用“CSS样式”面板应用CSS样式方法：选中9★链接外部CSS样式在网页中要使用外部CSS样式文件，可以通过链接将已经建好的CSS样式表文件链接到当前页面中。

方法：选中要应用样式的网页元素后，在“CSS样式”面板中，单击附加样式表按钮，弹出“链接外部样式表”对话框。★链接外部CSS样式在网页中要使用外部CSS样式10

说明：将两个或多个CSS样式应用于同一网页元素时，这些样式可能会发生冲突，浏览器将按以下规则显示：

①如果应用于同一网页元素的两个样式发生冲突，则浏览器显示最里面的规则，即离元素本身最近的规则。

②如果外部样式和内部样式同时影响元素时，则应用内部样式表。

③如果有直接冲突，则自定义CSS规则中的属性将覆盖HTML标签样式中的属性。说明：将两个或多个CSS样式应用于同一网页元素时，这119.4编辑CSS样式★修改CSS样式表方法：

①在CSS规则定义对话框中进行修改。②直接在“CSS样式”面板中单击编辑按钮进行修改。9.4编辑CSS样式★修改CSS样式表方法：12★删除CSS样式方法：

①在要删除的CSS样式上单击鼠标右键，在弹出的快捷菜单中选择“删除”命令。

②在“CSS样式”面板中单击删除按钮。★删除CSS样式方法：139.5综合实例★实例9-1设置文字样式★实例9-2制作图像翻转效果★实例9-3制作超链接样式9.5综合实例★实例9-1设置文字样式★实例9-214

举例：设置超级链接样式

a:link：设置在正常情况下超链接的显示格式

a:visited：设置浏览过的超链接的显示格式

a:hover：设置当鼠标移到超链接上时的显示格式

a:active：设置在超链接上单击时的显示形式举例：设置超级链接样式15第9章CSS样式表本章学习要点：创建CSS样式设置CSS样式属性应用CSS样式第9章CSS样式表本章学习要点：16CSS的全称为CascadingStyleSheet，层叠样式表。它是一组显示规则的集合，其中每一条规则都规定了适用的对象以及应用到该对象的显示方案。CSS的全称为CascadingStyleShee179.1创建CSS样式★显示CSS样式面板执行“窗口|CSS样式”命令或按shift+F11键即可打开“CSS样式”面板。★创建方法单击“CSS样式表”面板右下角的“新建CSS样式”按钮，打开“新建CSS规则”对话框，在其中设置层叠样式的类型及保存的样式即可。9.1创建CSS样式★显示CSS样式面板执行“189.2设置CSS样式属性样式表是通过其属性来编辑样式的。在CSS规则定义对话框中可定义的CSS规则很多，主要有8种类型。★类型

用来定义字体、大小、粗细、斜体、行高和颜色等设置。该设置主要针对网页中的文字有效。9.2设置CSS样式属性样式表是通过其属性来编辑样19★背景用来定义背景设置。它可以对网页中的任何元素应用背景属性，还可以设置背景图像的位置。★区块用来定义文字的排列格式，是对文本段落控制的补充。★方框用来控制元素在页面上的放置方式以及属性定义。★背景用来定义背景设置。它可以对网页中的任何元素应20★边框用来定义元素周围边框的设置，如边框宽度、颜色和样式。★列表用来为列表标签定义列表设置(如项目符号外观、自定义图像和位置)。★边框用来定义元素周围边框的设置，如边框宽度、颜色21★定位主要针对层元素，也可以将页面中已有的对象转变为层元素的内容

★扩展

用于设置CSS样式的打印、滤镜及鼠标指针格式。

★定位主要针对层元素，也可以将页面中已有的对象转变229.3应用CSS样式当创建好CSS样式后，标签CSS样式和伪类CSS样式会自动应用到相应的HTML标签和伪类上，但类CSS则需要手动将其应用到网页元素上。★使用快捷菜单应用CSS样式

方法：选中要应用样式的网页元素后，单击鼠标右键，在弹出的快捷菜单的“CSS样式”选项中选择要应用的样式即可。9.3应用CSS样式当创建好CSS样式后，标签C23★使用“CSS样式”面板应用CSS样式

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

方法：选中要应用样式的网页元素后，在“属性”面板的“样式”下拉列表框中选择需要的CSS样式即可。★使用“CSS样式”面板应用CSS样式方法：选中24★链接外部CSS样式在网页中要使用外部CSS样式文件，可以通过链接将已经建好的CSS样式表文件链接到当前页面中。

方法：选中要应用样式的网页元素后，在“CSS样式”面板中，单击附加样式表按钮，弹出“链接外部样式表”对话框。★链接外部CSS样式在网页中要使用外部CSS样式25

说明：将两个或多个CSS样式应用于同一网页元素时，这些样式可能会发生冲突，浏览器将按以下规则显示：

①如果应用于同一网页元素的两个样式发生冲突，则浏览器显示最里面的规则，即离元素本身最近的规则。

②如果外部样式和内部样式同时影响元素时，则应用内部样式表。

③如果有直接冲突，则自定义CSS规则中的属性将覆盖HTML标签样式中的属性。说明：将两个或多个CSS样式应用于同一网页元素时，这269.4编辑CSS样式★修改CSS样式表方法：

①在CSS规则定义对话框中进行修改。②直接在“CSS样式”面板中单击编辑按钮进行修改。9.4编辑CSS样式★修改CSS样式表方法：27★删除CSS样式方法：

①在要删除的CSS样式上单击鼠标右键，在弹出的快捷菜单中选择“删除”命令。

②在“CSS样式”面板中单击删除按钮。★删除CSS样式方法：289.5综合实例★实例9-1设置文字样式★实例9-2制作图像翻转效果