![CSS可视化编辑--CSS的自动生成[点击放大]](http://z.abang.com/d/dreamweaver/1/1/o/-/-/-/css-type-new1.gif)
Dreamweaver工具可以根据使用者在页面中信手拈来的几个动作生成对应的CSS样式，这个功能可谓神来之笔，但对于粗心的人，这个功能会给页面增加无数个十分相似的CSS样式，造成了网页臃肿和浪费，如果想改进这种现象，减少不必要的麻烦，我们只有学好Dreamweaver中的CSS可视编辑工具和CSS语言。
首先我们来熟悉一下Dreamweaver软件的这种CSS自动生成功能。
新建一个网页，保存。
在空白处打上一行字，比如“欢迎光临Dreamweaver专栏，http://dreamweaver.abang.com”，然后将这行字选中。
接下来在软件下方的属性工具栏中依次选择以下内容：
1.字体，选择Verdana,Arial,Helvetica,snas-serif，如图1-1；
2.大小，选择24像素，如图1-2；
3.颜色，选择红色#FF0000，如图1-3；
4.字体样式，选择粗体，如图1-4。
全部选择完毕，你会看到属性面板中的样式选择栏中出现了一个大大的红色字体style1，这就是自动生成的CSS。而且你也可以在软件右侧的CSS面板中看到新建的名为style1的class的属性，如图1-5，也可以在本页源代码的
<head></head>之间发现一段<style>开头的CSS代码，如图1-6。CSS可视化编辑(一)--类型属性定义
![CSS可视化编辑--类型属性定义[点击放大]](http://z.abang.com/d/dreamweaver/1/1/p/-/-/-/css-type-new2.gif)
Dreamweaver软件生成CSS是那么简单，但如何管理、修改、使用这些自动生成的CSS才是关键所在，现在我来讲一下CSS样式面板的应用方法和CSS规则中“类型”一项的修改方法。
在CSS面板中双击style1样式，随后会弹出一个对话框，这就是CSS的编辑窗口，如图2-1，这个对话框中字体、大小、粗细、颜色四项内容已经有了值，它们都是刚才自动生成时定义的内容。
还有一个打开此对话框的方法，就是单击CSS面板的“新建CSS规则”按钮，新建一个类、id、或者重新定义特定标签时，但新建的对话框都是开白的，需要定义新属性值。
在这个对话框中，字体、大小、粗细、样式（是否斜体）、行高、变体和颜色七项的定义数值和单位选择都是在前面文章提到过的，这里就不做详细阐明了，如有不明白的地方请参阅《CSS字体属性的用法》《CSS文本属性的使用方法》和《用Dreamweaver定义页面外观》三篇文章。
剩下的大小写和修饰两项也是有些面熟的，尤其是修饰，它的CSS属性是text-decoration，在CSS文本属性的使用方法这篇文章中也提到过，但为什么要把它单独拿出来讲呢？因为其中有个选项是“闪烁”，它的值是blink，只有在Firefox中支持，IE6中是不支持它的，所以不建议使用。
还有大小写选项，它有四个值，“首字母大写”、“大写”、“小写”和“无”，如图2-2，它的CSS属性是text-transform，四个值分别是capitalize、uppercase、lowercase和none，但它只对英文文本有效，对汉字是没有作用的，所以也不建议使用它。
大家不难发现，其实我们利用CSS可视化编辑工具定义的样式是会自动转化成CSS代码的，它们之间的对应关系也是非常明晰的。
字体对应的是font-family标签，大小对应的是font-size，粗细对应的是font-weight，样式对应的是font-style，变体对应的是font-variant，行高对应的是line-height，大小写对应的是text-transform，修饰对应text-decoration，颜色对应color。只要掌握这个规律，剩下的七项CSS定义也都会很容易理解。
利用CSS规则定义面板的“类型”一项，让我们对Dreamweaver的CSS可视化编辑原理有了初步了解，就好像抛砖引玉，为剩下的软件功能学习做足了铺垫工作。再看几篇关于dreamweaver的文章
