Dreamweaver80第十五讲 丰富的CSS效果.doc

第二十三讲 丰富的CSS效果 新版本的 Dreamweaver 可以设计和显示复杂的 CSS 页面布局。相比以前版本而言，新版本更加易用，也更加精确。用户可以快速选择和控制页面乃至站点的样式属性，这样可以节省时间，提高效率。新版本的 Dreamweaver 具有动态的跨浏览器验证功能，可以自动检查标签和 CSS 规则在所有主流浏览器中的兼容情况。 在上一讲中，我们学习了如何设置网页图像。在本讲中，我们学习使用CSS设计页面样式。通过本讲的学习，我们希望达到下面的学习目标： ◆ CSS的三个问题； ◆ 使用“CSS 样式”面板； ◆ 创建新的 CSS 样式； CSS 样式定义（上）。 23.1 使用层叠样式表 默认情况下，Dreamweaver 使用层叠样式表 (CSS) 样式设置文本格式。用户使用属性检查器或菜单命令应用于文本的样式将创建 CSS 规则，这些规则嵌入在当前文档的 head 部分中。从精确的布局定位到特定的字体和文本样式，CSS 样式使用户可以更加灵活并更好地控制页面外观。 使用 CSS 样式是一种能控制 Web 页样式而不损坏其结构的方式。通过将可视化设计元素（字体、颜色、边距等）与 Web 页的结构逻辑分离，CSS 样式表为 Web 设计人员提供了可视化控制和格式控制，而不牺牲内容的完整性。此外，在单独的代码块中定义格式设计和页面布局加快下载速度，简化站点维护，并能集中控制多个 Web 页的设计属性。 CSS 样式可直接存储在文档中，如果要获得更多功能和灵活性，也可将其存储在外部样式表中。如果将外部样式表附加到多个网页，则所有网页都会自动反映对该样式表所做的任何更改。若要访问 CSS 样式，请使用“CSS 样式”面板或文本属性检查器的“样式”弹出式菜单。 23.1.1 CSS的三个问题 CSS 规范允许使用称作速记 CSS 的简略语法来创建样式。速记 CSS 使用户可以用一个属性标签指定多个属性的值。 使用速记 CSS 时需要注意的关键问题是速记 CSS 属性省略的值会被指定为属性的默认值。当两个或多个 CSS 样式指定给同一标签时，这可能导致页面无法正确显示。 如果用户使用 CSS 语法的速记形式和普通形式在不只一个位置定义了样式（如在 HTML 页面中嵌入样式并从外部样式表中导入样式），一定要注意省略的属性值可能会覆盖（或层叠）在其他属性中明确设置的属性值。 因此，Dreamweaver 默认情况下使用 CSS 符号的普通形式撰写语法。这可防止用速记符号编写 CSS 样式可能覆盖用普通符号编写的 CSS 样式这类问题。如果用户在 Dreamweaver 中打开使用速记 CSS 符号编写代码的 Web 页，请注意 Dreamweaver 将使用普通的符号创建新的 CSS 样式。通过更改“首选参数”对话框中“CSS 样式”类别中的 CSS 编辑首选参数，用户可以指定 Dreamweaver 创建和编辑 CSS 样式的方式： ? ◇“使用速记”使用户可以选择 Dreamweaver 以速记形式编写的 CSS 样式属 性。 ? ◇“当编辑 CSS 样式时使用速记”控制 Dreamweaver 是否以速记形式重新编 写现有样式。选择“如果原来使用速记”使 Dreamweaver 将所有样式保留原 样。 选择“依据以上设置”使 Dreamweaver 以速记形式重新为“使用速 记”中选择的属性编写样式。 选择“窗口”“标签检查器”，可以打开“标签”面板。单击“相关 CSS”选项卡，可以打开该选项卡。“相关 CSS”选项卡显示用于当前选择内容的 CSS 规则、包含 CSS 规则的文件的名称和位置以及规则的相关属性。 “相关 CSS”选项卡的上半部分显示影响当前选择内容的规则及其影响的标签。“相关 CSS”选项卡的下半部分在一个可编辑的网格中显示当前所选元素的属性。这些属性按字母顺序排列，已设置的属性排在选项卡的顶部。已设置的属性以蓝色显示；与选择无关的属性显示时伴有一条红色删除线。将鼠标指针置于无关规则上方时将显示一条消息解释该属性为何无关。用户还可以使用“相关 CSS”选项卡的下面板修改选择内容的属性。可编辑的网格使用户可以更改任何显示的属性的值。对选择所作的任何更改都将立即应用，这使用户可以在操作的同时预览成果。如果使用“相关 CSS”选项卡编辑 CSS 规则，可以选择下列操作之一： ? ◇在“相关 CSS”选项卡中双击该规则以打开规则的代码编辑器并显示 CSS 属性 检查器； ? ◇使用“相关 CSS”选项卡窗口下半部分提供的控件