33、使用CSS与模板打造一致风格网页

使用CSS与模板打造一致风格网页

1. CSS规则操作

在网页设计中，CSS（层叠样式表）起着至关重要的作用，它能帮助我们精确控制网页元素的样式。下面将详细介绍如何在Dreamweaver中进行CSS规则的相关操作。

1.1 属性面板

属性面板为我们提供了编辑所选规则样式属性的途径。默认情况下，列表中显示的属性是在CSS代码中明确设置的。我们可以通过从下拉列表中选择新值或自行输入来调整属性。
属性面板有两种其他模式，可通过状态栏左侧的按钮组访问：
- 类别视图 ：以类别形式展示所有可能的属性，已设置的属性位于每个类别顶部，以蓝色文本显示。
- 列表视图 ：按字母顺序列出可能的属性，已设置的属性显示在列表顶部，同样以蓝色文本显示。不过，列表视图虽然完整，但内容较多，可能需要滚动查找特定属性。

1.2 处理所有样式

CSS样式面板可以切换到“所有”模式，用于处理整个文档中的规则。该面板分为“所有规则”窗格和“属性”窗格。
- “所有规则”窗格以树状结构显示与文档关联的所有CSS规则，规则按其容器（文档内的样式元素或附加到HTML文件的外部样式表）进行组织。
- “属性”窗格的操作方式与“当前”模式相同，它为编辑“所有规则”窗格中所选CSS规则的属性提供了方法，并且也可以在类别视图和列表视图中查看。

1.3 创建新的CSS规则

Dreamweaver提供了一种可视化的方式，让我们可以在CSS样式面板中创建新的CSS规则，具体步骤如下：
1. 点击CSS样式面板右