Dreamweaver CS3网页设计案例教程（第二版） 沈大林 主编 第5章 CSS样式和Div标签新.pptVIP

性值。 第 5 章 CSS 样式和 Div 标签 5.1 【案例 21】“中国名胜简介”网页 相关知识 1．“CSS 样式”面板 “CSS 样式”面板也叫 CSS 样式表编辑器，空的“CSS 样式”面板如图 5-1-12 所示，定义了内部 CSS 样式后 的“CSS 样式”面板如图 5-1-7 所示。定义了内部和外部 CSS 样式后的“CSS 样式”面板如图 5-1-11 所示。其中 各选项的作用如下： （1）“所有规则”列表框：显示所有样式表的名称和外部 CSS 样式文件的名称，如图 5-1-12 和图 5-1-13 所 示。图 5-1-12 内的“未定义样式”选项表示没有定义 CSS 样式。 （2）“属性”列表框：用来显示选中的 CSS 样式的属性和属性值，单击“添加属性”超链接，会在“添加属性” 超链接处出现一个下拉列表框，该列表框中了出了所有相关的属性名称，选择其中一个属性，即可设置该属性的相应 值。单击属性值，即可进入该属性值的编辑状态，也可以修改该属 （3）“显示类别视图”按钮 （4）“显示列表视图”按钮 ：单击该按钮后，可以分类显示选中的 CSS 样式的属性和属性值。 ：单击该按钮后，可以按英文字母的顺序显示选中的 CSS 样式的属性和属性值。 图 5-1-12 “CSS 样式”面板 图 5-1-13 “CSS 样式”面板 （5）“只显示设置属性”按钮 ：单击该按钮后，只显示已经设置过的 CSS 样式的属性和属性值。 （6）“附加样式表”按钮 ：单击该按钮后，可以弹出“链接外部样式表”对话框，如 图 5-1-14 所 示。再单击“浏览”按钮，可弹出“选择样式表文件”对话框，从中可以选择要链接或导入外部样式表（文件的 扩展名为.CSS）。 在“链接外部样式表”对话框内的“媒体”下拉列表框中可以选择媒体类型。单击“范例样式表”超链接， 可以弹出“范例样式表”对话框，如图 5-1-15 所示。该对话框给出一些样式表范例，并给出与它们相应的文件 名称和路径，可供用户使用。 图 5-1-14 “链接外部样式表”对话框 图 5-1-15 “范例样式表”对话框 （7）“新建 CSS 规则”按钮 ：单击该按钮，可以弹出一个“新建 CSS 规则”对话框。 （8）“编辑样式表”按钮 ：在“CSS 样式”面板中选中一种 CSS 样式名称，单击该按钮，可弹出相应的“CSS 规则定义”对话框，可以对 CSS 样式表进行编辑。 （9）“删除 CSS 样式”按钮 ：单击该按钮，将删除选中的 CSS 样式删除。 2．“新建 CSS 规则”对话框中其他各选项的含义 、 “新建 CSS 规则”对话框如图 5-1-8 所示，其中各选项的作用如下： （1）“类”单选按钮：选中该单选按钮后，可以应用于任何标签，定义 CSS 样式。 （2）“标签”单选按钮：选中该单选按钮后，下边的“名称”下拉列表框将变为“标签”下拉列表框，其中 提供了各种 HTML 语言的标记。用户可以对 HTML 标记重新定制，并改变它们的属性。 （3）“高级”单选按钮：选中该单选按钮后，下边的“名称”下拉列表框将变为“选择器”下拉列表框。“选 择器”下拉列表框有四个选项，都是针对链接字的，分别是“a:link”（一般链接）、“a:visited”（访问过的链 接）“a:hover”（当前的链接）和“a:active”（被激活的链接）。用户可以设置它们的属性，使链接字在各种状 态下表现不同的特性。 （4）“定义在”选项组：用来确定创建 CSS 样式的位置。选中第一个单选按钮，则创建外部 CSS；选中“仅 对该文档”单选按钮，则创建内部 CSS，并定义在当前文档中。创建外部 CSS 时，如果在下拉列表框中选择“（新 建样式表文件）”选项，则新建一个 CSS 样式表文件（扩展名为“.css”）；如果在下拉列表框中选择一个已经创 建的 CSS 样式文件（该下拉列表框内会有它的名称），则定义在所选择的 CSS 样式文件内。 3．应用 CSS 样式 用户可将定义的 CSS 样式应用于网页中的文本、图像、Flash 等对象。具体方法如下： （1）利用“CSS 样式”面板：选择要应用 CSS 样式的对象，可以是文本、图像、Flash 等，右击“CSS 样式” 面板中相应的样式名称，单击快捷菜单中的“套用”命令。 （2）利用“属性”栏：利用“属性”栏将 CSS 样式应用于网页中对象的方法如下： ① 选择要应用 CSS 样式的文本对象，在其“属性”栏的“样式”下拉列表框中选择需要的 CSS 样式名称， 即可将选择的 CSS 样式应用于选择的文本对象。 ② 选择要应用 CSS 样式的图像或 Fl