现代网页制作离不开 CSS样式表技术，采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 用CSS不仅可以做出美观工整令浏览者赏心悦目的网页，还能给网页添加许多神奇的效果。

    创建CSS样式表的过程，就是对各种CSS属性的设置过程，所以了解和掌握属性设置非常重要。在DW MX 2004的CSS样式里包含了W3C规范定义的所有CSS1的属性，把这些属性分为：类型、背景、区块、方框、边框、列表、定位、扩展等八个部分，如下图：
    选择定义样式的位置：

DW MX 2004 实现CSS属性设置功能是完全可视化的，无需编写代码。下面我们分别详细讲解。 为了便于理解，从开始创建新的 CSS 样式表说起：

注：您需对 DW MX 2004 程序初步了解，并打开它对照本教程进行学习。如果您对 DW MX 2004 尚不熟悉，请浏览【 DW MX 2004 简体中文版入门教程】。

    【创建新的 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:2em}是指文字大小为原来的2倍。 ex：当前字母“x”的高度，一般为字体尺寸的一半。 %：是以当前文本的百分比定义尺寸。例如：{ font-size:300%}是指文字大小为原来的3倍。

  两种浏览器都支持大小属性。

  • 样式：将“正常”、“斜体”或“偏斜体”指定为字体样式。默认设置是“正常”。两种浏览器都支持样式属性。
  • 行高：设置文本所在行的高度。选择“正常”自动计算字体大小的行高，或输入一个确切的值并选择一种度量单位。比较直观的写法用百分比，例如180%是指行高等于文字大小的1.8倍。相对应的CSS属性是”line-height”。 两种浏览器都支持行高属性。
  • 修饰：向文本中添加下划线、上划线或删除线，或使文本闪烁。正常文本的默认设置是“无”。链接的默认设置是“下划线”。将链接设置设为无时，可以通过定义一个特殊的类删除链接中的下划线。这些效果可以同时存在，将效果前的复选框选定即可。相对应的CSS属性是”text-decoration”。 两种浏览器都支持修饰属性。
  • 粗细：对字体应用特定或相对的粗体量。“正常”等于 400；“粗体”等于 700。相对应的CSS属性是”font-weight”。两种浏览器都支持粗细属性。
  • 变量：设置文本的小型大写字母变量。DW MX 2004不在“文档”窗口中显示该属性。Internet Explorer 支持变量属性，但 Netscape Navigator 不支持。
  • 大小写：将选定内容中的每个单词的首字母大写或将文本设置为全部大写或小写。两种浏览器都支持大小写属性。
  • 颜色：设置文本颜色。两种浏览器都支持颜色属性。

  设置完这些选项后，在面板左侧选择另一个 CSS 类别以设置其它的样式属性，或单击“确定”。
  
  

  背 景 属 性

  【定义 CSS 样式背景属性】使用“CSS 样式定义”对话框的“背景”类别可以定义 CSS 样式的背景设置。可以对网页中的任何元素应用背景属性。例如，创建一个样式，将背景颜色或背景图像添加到任何页面元素中，比如在文本、表格、页面等的后面。还可以设置背景图像的位置。

  提示：本页背景图片固定，是【定义 CSS 样式背景属性】的效果。

  定义背景设置：
      在“CSS 样式定义”对话框中，选择“背景”（如下图），然后设置所需的样式属性。

   

  请注意：下列任意属性如果您认为不重要可以保留为空。

  背景颜色：设置元素的背景颜色。两种浏览器都支持背景颜色属性。

  背景图像：设置元素的背景图像。两种浏览器都支持背景图像属性。

  重复：定义是否重复以及如何重复背景图像。两种浏览器都支持重复属性。

  • “不重复”在元素开始处显示一次图像。
    
  • “重复”在元素的后面水平和垂直平铺图像。
    
  • “横向重复”和“纵向重复”分别显示图像水平带区和垂直带区。图像被剪辑以适合元素的边界。

  附件：确定背景图像是固定在它的原始位置还是随内容一起滚动。注意，某些浏览器可能将“固定”选项视为“滚动”。Internet Explorer 支持该选项，但 Netscape Navigator 不支持。

  水平位置：和垂直位置指定背景图像相对于元素的初始位置。这可以用于将背景图像与页面中心垂直和水平对齐。如果附件属性为“固定”，则位置相对于“文档”窗口而不是元素。Internet Explorer支持该属性，但 Netscape Navigator 不支持。

  设置完这些选项后，在面板左侧选择另一个 CSS 类别以设置其它的样式属性，或单击“确定”。
  

  区 块 属 性

  【定义 CSS 样式区块属性】使用“CSS 样式定义”对话框的“区块”类别可以定义标签和属性的间距和对齐设置。下列两组表格为文本定义区块属性前后对比：

  原文本未定义区块属性

  【定义CSS样式区块属性】

  
  

  定义区块属性后效果

  【定义CSS样式区块属性】

  
  

  原文本未定义区块

  使用“样式定义”对话框的“区块”类别可以定义标签和属性的间距和对齐设置。此为区块定义演示。字间的空格可不是用键盘敲出来的。

  
  

  定义区块后效果（参数见下图）

  使用“样式定义”对话框的“区块”类别可以定义标签和属性的间距和对齐设置。此为区块定义演示。字间的空格可不是用键盘敲出来的。

  定义区块设置：在“CSS样式定义”对话框中，选择“区块”（如下图），然后设置所需的样式属性。
  

  

  请注意：下列任意属性如果您认为不重要可以保留为空。

  单词间距：设置单词的间距。若要设置特定的值，请在弹出式菜单中选择“值”，然后输入一个数值。在第二个弹出式菜单中，选择度量单位。

  注意：可以指定负值，但显示取决于浏览器。Dreamweaver 不在“文档”窗口中显示该属性。

  字母间距：增加或减小字母或字符的间距。若要减少字符间距，请指定一个负值（例如 -4）。字母间距设置覆盖对齐的文本设置。Internet Explorer 4 和更高版本以及 Netscape Navigator 6 支持“字母间距”属性。

  垂直对齐：指定应用它的元素的垂直对齐方式。仅当应用于 <img> 标签时，Dreamweaver 才在“文档”窗口中显示该属性。

  文本对齐：设置元素中的文本对齐方式。两种浏览器都支持“文本对齐”属性。

  文本缩进：指定第一行文本缩进的程度。可以使用负值创建凸出，但显示取决于浏览器。仅当标签应用于块级元素时，Dreamweaver 才在“文档”窗口中显示该属性。两种浏览器都支持“文本缩进”属性。

  空格：确定如何处理元素中的空白。从下面三个选项中选择：“正常”收缩空白；“保留”的处理方式即保留所有空白，包括空格、制表符和回车；“不换行”指定仅当遇到 br 标签时文本才换行。Dreamweaver 不在“文档”窗口中显示该属性。Netscape Navigator 和 Internet Explorer 5.5 支持“空格”属性。

  显示：指定是否显示以及如何显示元素。“无”关闭它被指定给的元素的显示。

  设置完这些选项后，在面板左侧选择另一个 CSS 类别以设置其它的样式属性，或单击“确定”。
  

  方 框 属 性

  【定义 CSS 样式方框属性】使用“CSS 样式定义”对话框的方框（又称盒子）类别可以为控制元素在页面上的放置方式的标签和属性定义设置。可以在应用填充和边距设置时将设置应用于元素的各个边，也可以使用“全部相同”设置将相同的设置应用于元素的所有边。

  定义元素在页面上的放置方式：在“CSS 样式定义”对话框中，选择“方框”（如下图），然后设置所需的样式属性。
  

  

  请注意：下列任意属性如果您认为不重要可以保留为空。
  
      宽和高：设置元素的宽度和高度。宽和高定义的对象多为图片，表格，层等。

  浮动：设置元素浮动方式（如文本、层、表格等）。其它元素按通常的方式环绕在浮动元素的周围。  两种浏览器都支持浮动属性。     这是设置浮动效果的演示。定义表格浮动（左对齐），文本自动排列在该表格的右侧。

  清除：不允许元素的浮动。左对齐：表示不允许左边有浮动对象。右对齐：表示不允许右边有浮动对象。两者：表示允许两边都可以有浮动对象。无：不允许有浮动对象。两种浏览器都支持“清除”属性。
     填充：指定元素内容与元素边框（如果没有边框，则为边距）之间的间距。取消选择“全部相同”选项可设置元素各个边的填充。

  全部相同：将相同的填充属性设置为它应用于的元素的“上”、“右”、“下”和“左”侧。

  边界：指定一个元素的边框（如果没有边框，则为填充）与另一个元素之间的间距。仅当应用于块级元素（段落、标题、列表等）时，DW MX 2004才在“文档”窗口中显示该属性。取消选择“全部相同”可设置元素各个边的边距。

  全部相同：将相同的边距属性设置为它应用于的元素的“上”、“右”、“下”和“左”侧。

  设置完这些选项后，在面板左侧选择另一个 CSS 类别以设置其它的样式属性，或单击“确定”。
  

  边 框 属 性

  【定义 CSS 样式边框属性】使用“CSS 样式定义”对话框的“边框”类别可以定义元素周围的边框的设置（如宽度、颜色和样式）。

  提示：本页为边框进行了设置 （样式：点划线  宽度：2px  颜色：#FF0000）

  设置边框样式：
      在“CSS 样式定义”对话框中，选择“边框”（如下图），然后设置所需的样式属性。

  

  请注意：下列任意属性如果您认为不重要可以保留为空。

     样式：设置边框的样式外观。样式的显示方式取决于浏览器。DW MX 2004在“文档”窗口中将所有样式呈现为实线。两种浏览器都支持样式属性。取消选择“全部相同”可设置元素各个边的边框样式。
      全部相同：将相同的边框样式属性设置应用于的元素的“上”、“右”、“下”和“左”侧。
  
     宽度：设置元素边框的粗细。两种浏览器都支持“宽度”属性。取消选择“全部相同”可设置元素各个边的边框宽度。
      全部相同：将相同的边框宽度设置应用于的元素的“上”、“右”、“下”和“左”侧。
  
     颜色：设置边框的颜色。可以分别设置每个边的颜色，但显示取决于浏览器。取消选择“全部相同”可设置元素各个边的边框颜色。全部相同：将相同的边框颜色设置应用于的元素的“上”、“右”、“下”和“左”侧。

     设置完这些选项后，在面板左侧选择另一个 CSS 类别以设置其它的样式属性，或单击“确定”。