第 06 章使用 CSS 样式

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

第第 0606 章使用章使用 CSSCSS 样式样式

CSSCSS 样式的全名为样式的全名为 Cascading Style SheetCascading Style Sheet ，它可以定义，它可以定义 HTMLHTML 标签，按标签，按列表的语法将许多文字、图片、表格、表单、图层等设计加以格式设定。在列表的语法将许多文字、图片、表格、表单、图层等设计加以格式设定。在 HHTMLTML 语法中，常常需要使用到一些设定颜色、字体大小或框线粗细之类的标语法中，常常需要使用到一些设定颜色、字体大小或框线粗细之类的标签，而签，而 CSSCSS 在开始制作网页时就将这些设定做好，不需要在制作网页文档时在开始制作网页时就将这些设定做好，不需要在制作网页文档时再反复写入同样的标签。再反复写入同样的标签。


6.1 6.1 教学目标教学目标

掌握知识：掌握知识：通过本章的学习，读者应了解什么是通过本章的学习，读者应了解什么是 CSSCSS ，以及，以及 CSSCSS 样式的样式的类别。掌握建立类别。掌握建立 CSSCSS 样式和管理样式和管理 CSSCSS 样式表的方法。样式表的方法。

重点学习：重点学习：本章重点讲解了创建、链接和导出本章重点讲解了创建、链接和导出 CSSCSS 样式的方法，并介绍了样式的方法，并介绍了为了避免为了避免 CSSCSS 样式冲突，浏览器样式格式应依照的规则。课后读者应结合上机样式冲突，浏览器样式格式应依照的规则。课后读者应结合上机操作进行强化练习。操作进行强化练习。


6.2 6.2 理论指导理论指导认识认识 CSSCSS 创建创建 CSSCSS 样式样式应用应用 CSSCSS 样式样式管理管理 CSSCSS 样式表样式表 CSSCSS 样式冲突样式冲突


66.2.1.2.1 认识认识 CSSCSS

CSSCSS 样式是样式是 Cascading Style Sheets(Cascading Style Sheets( 层叠样式单层叠样式单 )) 的简称，利用它可以的简称，利用它可以对网页中的文本进行精确的格式化控制。对网页中的文本进行精确的格式化控制。在在 CSSCSS 样式之前，样式之前， HTMLHTML 样式被广泛应用，样式被广泛应用， HTMLHTML 样式用于控制单个文样式用于控制单个文档中某范围内文本的格式。而档中某范围内文本的格式。而 CSSCSS 样式与之不同，它不仅可以控制单个文档样式与之不同，它不仅可以控制单个文档中的多个范围内文本的格式，而且可以控制多个文档中文本的格式。中的多个范围内文本的格式，而且可以控制多个文档中文本的格式。

CSSCSS 样式表简介样式表简介使用使用 CSSCSS 样式面板样式面板


CSSCSS 样式表位于文档的样式表位于文档的 <head><head> 区，其作用范围由区，其作用范围由 CLASSCLASS 或其他任何符或其他任何符合合 CSSCSS 规范的文本来设置。对于其他现有的文档，只要其中的规范的文本来设置。对于其他现有的文档，只要其中的 CSSCSS 样式符合样式符合规范，规范， DreamweaverDreamweaver 就能识别它们。就能识别它们。在制作网页时采用在制作网页时采用 CSSCSS 技术，可以有效地对页面的布局、字体、颜色、背技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。总之，景和其他效果实现更加精确的控制。总之， CSSCSS 具有以下几个方面的作用和具有以下几个方面的作用和优势。优势。

在几乎所有的浏览器上都可以使用。在几乎所有的浏览器上都可以使用。以前一些只有通过图片转换实现的功能，现在只要用以前一些只有通过图片转换实现的功能，现在只要用 CSSCSS 就可以轻松实就可以轻松实现，从而可以更快地下载页面。现，从而可以更快地下载页面。使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。可以轻松地控制页面的布局。可以轻松地控制页面的布局。可以将许多网页的风格格式同时更新，不用再一页一页地更新。可以将许多网页的风格格式同时更新，不用再一页一页地更新。


使用“使用“ CSSCSS 样式”面板可以创建样式”面板可以创建 CSS CSS 样式、查看样式、查看 CSS CSS 样式的属性以样式的属性以及将及将 CSS CSS 样式应用于当前文档中。样式应用于当前文档中。要使用要使用”” CSSCSS 样式”面板样式”面板 ,, 用户可以选择“窗口” 用户可以选择“窗口” | “CSS | “CSS 样式”命令或样式”命令或按下按下 Shift+F11Shift+F11 快捷键。快捷键。


6.2.2 6.2.2 创建创建 CSSCSS 样式样式在在 Dreamweaver 8Dreamweaver 8 中，用户可以创建一个中，用户可以创建一个 CSS CSS 样式，然后应用于文档的某样式，然后应用于文档的某个部分，完成文本的格式化。个部分，完成文本的格式化。

CSSCSS 样式表的类别样式表的类别使用“类”单选按钮使用“类”单选按钮使用“标签”单选按钮使用“标签”单选按钮使用“高级”单选按钮使用“高级”单选按钮


CSSCSS 样式有两种存在方式，一种是“内嵌”到当前文档中，将样式有两种存在方式，一种是“内嵌”到当前文档中，将 CSSCSS 语法语法直接写在直接写在 <style>...</style><style>...</style> 标签内标签内 (( 置于置于 headhead 文件头中文件头中 )) ，仅其所在的网页，仅其所在的网页使用。其他网页要使用时需要先将内部样式表通过选择“文件”使用。其他网页要使用时需要先将内部样式表通过选择“文件” |“|“ 导出”导出” |“C|“CSSSS 样式”命令的方式导出才可使用。在创建样式”命令的方式导出才可使用。在创建 CSSCSS 样式时，在“新建样式时，在“新建 CSSCSS 规规则”对话框中选择“仅对该文档”单选按钮之后所创建的则”对话框中选择“仅对该文档”单选按钮之后所创建的 CSSCSS 样式变会为内样式变会为内嵌到文档内部的样式表。嵌到文档内部的样式表。另一种是独立存放在一个文件中，这类文件的扩展名为另一种是独立存放在一个文件中，这类文件的扩展名为 .css.css 。在“新建。在“新建 CCSSSS 规则”对话框的“定义在”选项区域用于选择所定义样式的存放位置，可规则”对话框的“定义在”选项区域用于选择所定义样式的存放位置，可以选择“新建样式表文件”单选按钮，单击“确定”按钮后，将出现“保存样以选择“新建样式表文件”单选按钮，单击“确定”按钮后，将出现“保存样式表文件为”对话框，提示用户输入保存成的文件。式表文件为”对话框，提示用户输入保存成的文件。


“ “ 类”单选按钮针对自行设计的类”单选按钮针对自行设计的 CSSCSS 样式使用，可以自定义样式名称，样式使用，可以自定义样式名称，并设计样式的组合。当要应用“类”单选按钮创建新并设计样式的组合。当要应用“类”单选按钮创建新 CSSCSS 样式时样式时 ,, 用户可以用户可以在 “新建在 “新建 CSSCSS 规则”对话框的“选择器类型”选项区域中选择“类”单选按规则”对话框的“选择器类型”选项区域中选择“类”单选按钮，然后单击“确定”按钮打开“规则定义”对话框进行设置。钮，然后单击“确定”按钮打开“规则定义”对话框进行设置。


“ “ 标签”单选按钮是针对标签”单选按钮是针对 HTMLHTML 内定的标签重定义格式时使用的，用户只内定的标签重定义格式时使用的，用户只能选取列表中的标签名称并调整其样式，而无法新建名称。一般经常更改的标能选取列表中的标签名称并调整其样式，而无法新建名称。一般经常更改的标签样式有签样式有 <h1><h1> 、、 <p><p> 、、 <body><body> 、、 <h2><h2> 等。等。要应用“标签”单选按钮编辑要应用“标签”单选按钮编辑 DreamweaverDreamweaver 中现有的标签样式中现有的标签样式 ,, 可以在可以在 “新建“新建 CSSCSS 规则”对话框的“选择器类型”选项区域中选择“标签”单选按规则”对话框的“选择器类型”选项区域中选择“标签”单选按钮，然后单击“标签”下拉列表按钮，在弹出的下拉列表中选择一个需要定义钮，然后单击“标签”下拉列表按钮，在弹出的下拉列表中选择一个需要定义格式的标签名称后。单击“确定”按钮，打开“规则定义”对话框即可进行编格式的标签名称后。单击“确定”按钮，打开“规则定义”对话框即可进行编辑。辑。


“ “ 高级”单选按钮主要使用在超链接上的设定，用户可以在其中设定鼠标高级”单选按钮主要使用在超链接上的设定，用户可以在其中设定鼠标互动效果，包括一般状态、已链接状态和鼠标指针滑过状态等等。互动效果，包括一般状态、已链接状态和鼠标指针滑过状态等等。要应用“高级”单选按钮设置鼠标的状态要应用“高级”单选按钮设置鼠标的状态 ,, 可以在 “新建可以在 “新建 CSSCSS 规则”对话规则”对话框的“选择器类型”选项区域中选择“高级”单选按钮，然后单击“选择器”框的“选择器类型”选项区域中选择“高级”单选按钮，然后单击“选择器”下拉列表按钮，并在弹出的下拉列表中选择一个鼠标的状态后下拉列表按钮，并在弹出的下拉列表中选择一个鼠标的状态后 ,, 单击“确定”单击“确定”按钮，打开“规则定义”对话框中进行设置。按钮，打开“规则定义”对话框中进行设置。


6.2.3 6.2.3 应用应用 CSSCSS 样式样式在文档中应用在文档中应用 CSSCSS 样式的方法有样式的方法有 44 种，分别是在属性检查器中、在标签中、种，分别是在属性检查器中、在标签中、在“标签检查器”面板组的“属性”面板中和通过单击鼠标右键设定在“标签检查器”面板组的“属性”面板中和通过单击鼠标右键设定。。


要在属性检查器中应用要在属性检查器中应用 CSSCSS 样式样式 ,, 用户可以在文档中将要设定样式的文用户可以在文档中将要设定样式的文字选取，或将光标插入该文字段落的任何一处，然后在属性检查器中的“样字选取，或将光标插入该文字段落的任何一处，然后在属性检查器中的“样式”下拉列表框中选择要应用的样式名称式”下拉列表框中选择要应用的样式名称即可。即可。


要在“标签检查器”面板组的“属性”面板上应用要在“标签检查器”面板组的“属性”面板上应用 CSSCSS 样式样式 ,, 可以在文档可以在文档中将要设定样式的文字选取，或将光标插入该文字段落的任何一处，然后在中将要设定样式的文字选取，或将光标插入该文字段落的任何一处，然后在“标签检查器”面板组的“属性”面板上单击按钮，在“标签检查器”面板组的“属性”面板上单击按钮，在 classclass 选项右侧的文选项右侧的文本框中输入样式的名称即可。本框中输入样式的名称即可。


用户还可以在文档中将要设定样式的文字选取并右击，在弹出的菜单中选用户还可以在文档中将要设定样式的文字选取并右击，在弹出的菜单中选择“择“ CSSCSS 样式”样式” |“|“ 样式名称”命令，应用所选的样式名称”命令，应用所选的 CSSCSS 样式。样式。


6.2.4 6.2.4 管理管理 CSSCSS 样式表样式表要对要对 CSSCSS 样式进行编辑、删除、链接或者新建等操作，都可以在“样式进行编辑、删除、链接或者新建等操作，都可以在“ CSSCSS 样样式”面板中找到相应的按钮。式”面板中找到相应的按钮。

新建样式

链接或导入/导出外部样式表

编辑样式

删除样式


6.2.5 6.2.5 CSSCSS 样式冲突样式冲突当相同的文本上应用两种或多种当相同的文本上应用两种或多种 CSSCSS 样式时，可能会产生冲突，并导致不可样式时，可能会产生冲突，并导致不可预料的结果。浏览器显示样式格式依照以下规则。预料的结果。浏览器显示样式格式依照以下规则。

如果两种样式同时应用于相同文本，浏览器会将两种样式的所有格式都显如果两种样式同时应用于相同文本，浏览器会将两种样式的所有格式都显示出来，除非样式格式发生冲突。例如，一种样式指定文本的颜色为蓝色，另示出来，除非样式格式发生冲突。例如，一种样式指定文本的颜色为蓝色，另一样式则指定文本颜色为红色。一样式则指定文本颜色为红色。如果应用于同一个文本的两种样式发生冲突，则浏览器会显示最内部的样如果应用于同一个文本的两种样式发生冲突，则浏览器会显示最内部的样式设置格式式设置格式 ((即最靠近文本的样式即最靠近文本的样式 )) 。。如果存在直接冲突，则如果存在直接冲突，则 CSSCSS 样式样式 (( 由由 classclass 属性决定的样式属性决定的样式 ))会覆盖基于会覆盖基于HTMLHTML 标记的样式格式。标记的样式格式。


6.3 6.3 上机实验上机实验本章的上机实验主要练习在本章的上机实验主要练习在 Dreamweaver 8Dreamweaver 8 中创建和编辑中创建和编辑 CSSCSS 样式表的样式表的方法。其中在“规则定义”对话框中对样式表内容的编辑是重点。用户在练习方法。其中在“规则定义”对话框中对样式表内容的编辑是重点。用户在练习CSSCSS 样式表内容设定的时候要注意“规则定义”对话框中各选项的功能。在样式表内容设定的时候要注意“规则定义”对话框中各选项的功能。在练习创建新样式表的操作时要注意“新建练习创建新样式表的操作时要注意“新建 CSSCSS 规则”对话框中不同选项的作规则”对话框中不同选项的作用。对于本章中的其他内容，用户可根据理论指导部分进行练习。用。对于本章中的其他内容，用户可根据理论指导部分进行练习。创建内部样式表创建内部样式表编辑编辑 CSSCSS 样式表样式表

Documents

第 06 章 使用 CSS 样式

第 06 章使用 CSS 样式