第8章 节 使用CSS美化网页 中文版Dreamweaver CS6网页制作课件.pptx

;本章导读;8.1 认识层叠样式表;从入门到精通;选择“窗口/CSS样式”命令或按“Shift＋F11”键可打开“CSS样式”面板。在其中显示了当前网页中存在的所有CSS样式，包括外部链接样式表和内部样式表。 ;该样式可用于HTML中的任何元素，定义该类型的CSS样式时，需在其名称前加上“.”符号。Dreamweaver CS6会为该类型的CSS样式的HTML代码中添加class属性。;该样式只能应用于惟一的标签，且这个标签的ID必须是惟一的，ID类型的CSS样式，其名称前应添加“#”符号。;该样式用于重新定义HTML元素，只需新建该类型的CSS样式后，即可直接将其应用到网页中。 ;该样式用于在已创建的CSS样式基础上，创建或改变一个或多个标签、类或ID的复合规则样式表，使包含在该标签中的内容遵循定义的CSS规则进行显示。;内部CSS样式是指存放在网页代码中，并非以单独的层叠样式表文件而存在的形式。在Dreamweaver CS6中可以直接在“CSS样式”面板中新建任一类型的内部层叠样式，新建后的样式存放在HTML文件的头部，即head与 head标签内，并以style开始，/style结束。;在Dreamweaver CS6中可以链接已经创建好的CSS文件，使其应用到网页中。;从入门到精通;CSS的“类型”属性主要用于设置文本的样式和格式，只要在CSS规则定义对话框的“分类”列表框中选择“类型”选项，即可在对话框右侧进行设置。;“背景”属性可以对网页的背景样式进行设置，只要在CSS规则定义对话框的“分类”列表框中选择“背景”选项，即可在对话框右侧对其进行设置。;在CSS规则定义对话框的“分类”列表框中选择“区块”选项，在对话框右侧可对区块的样式进行设置。;在CSS规则定义对话框的“分类”列表框中选择“方框”选项，在对话框右侧可对方框的样式进行设置。;在CSS规则定义对话框的“分类”列表框中选择“边框”选项，在对话框右侧可对边框的样式进行设置。;在CSS规则定义对话框的“分类”列表框中选择“列表”选项，在对话框右侧可对列表的样式进行设置。;在CSS规则定义对话框的“分类”列表框中选择“定位”选项，在对话框右侧可对定位的样式进行设置。;在CSS规则定义对话框的“分类”列表框中???择“扩展”选项，在对话框右侧可对扩展的样式进行设置。;在CSS的规则定义对话框中选择“过渡”选项，在对话框右侧即可对过渡样式进行设置。;从入门到精通;8.4.1 应用层叠样式表;在Dreamweaver CS6中选中要应用样式的网页元素后，在其上单击鼠标右键，在弹出的快捷菜单中选择“CSS样式”命令，在弹出的子菜单中选择相应的CSS样式即可。;选中要应用样式的网页元素后，在其“属性”面板的“样式”下拉列表框（其他网页元素如表格、图像等则是“类”下拉列表框）中选择需要的选项即可。;在网页选中要应用样式的网页元素后，在“CSS样式”面板中要应用的CSS样式名称上单击鼠标右键，在弹出的快捷菜单中选择“应用”命令即可。;8.4.2 编辑层叠样式;在CSS规则定义对话框中修改CSS样式的方法很简单，只需打开对应的CSS规则定义对话框，重新对其参数进行定义即可。;如果对CSS样式较为熟悉，可以直接在“CSS样式”面板中对其进行修改。方法是：在“CSS样式”面板中选择需要进行修改的样式，在“属性”栏中直接对其进行设置即可。;如果网页中存在未使用的CSS样式，可对其进行删除。只要在“CSS样式”面板中选择要删除的CSS样式，再单击“删除CSS规则”按钮 即可。;从入门到精通;;8.5.2 操作思路;从入门到精通;从入门到精通;从入门到精通