中文版-Dreamweaver-CS6网页设计教程-第5章.pptVIP

第5章 CSS样式 本章主要内容 CSS概述。 创建和使用CSS样式。 设置CSS样式参数。 本章重点 如何使用CSS样式。 如何设置CSS样式的参数。 5.1 CSS样式概述 CSS(Cascading Style Sheet)即层叠样式表，在现在的网页中应用相当广泛。使用CSS样式可以设置页面元素的相关属性，例如字体和表格等页面元素的大小、颜色、边框等。 CSS样式表可以同时控制多个文档的内容格式，并且当CSS样式表更新或修改时，所有应用此CSS样式表的页面都将自动更新。 Dreamweaver CS6提供了强大的CSS编辑和管理功能，在文档中可以很轻松地创建并使用CSS样式表。 在Dreamweaver CS6中可以定义以下三种CSS样式。 自定义CSS样式：将自定义的CSS样式应用到任何范围或任何文本段中。 HTML标签样式：重新定义标签的格式，当创建或修改标签的CSS样式时，所有以该标签格式化的文本都将更新。 CSS选择器样式：重新定义标签的特定格式或包含某指定属性的所有标签的格式。 5.1 CSS样式概述 按照定义CSS样式的方式，可将CSS样式在页面中的使用方式分为以下三种。 1. 局部套用CSS样式 2. 在页面开头定义 3. 链接外部样式表 5.2 CSS样式的简单操作 CSS在定义页面元素格式方面有着非同小可的作用，下面介绍如何创建和使用强大的CSS样式。 5.2.1 认识“CSS样式”面板 “CSS样式”面板提供了编辑和应用CSS样式的工作环境。依次选择菜单中的“窗口”|“CSS样式”命令，或单击“设计”面板上的小三角形，将“设计”面板打开，该面板上的第一项就是“CSS样式”面板，如图5-1所示。 “CSS样式”面板的底部有五个功能按钮，如图5-2所示。 5.2.2 创建CSS样式 创建新的CSS样式的操作步骤如下。 (1) 在“CSS样式”面板中单击按钮，或者右击该面板，在弹出的快捷菜单中选择“新建”命令，打开“新建CSS规则”对话框，如图5-4所示。 (2) 在“新建CSS规则”对话框中进行设置 (3) 如果是创建外部样式表，则单击“确定”按钮后弹出如图5-5所示的对话框，将所新建样式表进行保存即可。 (4) 打开“CSS规则定义”对话框，设置相关参数，即生成CSS样式文件。 5.2.3 附加外部CSS样式表 附加外部CSS样式表的操作步骤如下。 (1) 打开CSS样式面板。 (2) 用右键单击CSS样式面板，在弹出的快捷菜单中选择“附加样式表”命令，打开“链接外部样式表”对话框，如图5-6所示。 (3) 在对话框中的“文件/URL”下拉列表框中输入所需的文件，或者单击其右侧的“浏览”按钮，在弹出的对话框中查找并选择所要附加的文件。 (4) 在“添加为”选项组中选择“链接”或“导入”选项，指定和创建用于将外部CSS样式表附加到文档中的标签方式。 链接 导入 (5) 设置完成后，单击“确定”按钮，即可将所选择的CSS样式表附加到当前文档，在CSS样式面板中显示该CSS样式表。 5.3 设置CSS样式参数 打开“CSS规则定义”对话框，在该对话框的“分类”列表中选择不同的类型，对CSS设置不同的参数。 5.3.1 设置“类型”参数 在“CSS规则定义”对话框的“分类”列表框中选择“类型”选项，设置选定的CSS样式的类型参数，如图5-7所示。 5.3.1 设置“类型”参数 在“类型”界面中可以对下列参数进行设置。 1. 字体属性 2. 文本属性 5.3.2 设置“背景”参数 在“分类”列表框中选择“背景”选项，设置选定的CSS样式的“背景”参数，如图5-8所示。 在“背景”界面中可以对下列参数进行设置。 1. 背景色 2. 背景图像 5.3.3 设置“区块”参数 在“分类”列表框中选择“区块”选项，设置CSS样式的区块参数，如图5-9所示。 在“区块”界面中可以对下列参数进行设置。 1. 间距 2. 对齐 3. 文本缩进 4. 空格 5. 显示 5.3.4 设置“方框”参数 在“分类”列表框中选择“方框”选项，设置CSS样式的方框参数，如图5-10所示。 在“方框”界面中可以对下列参数进行设置。 1. 高度和宽度 2. 浮动位置 3. 边界 4. 空白 5.3.5 设置“边框”参数 在“分类”列表框中选择“边框”选项，设置选定的CSS样式的边框参数，如图5-11所示。 在“边框”界面中可以对下列参数进行设置。 1. 边框风格 2. 边框宽度 3. 边框颜色 【边学边练5-1】美化表格 借助CSS样式表的强大功能，可以创建精美的表格效果，这里介绍点线框表格的制作方法，具体操作步骤如下。 (1) 插入3行3列的表格。 (2) 新建CSS样式，在“新建CSS规则