引用:

                 
                                     欢迎您访问梦想视觉论坛
您目前的身份是游客，所以只能阅读部份内容，请注册 或者登录 ，谢谢！




现代网页制作离不开 CSS样式表技术，采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 用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 和 InternetExplorer 5.5 支持“空格”属性。
显示：指定是否显示以及如何显示元素。“无”关闭它被指定给的元素的显示。

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

方 框 属 性

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

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

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

宽和高：设置元素的宽度和高度。宽和高定义的对象多为图片，表格，层等。

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

清除：不允许元素的浮动。左对齐：表示不允许左边有浮动对象。右对齐：表示不允许右边有浮动对象。两者：表示允许两边都可以有浮动对象。无：不允许有浮动对象。两种浏览器都支持“清除”属性。
填充：指定元素内容与元素边框（如果没有边框，则为边距）之间的间距。取消选择“全部相同”选项可设置元素各个边的填充。
全部相同：将相同的填充属性设置为它应用于的元素的“上”、“右”、“下”和“左”侧。
边界：指定一个元素的边框（如果没有边框，则为填充）与另一个元素之间的间距。仅当应用于块级元素（段落、标题、列表等）时，DW MX 2004才在“文档”窗口中显示该属性。取消选择“全部相同”可设置元素各个边的边距。
全部相同：将相同的边距属性设置为它应用于的元素的“上”、“右”、“下”和“左”侧。

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

边 框 属 性

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

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

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

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

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

宽度：设置元素边框的粗细。两种浏览器都支持“宽度”属性。取消选择“全部相同”可设置元素各个边的边框宽度。
全部相同：将相同的边框宽度设置应用于的元素的“上”、“右”、“下”和“左”侧。

颜色：设置边框的颜色。可以分别设置每个边的颜色，但显示取决于浏览器。取消选择“全部相同”可设置元素各个边的边框颜色。全部相同：将相同的边框颜色设置应用于的元素的“上”、“右”、“下”和“左”侧。

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

列 表 属 性

【定义 CSS 样式列表属性】 “CSS 样式定义”对话框的“列表”类别为列表标签定义列表设置（如项目符号大小和类型）。

定义列表样式：
在“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滤镜， 对样式所控制的对象应用特殊效果。它把我们带入绚丽多姿的世界。正是有了滤镜属性，页面才变得更加漂亮。DW MX 2004 扩展类过滤器嵌入16项样式属性（如下图），您可以根据您的需要从“过滤器”弹出式菜单中选择并加以设置。




“Alpha”滤镜：这个名字，在Flash和Photoshop经常见到。它们的作用基本类似，就是把一个目标元素与背景混合。你可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度。
BlendTrans滤镜：它的功能也比较单一，就是产生一种精细的淡入淡出的效果。
Blur滤镜：把它加载到文字上，产生风吹模糊的效果，类似立体字，这将为你在网页上制作立体字标题带来了方便。也可以把Blur滤镜加载到图片上，能达到用图象处理软件制作的效果。
“DropShadow”顾名思义就是添加对象的阴影效果。它的实际效果看上去就象是原来的对象离开了页面，然后在页面上显示出该对象的投影。
CSS的无参数滤镜共有六个（FlipH、FlipV、Invert、Xray、Gray和Light），虽然它们没有参数，相对来讲，灵活性要差点，但它们用起来更方便，效果也相当明显。用它们可以使文字或图片翻转、获得图片的“底片”效果，甚至可以制作图片的“X光片”效果。
glow滤镜：使对象的边缘就产生类似发光的效果，glow”滤镜制作这种效果操作非常简便。
Mask滤镜：可以为网页上的元件对象作出一个矩形遮罩效果。
wave滤镜：它的作用是把对象按照垂直的波形样式扭曲的特殊效果。
Light滤镜：能产生一个模拟光源的效果，配合使用一些简单的Javascrpt，使对象产生奇特光照的效果。
RevealTrans动态滤镜：是一个神奇的滤镜，它能产生23种动态效果，还能在23种动态效果中随机抽用其中的一种。用它来进行网页之间的动态切换，非常方便。