一.CSS概述
如今网页的排版格式越来越复杂，很多效果需要通过CSS来实现，Dreamweaver MX 2004在CSS功能设计上做了很大的改进。今天给大家具体谈谈如何使用Dreamweaver MX 2004 CSS功能，我相信当你看完这个教程之后你会觉得CSS使用是那样的简单，而创作出来的效果却是惊人的。
现代网页制作离不开 CSS技术，采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 用CSS不仅可以做出美观工整令浏览者赏心悦目的网页，还能给网页添加许多神奇的效果。
创建CSS样式表的过程，就是对各种CSS属性的设置过程，所以了解和掌握属性设置非常重要。在DW MX 2004的CSS样式里包含了W3C规范定义的所有CSS1的属性，把这些属性分为：类型、背景、区块、方框、边框、列表、定位、扩展等八个部分，如下图：
DW MX 2004 实现CSS属性设置功能是完全可视化的，无需编写代码。下面我们分别详细讲解。 为了便于理解，从开始创建新的 CSS 样式表说起：
【创建新的 CSS 样式】
将插入点放在文档中，然后执行以下操作之一打开“新建 CSS 样式”对话框：
在“CSS 样式”面板（“窗口”>“CSS 样式”）中，单击面板右下角区域中的“新建 CSS 样式”按钮，如下图：
在文本属性检查器中，从“样式”弹出式菜单中选择“管理样式”，然后在出现的对话框中单击“新建”。
在“相关 CSS”选项卡（选择“窗口”>“标签检查器”，然后单击“相关 CSS”选项卡）中右键单击，然后从上下文菜单中选择“新建规则”。
选择“文本”菜单>“CSS 样式”>“新建(N)…”。
“新建 CSS 样式”对话框随即出现，如下图：
定义您要创建的 CSS 样式的类型：
若要创建可作为 class 属性应用于文本范围或文本块的自定义样式，请选择“创建自定义样式 (Class)”，然后在“名称”文本框中输入样式名称。
注意：类名称必须以句点开头，并且可以包含任何字母和数字组合（例如，.mycss）。如果您没有输入开头的句点，DW MX 2004将自动为您输入。
若要重定义特定 HTML 标签的默认格式，请选择“重定义标签”，然后在“标签”字段中输入一个 HTML 标签，或从弹出式菜单中选择一个标签。
若要为具体某个标签组合或所有包含特定 Id 属性的标签定义格式，请选择“使用 CSS 选择器”，然后在“选择器”文本框中输入一个或多个 HTML 标签，或从弹出式菜单中选择一个标签。弹出式菜单中提供的选择器（称作伪类选择器）包括 a:active、a:hover、a:link 和 a:visited。
选择定义样式的位置：
若要创建外部样式表，请选择“新建样式表文件”。
若要在当前文档中嵌入样式，请选择“仅对该文档”。
单击“确定”。
||||||二.定义CSS的类型属性
使用“CSS 样式定义”对话框中的“类型”类别可以定义 CSS 样式的基本字体和类型设置。
定义 CSS 样式的类型设置：
在“CSS 样式定义”对话框中，选择“类型”（如下图），然后设置所需的样式属性。
以下属性如果不设置可以保留为空。
字体：为样式设置字体。DW MX 2004内置6个系列的英文字体（如下图）。
一般英文字体常常用“Arial， Helvetica， sans-serif”这个系列比较美观，如果不用这些字体系列，你您可以通过下拉列表最下面的“编辑字体列表”来创建新的字体系列。中文网页默认字体是宋体，一般留空即可。浏览器首选用户系统第一种字体显示文本。两种浏览器都支持字体属性。
大小：定义文本大小。可以通过选择数字和度量单位选择特定的大小，也可以选择相对大小。以像素为单位可以有效地防止浏览器变形文本。
注意：CSS中长度的单位分为绝对长度单位和相对长度单位
绝对长度：
px：（象素）根据显示器的分辨率来确定长度。
pt：（字号）根据windows系统定义的字号大小来确定长度。
in、cn、mm：（英寸、厘米、毫米）根据显示的实际尺寸来确定长度。此类单位不随显示器的分辨率改变而改变。
相对长度：
em：当前文本的尺寸。例如：{ font-size:3em}是指文字大小为原来的3倍。
ex：当前字母“x”的高度，一般为字体尺寸的一半。
%：是以当前文本的百分比定义尺寸。例如：{ font-size:200%}是指文字大小为原来的2倍。
样式：将“正常”、“斜体”或“偏斜体”指定为字体样式。默认设置是“正常”。
行高：设置文本所在行的高度。选择“正常”自动计算字体大小的行高，或输入一个确切的值并选择一种度量单位。比较直观的写法用百分比，例如200%是指行高等于文字大小的2倍。相对应的CSS属性是”line-height”。
修饰：向文本中添加下划线、上划线或删除线，或使文本闪烁。正常文本的默认设置是“无”。链接的默认设置是“下划线”。将链接设置设为无时，可以通过定义一个特殊的类删除链接中的下划线。这些效果可以同时存在，将效果前的复选框选定即可。相对应的CSS属性是”text-decoration”。
粗细：对字体应用特定或相对的粗体量。“正常”等于 400；“粗体”等于 700。相对应的CSS属性是”font-weight”。
变量：设置文本的小型大写字母变量。DW MX 2004不在“文档”窗口中显示该属性。注意：Internet Explorer 支持变量属性，但 Netscape Navigator 不支持。
大小写：将选定内容中的每个单词的首字母大写或将文本设置为全部大写或小写。两种浏览器都支持大小写属性。
颜色：设置文本颜色。
设置完这些选项后，在面板左侧选择另一个 CSS 类别以设置其它的样式属性，或单击“确定”。
||||||三.定义 CSS 样式背景属性
使用“CSS 样式定义”对话框的“背景”类别可以定义 CSS 样式的背景设置。可以对网页中的任何元素应用背景属性。例如，创建一个样式，将背景颜色或背景图像添加到任何页面元素中，比如在文本、表格、页面等的后面。还可以设置背景图像的位置。
定义背景设置：
在“CSS 样式定义”对话框中，选择“背景”（如下图），然后设置所需的样式属性。
如果以下属性不设置可以保持为空。
背景颜色：设置元素的背景颜色。两种浏览器都支持背景颜色属性。
背景图像：设置元素的背景图像。两种浏览器都支持背景图像属性。
重复：定义是否重复以及如何重复背景图像。两种浏览器都支持重复属性。
“不重复”在元素开始处显示一次图像。
“重复”在元素的后面水平和垂直平铺图像。
“横向重复”和“纵向重复”分别显示图像水平带区和垂直带区。图像被剪辑以适合元素的边界。
附件：确定背景图像是固定在它的原始位置还是随内容一起滚动。注意，某些浏览器可能将“固定”选项视为“滚动”。注意：Internet Explorer 支持该选项，但 Netscape Navigator 不支持。
水平位置：和垂直位置指定背景图像相对于元素的初始位置。这可以用于将背景图像与页面中心垂直和水平对齐。如果附件属性为“固定”，则位置相对于“文档”窗口而不是元素。注意：Internet Explorer支持该属性，但 Netscape Navigator 不支持。
设置完这些选项后，在面板左侧选择另一个 CSS 类别以设置其它的样式属性，或单击“确定”。
||||||四.定义 CSS 样式区块属性
使用“CSS 样式定义”对话框的“区块”类别可以定义标签和属性的间距和对齐设置。
定义区块设置：在“CSS样式定义”对话框中，选择“区块”（如下图），然后设置所需的样式属性。
如果不设置属性可以保持为空。
单词间距：设置单词的间距。若要设置特定的值，请在弹出式菜单中选择“值”，然后输入一个数值。在第二个弹出式菜单中，选择度量单位。
注意：可以指定负值，但显示取决于浏览器。Dreamweaver 不在“文档”窗口中显示该属性。
字母间距：增加或减小字母或字符的间距。若要减少字符间距，请指定一个负值（例如 -4）。字母间距设置覆盖对齐的文本设置。
垂直对齐：指定应用它的元素的垂直对齐方式。仅当应用于 <img> 标签时，Dreamweaver 才在“文档”窗口中显示该属性。
文本对齐：设置元素中的文本对齐方式。两种浏览器都支持“文本对齐”属性。
文本缩进：指定第一行文本缩进的程度。可以使用负值创建凸出，但显示取决于浏览器。仅当标签应用于块级元素时，Dreamweaver 才在“文档”窗口中显示该属性。两种浏览器都支持“文本缩进”属性。
空格：确定如何处理元素中的空白。从下面三个选项中选择：“正常”收缩空白；“保留”的处理方式即保留所有空白，包括空格、制表符和回车；“不换行”指定仅当遇到 <br> 标签时文本才换行。Dreamweaver 不在“文档”窗口中显示该属性。
显示：指定是否显示以及如何显示元素。“无”关闭它被指定给的元素的显示。
设置完这些选项后，在面板左侧选择另一个 CSS 类别以设置其它的样式属性，或单击“确定”。
||||||五.定义 CSS 样式方框属性
使用“CSS 样式定义”对话框的方框（又称盒子）类别可以为控制元素在页面上的放置方式的标签和属性定义设置。可以在应用填充和边距设置时将设置应用于元素的各个边，也可以使用“全部相同”设置将相同的设置应用于元素的所有边。
定义元素在页面上的放置方式：在“CSS 样式定义”对话框中，选择“方框”（如下图），然后设置所需的样式属性。
如果不设置属性可以保持为空。
宽和高：设置元素的宽度和高度。宽和高定义的对象多为图片，表格，层等。
浮动：设置元素浮动方式（如文本、层、表格等）。其它元素按通常的方式环绕在浮动元素的周围。
清除：不允许元素的浮动。左对齐：表示不允许左边有浮动对象。右对齐：表示不允许右边有浮动对象。两者：表示允许两边都可以有浮动对象。无：不允许有浮动对象。两种浏览器都支持“清除”属性。
填充：指定元素内容与元素边框（如果没有边框，则为边距）之间的间距。取消选择“全部相同”选项可设置元素各个边的填充。
全部相同：将相同的填充属性设置为它应用于的元素的“上”、“右”、“下”和“左”侧。
边界：指定一个元素的边框（如果没有边框，则为填充）与另一个元素之间的间距。仅当应用于块级元素（段落、标题、列表等）时，DW MX 2004才在“文档”窗口中显示该属性。取消选择“全部相同”可设置元素各个边的边距。
全部相同：将相同的边距属性设置为它应用于的元素的“上”、“右”、“下”和“左”侧。
设置完这些选项后，在面板左侧选择另一个 CSS 类别以设置其它的样式属性，或单击“确定”。
||||||六.定义 CSS 样式边框属性
使用“CSS 样式定义”对话框的“边框”类别可以定义元素周围的边框的设置（如宽度、颜色和样式）。
设置边框样式：在“CSS 样式定义”对话框中，选择“边框”（如下图），然后设置所需的样式属性。
请注意：下列任意属性如果您认为不重要可以保留为空。
样式：设置边框的样式外观。样式的显示方式取决于浏览器。DW MX 2004在“文档”窗口中将所有样式呈现为实线。两种浏览器都支持样式属性。取消选择“全部相同”可设置元素各个边的边框样式。
全部相同：将相同的边框样式属性设置应用于的元素的“上”、“右”、“下”和“左”侧。
宽度：设置元素边框的粗细。两种浏览器都支持“宽度”属性。取消选择“全部相同”可设置元素各个边的边框宽度。
全部相同：将相同的边框宽度设置应用于的元素的“上”、“右”、“下”和“左”侧。
颜色：设置边框的颜色。可以分别设置每个边的颜色，但显示取决于浏览器。取消选择“全部相同”可设置元素各个边的边框颜色。全部相同：将相同的边框颜色设置应用于的元素的“上”、“右”、“下”和“左”侧。
设置完这些选项后，在面板左侧选择另一个 CSS 类别以设置其它的样式属性，或单击“确定”。
||||||七.定义 CSS 样式列表属性
“CSS 样式定义”对话框的“列表”类别为列表标签定义列表设置（如项目符号大小和类型）。
定义列表样式：在“CSS 样式定义”对话框中，选择“列表”（如下图），然后选择所需的样式属性。
如果不设置属性可以保持为空。
类型：设置项目符号或编号的外观。两种浏览器都支持“类型”。
项目符号图像：可以为项目符号指定自定义图像。单击“浏览”选择图像或键入图像的路径。
位置：设置列表项文本是否换行和缩进以及文本是否换行到左边距。
设置完这些选项后，在面板左侧选择另一个 CSS 类别以设置其它的样式属性，或单击“确定”。
||||||八.定义 CSS 样式定位属性
“定位”样式属性使用“层”首选参数中定义层的默认标签，将标签或所选文本块更改为新层。
设置层定位属性：在“CSS 样式定义”对话框中，选择“定位”（如下图），然后设置所需的样式属性。
如果不设置属性可以保持为空。
类型：确定浏览器应如何来定位层。
绝对：使用“定位”框中输入的坐标（相对于页面左上角）来放置层。
相对：使用“定位”框中输入的坐标（相对于对象在文档的文本中的位置）来放置层。该选项不显示在“文档”窗口中。
静态：将层放在它在文本中的位置。
显示：确定层的初始显示条件。如果不指定可见性属性，则默认情况下大多数浏览器都继承父级的值。选择以下可见性选项之一：
继承：继承层父级的可见性属性。如果层没有父级，则它将是可见的。
可见：显示该层的内容，而不管父级的值是什么。
隐藏：隐藏这些层的内容，而不管父级的值是什么。
Z 轴：确定层的堆叠顺序。编号较高的层显示在编号较低的层的上面。值可以为正，也可以为负。（注：使用“层”面板更改层的堆叠顺序更容易。）
溢出（仅限于 CSS 层）：确定在层的内容超出它的大小时将发生的情况。这些属性控制如何处理此扩展，如下所示：
可见：增加层的大小，使它的所有内容均可见。层向右下方扩展。
隐藏：保持层的大小并剪辑任何超出的内容。不提供任何滚动条。
滚动：在层中添加滚动条，不论内容是否超出层的大小。专门提供滚动条可避免滚动条在动态环境中出现和消失所引起的混乱。该选项不显示在“文档”窗口中，并且仅适用于支持滚动条的浏览器。注意：Internet Explorer 和 Netscape Navigator 6 支持此属性。
自动：使滚动条仅在层的内容超出它的边界时才出现。该选项不显示在“文档”窗口中。
定位：指定层的位置和大小。浏览器如何解释位置取决于“类型”设置。如果层的内容超出指定的大小，则大小值被覆盖。
位置和大小的默认单位是像素。对于 CSS 层，还可以指定下列单位：pc（十二点活字）、pt（点）、in（英寸）、mm（毫米）、cm（厘米）、(ems)、(exs) 或 %（父级值的百分比）。缩写必须紧跟在值之后，中间不留空格：例如，3mm。
剪辑：定义层的可见部分。如果指定了剪辑区域，可以通过脚本语言（如 JavaScript）访问它，并操作属性以创建像擦除这样的特殊效果。通过使用“改变属性”行为可以设置这些擦除效果。
设置完这些选项后，在面板左侧选择另一个 CSS 类别以设置其它的样式属性，或单击“确定”。
||||||九.定义 CSS 样式扩展属性
“扩展”样式属性包括过滤器、分页和光标选项，它们中的大部分效果仅受 Internet Explorer 4.0 和更高版本的支持。
指定扩展属性：在“CSS 样式定义”对话框中，选择“扩展”（如下图），然后设置所需的样式属性。
分页：在打印期间在样式所控制的对象之前或者之后强行分页。选择要在弹出式菜单中设置的选项。此选项不受任何 4.0 版本浏览器的支持，但可能受未来的浏览器的支持。
光标：位于“视觉效果”下的“光标”选项，是光标显示属性设置。当指针位于样式所控制的对象上时改变指针图像。选择弹出式菜单（下图）进行设置。 它的详细列表和相关说明。
过滤器：又称 CSS滤镜， 对样式所控制的对象应用特殊效果。它把我们带入绚丽多姿的世界。正是有了滤镜属性，页面才变得更加漂亮。DW MX 2004 扩展类过滤器嵌入16项样式属性（如下图），您可以根据您的需要从“过滤器”弹出式菜单中选择并加以设置。
下图列
