第8章使用样式-ppt课件

1、第第8 8章章 运用款式运用款式 1 什么是什么是 CSS 款式款式 CSSCascading Style Sheet，层叠款式表，层叠款式表技术是一种格式化网页的规范方式，它扩展技术是一种格式化网页的规范方式，它扩展了了 HTML 的功能，使网页设计者可以以更有效的功能，使网页设计者可以以更有效的方式设置网页格式。的方式设置网页格式。CSS 款式表中的层叠是款式表中的层叠是指多个指多个 CSS 款式表可以同时运用于同一个页面款式表可以同时运用于同一个页面或网页中的同一元素，阅读器根据或网页中的同一元素，阅读器根据 CSS 规范中规范中定义的层叠规那么来决议哪一种款式优先，优定义的层叠规那么来

2、决议哪一种款式优先，优先的款式将覆盖其他款式。先的款式将覆盖其他款式。 一、一、 CSS 款式概述款式概述 CSS 款式表是由一系列款式选择器和款式表是由一系列款式选择器和 CSS 属性组成，属性组成，它支持字体属性、颜色和背景属性、文本属性、边框属性、它支持字体属性、颜色和背景属性、文本属性、边框属性、列表属性以及准确定位网页元素属性等，从而大大加强了列表属性以及准确定位网页元素属性等，从而大大加强了网页的格式化才干。网页的格式化才干。 除了功能强大这个优点外，运用除了功能强大这个优点外，运用 CSS 款式的另一款式的另一优点是可以运用同一个款式表对整个站点的具有一样性质优点是可以运用同一个

3、款式表对整个站点的具有一样性质的网页进展格式修饰，当需求更改这些页面的款式设置时，的网页进展格式修饰，当需求更改这些页面的款式设置时，只需在这个款式表中修正，而不用对每个页面逐个进展修只需在这个款式表中修正，而不用对每个页面逐个进展修正，从而大简化了格式化的任务。正，从而大简化了格式化的任务。在在 Dreamweaver 中中 CSS 款式的类型包括以下几种：款式的类型包括以下几种： 类款式它在网页中定义了一个类款式它在网页中定义了一个 CSS 款式属性集，款式属性集，当页面中的对象援用该款式后，所定义的当页面中的对象援用该款式后，所定义的 CSS 属性运用到页属性运用到页面中的文本范围或文本

4、块。此类款式是运用最为广泛的一种面中的文本范围或文本块。此类款式是运用最为广泛的一种款式类型。因可自在定义所需的款式款式类型。因可自在定义所需的款式 重新定义重新定义 HTML 标签款式该类款式只能对标签款式该类款式只能对 HTML 标签标签重新定义，款式的名字只能选择，不能修正，不能输入新的名字重新定义，款式的名字只能选择，不能修正，不能输入新的名字，否那么无效。例如，创建或更改，否那么无效。例如，创建或更改 H1 标签对应于段落格式中标签对应于段落格式中的的“标题标题 1的的 CSS 款式时，网页中的一切运用款式时，网页中的一切运用 H1 标签设置标签设置了该格式的文本都能立刻被更新。了该

5、格式的文本都能立刻被更新。 高级高级CSS 选择器，该类款式可以定义网页中的超链接选择器，该类款式可以定义网页中的超链接效果，同样款式的名字也只能选择，不能修正。效果，同样款式的名字也只能选择，不能修正。其中：其中：a:link设定未点击链接时的外观设定未点击链接时的外观; a:visited设定点击链接后设定点击链接后的外观的外观; a:hover设定鼠标挪动到链接上时的外观设定鼠标挪动到链接上时的外观; a:active设定链设定链接获得焦点时的外观。例如，可以使超链接文字在各种形状下均接获得焦点时的外观。例如，可以使超链接文字在各种形状下均无下划线，并且当鼠标悬停时文字颜色由蓝色变为红色

6、等。设定无下划线，并且当鼠标悬停时文字颜色由蓝色变为红色等。设定后，本页面的一切超链接均会按所设定的外观来显示。后，本页面的一切超链接均会按所设定的外观来显示。 在网站中运用在网站中运用 CSS 款式的方式与款式的方式与 HTML 款式一样，需求款式一样，需求先创建先创建 CSS 款式，然后在运用到网页或整个网站中。款式，然后在运用到网页或整个网站中。1运用运用“CSS 款式面板款式面板 在网站或网页中创建和运用在网站或网页中创建和运用 CSS 款式时，需求运用款式时，需求运用“CSS 款式面板。选择款式面板。选择“窗口菜单中的窗口菜单中的“CSS 款式款式命令或按【命令或按【Shift +

7、F11】键，可以翻开】键，可以翻开“CSS 款式面板。款式面板。 二、二、 创建和运用创建和运用 CSS CSS 款式款式 在文档窗口中，在文档窗口中，class 类款式将出如今类款式将出如今 “CSS 款式面板款式面板中，如图中，如图8.5 所示。而对于创建的其他两种款式，将直接所示。而对于创建的其他两种款式，将直接包含在网页代码或包含在网页代码或 CSS 外部款式表中，而不会显示在外部款式表中，而不会显示在“CSS 款式面板。款式面板。图8.5 CSS 款式面板2创建创建 CSS 款式款式 在文档中要创建在文档中要创建 CSS 款式，首先将款式，首先将“CSS 款式面板翻款式面板翻开，然后

8、执行以下步骤。开，然后执行以下步骤。1在在 CSS 款式面板中，单击款式面板中，单击“新建新建 CSS 款式按钮款式按钮 ，翻开翻开“新建新建 CSS 款式对话框，如图款式对话框，如图8.6 所示。所示。图8.6 “新建CSS 款式对话框2在在“新建新建 CSS 款式对话框中进展如下设置：假款式对话框中进展如下设置：假设选择设选择“创建自定义款式创建自定义款式class款式类型，那么在款式类型，那么在“称号文本框中输入款式称号；假设选择称号文本框中输入款式称号；假设选择“重定义重定义HTML 标签或标签或“运用运用 CSS 选择器款式类型，那么在选择器款式类型，那么在“称号文本框中选择相应的款

9、式称号。称号文本框中选择相应的款式称号。3在在“定义在框中选择，假设选择定义在框中选择，假设选择“新建款式表新建款式表文件选项，假设曾经定义过款式表文件，那么可以文件选项，假设曾经定义过款式表文件，那么可以从列表中选择一个文件；假设选择从列表中选择一个文件；假设选择“仅对该文档单仅对该文档单项选择按钮，表示款式将直接定义在当前文档中。项选择按钮，表示款式将直接定义在当前文档中。4单击单击“确定按钮，假设选择确定按钮，假设选择“新建款式表文件选新建款式表文件选项，那么翻开项，那么翻开“保管款式表文件对话框，进展保管设置即保管款式表文件对话框，进展保管设置即可后弹出可后弹出“款式称号的款式称号的C

10、SS 款式定义对话框；那么直接弹款式定义对话框；那么直接弹出出“款式称号的款式称号的 CSS 款式定义对话框，如图款式定义对话框，如图8.7 所示。所示。图8.7 “CSS 款式定义对话框5用户可以在用户可以在“分类列表框中选择分类列表框中选择 8 种种 CSS 款式属性款式属性，Dreamweaver 选择相应属性分类后那么在对话框右部会显选择相应属性分类后那么在对话框右部会显示相应的选项，可以根据需求设置。示相应的选项，可以根据需求设置。6最后单击最后单击“确定按钮，那么款式定义终了。确定按钮，那么款式定义终了。 在文档窗口，不论是内部款式还是外部款式表文件，在文档窗口，不论是内部款式还是

11、外部款式表文件，对于出如今对于出如今“CSS 款式面板中的自定义款式面板中的自定义 class 类款式，类款式，应首先选取要运用款式的文本、段落或其他对象，然后单应首先选取要运用款式的文本、段落或其他对象，然后单击面板中的款式图标或款式称号。假设要取消款式，选取击面板中的款式图标或款式称号。假设要取消款式，选取对象后，单击面板中的对象后，单击面板中的“无无 CSS 款式选项即可。款式选项即可。 对于对于 “运用运用 CSS 选择器款式，网页自动运用该款选择器款式，网页自动运用该款式而无须用户指定。式而无须用户指定。三、运用三、运用CSS款式款式 本实例定义一种网页中常用的正文款式，效果为本实例

12、定义一种网页中常用的正文款式，效果为“文字大文字大小小 16 px16 px，行高，行高 120%120%，首行缩进两个字符，制造步骤如下，首行缩进两个字符，制造步骤如下。 1 1翻开一个包含段落文本的文档，确保翻开翻开一个包含段落文本的文档，确保翻开“CSS CSS 款款式面板，单击式面板，单击“新建新建 CSS CSS 款式按钮款式按钮 ，翻开，翻开“新建新建CSSCSS款式对话框，在款式对话框，在“称号文本框中输入款式称号称号文本框中输入款式称号“testtest，在，在“类型选项中选择类型选项中选择“创建自定义款式创建自定义款式classclassM M单项选择按钮，选择单项选择按钮，

13、选择“仅对该文档单项选择按钮，设仅对该文档单项选择按钮，设置完成后单击置完成后单击“确定按钮。确定按钮。四、自定义四、自定义CSS款式实例款式实例 2在翻开的在翻开的“.test 的的CSS 款式定义对话框参见图款式定义对话框参见图8.7中，设置字体为中，设置字体为“宋体、大小为宋体、大小为 16 像素像素px、行、行高为高为 120%。 3然后在然后在“分类列表框中选择分类列表框中选择“区块选项，如图区块选项，如图8.8 所示，设置文字缩进为所示，设置文字缩进为 32 像素相当于两个字符，单像素相当于两个字符，单击击“确定按钮，那么新建的确定按钮，那么新建的“test款式出如今款式出如今“C

14、SS 款款式面板中。式面板中。图8.8 定义区块属性4在文档窗口中选择取要运用款式的文本，然后在单击在文档窗口中选择取要运用款式的文本，然后在单击“test款式，即可运用该款式。款式，即可运用该款式。 本实例定义一种常见的效果，即网页中的一切超链接都没本实例定义一种常见的效果，即网页中的一切超链接都没有下划线，制造步骤如下。有下划线，制造步骤如下。1翻开一个包含有超链接的文档，确保翻开翻开一个包含有超链接的文档，确保翻开“CSS 款式款式面板，单击面板，单击“新建新建 CSS 款式按钮款式按钮 ，翻开，翻开“新建新建 CSS 款式对话框，在款式对话框，在“类型框内选择类型框内选择“重新定义重新

15、定义 HTML 标标签签R选项，然后在选项，然后在“称号框内选择称号框内选择 a 标签即超链标签即超链接标签，选择接标签，选择“仅对该文档选项，单击仅对该文档选项，单击“确定按钮确定按钮。五、重新定义五、重新定义 HTML 标签款式实例标签款式实例2在翻开在翻开“a 的的 CSS 定义对话框中的定义对话框中的“修饰选项修饰选项中选择中选择“无，如图无，如图8.7所示，单击所示，单击“确定按钮。确定按钮。3此时款式被自动运用，网页中的一切超链接都没有此时款式被自动运用，网页中的一切超链接都没有下划线。下划线。 本实例将继续上一实例，使得当用户鼠标指针挪动到本实例将继续上一实例，使得当用户鼠标指针挪动到超链接上时，添加下划线效果，制造步骤如下。超链接上时，添加下划线效果，制造步骤如下。1翻开刚刚制造重新定义翻开刚刚制造重新定义HTML 标签款式的文档，单击标签款式的文档，单击“新建新建 CSS 款式按钮款式按钮 ，翻开，翻开“新建新建 CSS 款式对话款式对话框，在框，在“类型框内选择类型框内选择“运用运用 CSS 选择器选择器U单项单项选择按钮，然后在选择按钮，然后在“称号下接列表中选择称号下接列表中选择“a:hover选选择器，选择择器，