利用CSS技术，我们可以控制网页的背景、字体、布局等，可以让页面增色不少，Dreamweaver软件提供了CSS的可视化编辑工具，让编写CSS的门槛降低了很多。
软件中的CSS通过CSS面板来进行新建、选择、修改等操作，CSS面板位于软件的右侧，可以是用快捷键Shift+F11打开它，也可以在菜单栏中选择“窗口”>“CSS样式”将它打开，面板样式如图一。
我将图一中的窗口划分成了六个小区块，因为它们是六个不同的功能区，需要分解说明。
图中①处可以切换查看内容，分别是CSS样式和层，层是Dreamweaver中可以灵活运用的元素，我们这里暂时不介绍，所以这里只选择“全部”就可以了。
图中②处是全部CSS视图和当前CSS视图的切换按钮，图一的效果就是选择“全部”时的样式，也是我们最常用的，选择“正在”的效果如图二。“正在”查看效果中除了显示CSS的名称、属性以外，还多出了摘要，可以对所选CSS展示相应的提示。
图中③处是所有CSS样式的列表，这里将显示所有CSS文件的名字，甚至CSS文件中的各属性。
图中④处显示的是CSS属性值，它对应的是图③处选中的属性。
图中⑤处是CSS属性的列表展示方式，此处有三种查看方式。第三种就是我们现在使用的“只显示设置属性”，这种模式下只显示已经定义了的属性值，而第一种查看方式“显示类别视图”是将所有的CSS属性全部列出来，以功能分类，如图三。第二种“显示列表视图”是将选中的CSS属性的可用CSS属性值列出来供用户选择，如图四。
图中⑥处是四个重要的功能按钮，它们分别是“附加样式表”、“新建CSS规则”、“编辑样式表”和“删除CSS规则”。
附加样式表：
- ·点击“附加样式表”按钮，弹出一个链接外部样式表的对话框，如图五，“文件/URL”可以直接填入CSS样式表文件的路径和名称，也可以点击“浏览”选择文件。
- ·“添加为”是选择链接样式表的两种方式，一种是直接链接，一种是导入，由于有些浏览器对导入的样式表无法解析，所以一般情况下选择链接方式。
- ·“媒体”指的是此CSS样式表针对的网页查看器类型，我们这里选择“所有”。
- ·当三项都选择好后点击确定，网页源代码的<head></head>之间就会插入一段以<link...>开头的代码，这就是链接好的外部CSS样式表，如图六，同时在CSS面板的CSS文件列表菜单中也会出现CSS文件的名字，如图七，点击名字前面的小加号图标可以展开CSS文件中的所有CSS属性。
新建CSS规则：
- ·点击“新建CSS规则”按钮，会弹出一个新建CSS的选择框，如图七，其中有三处需要选择的内容，第二项的内容会根据第一项“选择器类型”变化。
- ·“选择器类型”选择“类（可应用于任何标签）”时，下面出现“名称”输入框，选择这个选项是新建一个class，使任何元素都能使用它进行定义，我们在这里输入newclass1作为新class的名字，点击确定会弹出新建CSS规则的对话框，如图九所示，其中包含类型、背景、区块、方框、边框、列表、定位、扩展等八项定义内容，我将在后面的文章一一作出详细介绍。
- ·“定义在”一项有两个选项，如果选择第一项“新建样式表文件”，将弹出一个保存文件的对话框，如果网页已经包含了一个CSS文件，也可以从第一项的下拉菜单中选取这个CSS文件，新建的class就会添加到该CSS文件中。选择第二项“仅对该文档”，新建的class就会添加到当前网页中。
- ·如果“选择器类型”选择了“标签（重新定义特定标签外观）”，那么第二项就会变成标签的选项，我们可从下拉菜单中选择需要重新定义的标签，比如body，td，p，ul和li等等。
- ·如果“选择器类型”选择了第三项“高级（ID、伪类选择器等）”，可以在下方“选择器”中选择伪类a:link，a:visited，a:hover，a:active来定义链接样式，也可以填入#newid1这样的名称来新建一个ID在网页中使用。
- ·class与id的详细解释请参阅《CSS书写方法二 class与id详解》。
编辑样式表和删除CSS规则
点击“编辑样式表”按钮即可呼出样式修改窗口，这个窗口其实就是新建CSS规则的窗口，如图九所示。
点击“删除CSS规则”按钮即可立即删除已经创建的CSS规则。
Dreamweaver软件的CSS面板就介绍到这里，下面的文章我将会对CSS定义的类型、背景、区块、方框、边框、列表、定位、扩展等八项定义内容一一作出详细介绍，请大家关注。
![Dreamweaver工具栏详解-CSS面板[点击放大]](http://z.abang.com/d/dreamweaver/1/1/n/-/-/-/css_style_panel.gif)
