当前位置： →
作者：不详&&来源：本站整理&&发布时间： 07:19:01
DW MX 2004 CSS 属性详解
现代网页制作离不开 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 类别以设置其它的样式属性，或单击“确定”。
列 表 属 性
【定义 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。
剪辑：定义层的可见部分。如果指定了剪辑区域，可以通过脚本语言（如 Java&#115 cript）访问它，并操作属性以创建像擦除这样的特殊效果。通过使用“改变属性”行为可以设置这些擦除效果。
设置完这些选项后，在面板左侧选择另一个 CSS 类别以设置其它的样式属性，或单击“确定”。
扩 展 属 性
【定义 CSS 样式扩展属性】“扩展”样式属性包括过滤器、分页和光标选项，它们中的大部分效果仅受 Internet Explorer 4.0 和更高版本的支持。
指定扩展属性：
&&& 在“CSS 样式定义”对话框中，选择“扩展”（如下图），然后设置所需的样式属性。
请注意：下列任意属性如果您认为不重要可以保留为空。
分页：在打印期间在样式所控制的对象之前或者之后强行分页。选择要在弹出式菜单中设置的选项。此选项不受任何 4.0 版本浏览器的支持，但可能受未来的浏览器的支持。
精确定位“＋”字
文本“I”形
箭头朝右方
箭头朝右上方
箭头朝上方
箭头朝左上方
箭头朝左方
箭头朝左下方
箭头朝下方
箭头朝右下方
自动 按照默认状态改变
光标：位于“视觉效果”下的“光标”选项，是光标显示属性设置。当指针位于样式所控制的对象上时改变指针图像。选择弹出式菜单（右图）进行设置。 （左图）是它的详细列表和相关说明。
过滤器：又称 CSS滤镜，
对样式所控制的对象应用特殊效果。它把我们带入绚丽多姿的世界。正是有了滤镜属性，页面才变得更加漂亮。
从“过滤器”弹出式菜单中选择一种效果并视具体要求加以设置。各种 CSS 滤镜属性的详细介绍请从导航条选择“滤镜属性”按钮浏览。
滤 镜 概 述
过滤器：又称 CSS滤镜， 对样式所控制的对象应用特殊效果。它把我们带入绚丽多姿的世界。正是有了滤镜属性，页面才变得更加漂亮。DW MX 2004 扩展类过滤器嵌入16项样式属性（如下图），您可以根据您的需要从“过滤器”弹出式菜单中选择并加以设置。
透明的渐进效果
BlendTrans
淡入淡出效果
风吹模糊的效果
指定颜色透明
DropShadow
边缘光晕效果
彩色图片变灰度图
底片的效果
模拟光源效果
矩形遮罩效果
RevealTrans
轮廓阴影效果
波浪扭曲变形效果
X光照片效果
左表列出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种动态效果中随机抽用其中的一种。用它来进行网页之间的动态切换，非常方便。
ALPHA 属性
【Alpha滤镜属性】这个名字，在Flash和Photoshop经常见到。它们的作用基本类似，就是把一个目标元素与背景混合。你可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度。通过指定坐标，可以指定点、线、面的透明度。由于“Alpha”滤镜的参数多，我们先来看一下下边的表格：
效 果 说 明
不透明的程度，百分比。
取值0～100
FinishOpacity
可以制作出透明渐变的效果。
取值0～100
指定渐变的显示形状。
0：没有渐变；1：线性渐变；
2：圆形渐变；3：矩形辐射。
渐变开始的 X 坐标值
渐变开始的 Y 坐标值
渐变结束的 X 坐标值
渐变结束的 Y 坐标值
“opacity”：代表透明度程度。范围是从0~100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。
“finishopacity”：是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。
“style”：指定了透明区域的形状特征。其中0代表统一形状、1代表线形、2代表放射状、3代表长方形。
“StartX”和“StartY”：代表渐变透明效果的开始X和Y坐标。
“FinishX”和“FinishY”：代表渐变透明效果结束X和Y坐标。
请看下面的演示：
Alpha 属性值：　　
Alpha(Opacity=50, FinishOpacity=100, Style=0, StartX=0, StartY=0, FinishX=100, FinishY=100)
Alpha(Opacity=10, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=100)
Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=0, StartY=0, FinishX=100, FinishY=100)
Alpha(Opacity=10, FinishOpacity=100, Style=3, StartX=0, StartY=0, FinishX=100, FinishY=100)
&&& Style 加载在单元格&td&上显示效果如下图：
Style加载在图片上显示效果如下图：　
Style加载在文字上显示效果如下图：
Alpha(Opacity=30,Style=0)
这是文字透明效果演示
BLENDTRANS 属性
【BlendTrans属性】淡入淡出的效果滤镜，能产生极精细的图片转换效果。
制作说明：
BlendTrans滤镜功能也比较单一，只有一个参数：Duration（变换时间）。需要借助于Java&#115 cript来调用它的方法来实现转换功能。使用BlendTrans滤镜，首先您要准备几张宽高尺寸相同的图片，并分别命名，保存在图像目录下，如：images/*.jpg。如果用4幅的话，分别取名为：blen1.jpg； blen2.jpg； blen3.jpg；blen4.jpg。（用其它名称也可以，但下边的java&#115 cript设置要相应调整。）
　　 制作方法：
　　 1、制作一个BlendTrans滤镜，取名为“myblen"，Duration设置为“3"（即转换时间为3秒），滤镜设置好后，在网页源代码的& head &与& /head &之间将有下面这样一段代码：
& style type="text/css" &
.myblen { filter:blendTrans(Duration=3)
& /style &
&2、插入第一张图片（本例图片为570X150像素），在图片的属性面板上给图片加个名称：myimg
　　 3、把BlendTrans滤镜加载到图片上，这时图片的“img"标记的代码是这样的：&img src=http://www.ddvip.net/web/dw/index5/&images/blen1.jpg& name=&myimg& width=&570& height=&150& class=&myblen& id=&myimg&&；
　　 4、在网页的源代码& head &与& /head &之间插入下面这段Java&#115 cript程序：
&&#115 cript language=&java&#115 cript& &
function img(len)
this.length=
imgname=new img(4);
imgname[0]=http://www.ddvip.net/web/dw/index5/&images/blen1.jpg&;
imgname[1]=&images/blen2.jpg&;
imgname[2]=&images/blen3.jpg&;
imgname[3]=&images/blen4.jpg&;
function play()
myimg.filters[0].apply();
myimg.src=imgname[i];
myimg.filters[0].play();
mytimeout=setTimeout(&play()&,6000);
&/&#115 cript &
5、在网页源代码的& body &加入这样的一句代码：。
设置完成，点F12预览效果。
?上一篇教程：
?下一篇教程：
& &评论摘要(共 0 条，得分 0 分，平均 0 分)
按字母检索
按声母检索
版权所有:& 备案编号：豫ICP备号 “法律声明”
Copyright (C)2004 - 2009
Port. All rights reserved.当前位置：
&&&&&&&&&&DW中CSS属性详解
DW中CSS属性详解
作者：未知 来源：5D多媒体
在Dreamweaver的CSS样式里包含了W3C规范定义的所有CSS1的属性，Dreamweaver把这些属性分为Type（类型）、Background（背景）、Block（块）、Box（盒子）、Border（边框）、 List（列表）、Positioning（定位）、Extensions（扩展）八个部分，如下图，下面我们分别详细讲解。
1.　　　　Type（类型）
Type面板主要是对文字的字体，大小，颜色，效果等基本样式进行设置。设置时，我们只对要改变的属性进行设置，没有必要改变的属性就空着。
注意：属性名带*号的是指样式效果不能在编辑文档时显示，要用浏览器打开才能看到效果。
Font：设置字体系列。什么叫字体系列呢？是指对文字设定几个字体，当遇到第一个字体不能显示的文字时会自动用系列中的第二个字体或后面的字体显示。相对应的CSS属性是”font-family”。
注意：Dreamweaver4已经内置设定了6个系列的英文字体，一般英文字体我们用“Verdana, Arial, Helvetica, sans-serif”这个系列比较好看。如果不用这些字体系列，你就需要自己编辑字体系列，你可以通过下拉框最下面的“Edit Font List”来创建新的字体系列，也可以直接手动在下拉框里写字体名，字体之间用逗号隔开。中文网页默认字体是宋体，一般就空着不要选取任何字体。
Size：定义文字的大小。你可以通过选取数字和度量单位来选择具体的字体大小，或者你也可以选择一个相对的字体大小。最好使用Pixels作为单位，这样不会在浏览器中文本变形。一般小字体用比较标准的12px。相对应的CSS属性是”font-size”。
注意：CSS中长度的单位分绝对长度单位和相对长度单位，一般我们常用的绝对长度单位有：
px：（象素）根据显示器的分辨率来确定长度。
pt：（字号）根据windows系统定义的字号大小来确定长度。
mm、cn、in：（毫米、厘米、英寸）根据显示的实际尺寸来确定长度。此类单位不随显示器的分辨率改变而改变。
相对长度单位有：
em：当前文本的尺寸。例如：{ font-size:2em}是指文字大小为原来的2倍。
ex：当前字母“x”的高度，一般为字体尺寸的一半。
%：是以当前文本的百分比定义尺寸。例如：{ font-size:300%}是指文字大小为原来的3倍。
small、large：表示比当前小一个级别或大一个级别的尺寸。
Style：定义字体样式为Normal、Italic、或者Oblique。Italic和Oblique是斜体字体。默认设置为 Normal。相对应的CSS属性是”font-style”。
注意：Italic和Oblique都是斜体字体。而它们不同的是，Italic是斜体字，而Oblique是倾斜的文字，对于没有斜体的字体应该用Oblique。
Line Height：设置文本所在行的行高。默认为Normal，你也可以自己键入一个精确的数值并选取一个计量单位。比较直观的写法用百分比，例如140%是指行高等于文字大小的1.4倍。相对应的CSS属性是”line-height”。
Decoration：在文本中添加underline（下划线）、overline（上划线）、line-through（中划线）、blink（闪烁效果）。这些效果可以同时存在，将效果前的复选框选定即可。相对应的CSS属性是”text-decoration”。
注意：链接的默认设置是Underline，我们可以通过选none去除下划线。Blink（闪烁效果）只在NC浏览器里可以看到。
Weight：给字体指定粗体字的磅值。Normal等同于400；Bold等同于700。设粗体字一般用bold。相对应的CSS属性是”font-weight”。
Variant：允许你选取字体的变种，选small-caps（小型大写字母）时，此样式区域内所有字母大写。相对应的CSS属性是”font-variant”。
Case：将选区中每个单词的第一个字母转为大写，或者令单词全部大写或全部小写。参数：capitalize（单词首字母大写）、uppercase（转换成大写）、lowercase（转换成小写）、none（不转换）。相对应的CSS属性是” text-transform”。
Color：定义文字颜色。相对应的CSS属性是” color”。
注意：CSS中颜色的值有三种表示方法：
l　　　　#RRGGBB格式，是由红绿蓝三种颜色的值组合，每种颜色的值为“00 – FF”的两位十六进制正整数。例如：#FF0000表示红色，#FFFF00表示黄色。
l　　　　rgb(R,G,B)格式，RGB为三色的值，取0~255，例如：rgb(255,0,0)表示红色，rgb(255,255,0)表示黄色。
l　　　　用颜色名称。CSS可以使用已经定义好的颜色名称。例如：red表示红色，yellow表示黄色。
2.　　　　Background（背景）
Background面板主要是对元素的背景进行设置，包括背景颜色、背景图象、背景图象的控制。一般是对BODY（页面）、TABLE（表格）、DIV（区域）的设置。
Background Color：设置元素的背景色。相对应的CSS属性是”background-color”。
Background Image：设置元素的背景图像。相对应的CSS属性是”background-image”。
Repeat：确定背景图像是否以及如何重复。No Repeat：在元素的开头显示一遍图像。Repeat：在元素的背景部分水平和垂直方向平铺图像。Repeat-x and Repeat-y：分别在水平和垂直方向重复显示，默认为Repeat。相对应的CSS属性是”background-repeat”。
注意：如果定义的元素的BODY，可以控制页面背景是否重复。
Attachment：固定背景图像或者跟随内容滚动。参数fixed表示固定背景，scroll表示跟随内容滚动的背景。相对应的CSS属性是”background-attachment”。
注意：如果定义的元素的BODY，可以使页面背景固定。
Horizontal：指定背景图像的水平位置。可以指定为left（左边），center（居中），right（右边）；也可以指定数值，如20px是指背景距离左边20象素。相对应的CSS属性是” background-position”。
Vertical：指定背景图像的垂直位置。可以指定为top（顶部），center（居中），bottom（底部）；也可以指定数值。相对应的CSS属性是” background-position”。
注意：水平位置和垂直位置使用的是同一个CSS属性，在设置时要注意。
3.　　　　Block（区块）
Block面板主要是设置对象文本的文字间距、对齐方式、上标、下标、排列方式、首行缩进等。
Word Spacing：设置单词之间的间距。可以设置负值。相对应的CSS属性是” word-spacing”。
注意：一般情况下IE不支持此属性，仅在MAC平台上的IE4+可用。
Letter Spacing：设置字符之间的间距。可以指定负值。因为中文也是字符，这个参数可以设置文字间的间距。相对应的CSS属性是” letter-spacing”。
Vertical Align：指定元素的垂直对齐方式。可以指定sub（下标）、super（上标）、top（与顶端对齐）、middle（居中）、bottom（与底端对齐）……。相对应的CSS属性是” vertical-align”。
Text Align：设置文本的排列方式。Left（左对齐）、right（右对齐）、center（居中）、justify（两端对齐）。相对应的CSS属性是”text-align”。
Text Indent：设置文本第一行的缩进值。负值用于将文本第一行向外拉。要在每段前空两格，可设置为2em，因为em是当前字体尺寸，2em就是两个字的大小。相对应的CSS属性是”text-indent”。
Whitespace：设置如何处理元素内的空白符。有三个选项可选：Normal 会将空白符全部压缩；Pre 则会如同处理 pre 标签内的文本一样处理这些空白符（也就是说，所有的空白符，包括空格，标签，回车，等都会得以保留）；Nowrap 指定文本只有遇到 br 标签时才换行。相对应的CSS属性是”white-space”。
4.　　　　Box（盒子）
Box面板主要设置对象的边界、间距、高度、宽度、和漂浮方式等。
Width：定义元素的宽。相对应的CSS属性是”width”。
Height：定义元素的高。相对应的CSS属性是”height”。
注意：宽和高定义的对象多为图片，表格，层等。
Float：定义元素的漂浮方式。left 表示对象浮在左边、right表示对象浮在右边、none 表示对象不浮动。相对应的CSS属性是”float”。
Clear：不允许元素的漂浮。left表示不允许左边有浮动对象、right表示不允许右边有浮动对象、none表示允许两边都可以有浮动对象、both不允许有浮动对象。相对应的CSS属性是”clear”。
Padding：定义元素内容与其边框的空距（如果元素没有边框就是指页边的空白）。可以分别设置top（上补白）、right（右补白）、bottom（下补白）、left（左补白）的值。相对应的CSS属性分别是” padding- padding- padding- padding-left”。
Margin：定义元素的边框与其他元素之间的距离（如果没有边框就是指内容之间的距离）。可以分别设置top（上边界）、right（右边界）、bottom（下边界）、left（左边界）的值。相对应的CSS属性分别是” margin- margin- margin- margin-left”。
下面是补白、边框、边界之间的关系图：
5.　　　　Border（边框）
Border面板可以设置对象边框的宽度、颜色及样式。
Width：设置元素边的宽度。可以分别设定Top（上边宽）、Right（右边宽）、Bottom（下边宽）、Left（左边宽）的值。相对应的CSS属性分别是” border- border- border- border-left”。
Color：设置边框的颜色。你可以分别对每条边设置颜色。相对应的CSS属性分别是”border- border-top- border-right- border-bottom- border-left-color”。
注意：我们可以通过设置不同的颜色做出亮边和暗边的效果，这样元素看起来是立体的。
Style：设置边框样式。可以设置为none（无边框）、dotted（点线）、dashed（虚线）、solid（实线）、double（双线）、groove（凹槽）、ridge（凸槽）、inset（凹边）、outset（凸边）等边框样式。相对应的CSS属性是”border-style”。
注意：dotted（点线）、dashed（虚线）必须要IE5.5以上或者MAC平台支持，否则效果为实线。
6.　　　　List（列表）
List面板可以设置列表项样式、列表项图片、和位置。
Type：设置列表项所使用的预设标记。可以设置的样式有：disc（实心圆）、circle（空心圆）、square（方块）、decimal（阿拉伯数字）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）、lower-alpha（小写英文字母）、upper-alpha（大写英文字母）、none（无项目符号）。相对应的CSS属性是”list-style-type”。
Bullet Image：设置列表项的图像。值为图象的URL地址或路径。 相对应的CSS属性是”list-style-image”。
Position：设置列表项在文本内还是在文本外。Inside：列表项目标记放置在文本以内，Outside：列表项目标记放置在文本以外。相对应的CSS属性是”list-style-position”。
7.　　　　Positioning（定位）
Positioning面板就相当于对象放在一个层里来定位，它相当于HTML的DIV标记。你可以把定义看作为一个CSS定义的层。
Type：设定对象的定位方式。有三种方式：Absolute（绝对定位）、Relative（相对定位）、Static（无特殊定位）。相对应的CSS属性是”position”。
Visibility：设定对象定位层的最初显示状态。有三种状态：Inherit（继承父层的显示属性）、Visible（对象可视）、Hidden隐藏对象。相对应的CSS属性是”visibility”。
Z-Index：设置对象的层叠顺序。编号较大的层会显示在编号较小的层上边。变量值可以是正值也可以是负值。相对应的CSS属性是”z-index”。
Overflow：设置如果层的内容超出了层的大小时如何处理。有四种处理方式：visible，增加层的大小，从而将层的所有内容显示出来；hidden，保持层的大小不变，将超出层的内容剪裁掉；Scroll，总是显示滚动条；Auto，只有在内容超出层的边界时才显示滚动条。相对应的CSS属性是”overflow”。
Placement：设置对象定位层的位置和大小。可以分别设置left（左边定位）、top（顶部定位）、width（宽）、height（高）。相对应的CSS属性分别是” height”。
Clip：定义定位层的可视区域。区域外的部分为不可视区，为透明的。可以理解为在定位层上放一个矩形遮罩的效果。相对应的CSS属性是”clip”。
注意：此参数只要在绝对定位时有效。
注意：当Type里设定了绝对定位后，会为对象加上一个绝对定位的层。这个CSS创建的层同一般的层一样有属性面板，也显示在层管理面板中。你可以通过设置这个定位层的属性面板修改上述参数，不过在此属性面板里改动的值会作为内嵌样式加在对象标记后面，下图是定位层的属性面板：
8.　　　　Extensions（扩展）
Pagebreak：在打印的时候强迫在样式控制的对象前后换页。
Before：设置对象前出现的页分割符。设置为always时，始终在对象之前插入页分割符。相对应的CSS属性是”page-break-before”。
After：设置对象后出现的页分割符。设置为always时，始终在对象之后插入页分割符。相对应的CSS属性是”''&。
注意：以上IE5仅支持always值和空白值（null）。
Cursor：当鼠标滑过样式控制的对象时改变鼠标形状。可以设置为hand（手型）、crosshair（“十”型）、text （“I”型）、wait（等待）、default（默认）、help（帮助）、e-resize（东箭头）、ne-resize（东北箭头）、n-resize（北箭头）、nw-resize（西北箭头）、w-resize（西箭头）、sw-resize（西南箭头）、s-resize（南箭头）、se-resize（东南箭头）和auto（自动）。
Filter：在样式中加上滤镜特效。由于此属性内容比较多，我们将到下一章单独对滤镜介绍。
CSS提供了一些内置的多媒体滤镜特效，使用这种技术可以把可视化的滤镜和转换效果添加到一个标准的HTML元素上，例如图片、文本容器、以及其他一些对象。Dreamweaver4提供了16种滤镜可供选择，如下图：
下面，我们就来看看在Dreamweaver4里如何方便的使用这些CSS滤镜。
建立一个自定义样式“.filter”，在Filter下拉框里选Alpha滤镜，我们将“Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)”的Opacity参数设为50，后面的参数都删掉，如下图：
按OK后就建立了一个“.filter”的自定义样式，我们把这个样式应用到图片上，图片就是半透明的了。如果把这个样式应用到表格上，表格也变成了半透明状态了。注意所有滤镜效果都要在浏览器里才能看到。下面是原码：
&style type=&text/css&&
.filter {　filter: Alpha(Opacity=50)}
注意：这个例子我们没有用到后面的几项参数，只用到Opacity参数，所以将其他参数删掉。
下面我们来讲解每个滤镜的效果和参数：
1.　　　　Alpha：设置透明度
Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)
Opacity：透明度级别，范围是0-100，0代表完全透明，100代表完全不透明。
FinishOpacity：设置渐变的透明效果时，用来指定结束时的透明度，范围也是0 到 100。
Style：设置渐变透明的样式，值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。
StartX和StartY：代表渐变透明效果的开始X和Y坐标。
FinishX和FinishY：代表渐变透明效果结束X和Y 的坐标。
2.　　　　BlendTrans：图像之间的淡入和淡出的效果
BlendTrans(Duration=?)
Duration：淡入或淡出的时间。
注意：这个滤镜必须配合JS建立图片序列，才能做出图片间效果。
3.　　　　Blru：建立模糊效果
Blur(Add=?, Direction=?, Strength=?)
Add：是否单方向模糊，此参数是一个布尔值，true（非0）或false（0）。
Direction：设置模糊的方向，其中0度代表垂直向上，然后每45度为一个单位。
Strength：代表模糊的象素值。
4.　　　　Chroma：把指定的颜色设置为透明
Chroma(Color=?)
Color：是指要设置为透明的颜色。
5.　　　　DropShadow：建立阴影效果
DropShadow(Color=?, OffX=?, OffY=?, Positive=?)
Color：指定阴影的颜色。
OffX：指定阴影相对于元素在水平方向偏移量，整数。
OffY：指定阴影相对于元素在垂直方向偏移量，整数。
Positive：是一个布尔值，值为true（非0）时，表示为建立外阴影；为false(0)，表示为建立内阴影。
6.　　　　FlipH：将元素水平反转
7.　　　　FlipV：将元素垂直反转
8.　　　　Glow：建立外发光效效果
Glow(Color=?, Strength=?)
Color：是指定发光的颜色。
Strength：光的强度，可以是1到255之间的任何整数，数字越大，发光的范围就越大。
9.　　　　Gray：去掉图像的色彩，显示为黑白图象
10.　　Invert：反转图象的颜色，产生类似底片的效果
11.　　Light：放置光源的效果，可以用来模拟光源在物体上的投影效果
注意：此效果需要用JS设置光的位置和强度。
12.　　Mask：建立透明遮罩
Mask(Color=?)
Color：设置底色，让对象遮住底色的部分透明。
13.　　RevealTrans：建立切换效果
RevealTrans(Duration=?, Transition=?)
Duration：是切换时间，以秒为单位。
Transtition：是切换方式，可设置为从0到23。
注意：如果做页面间的切换效果，可以在&head&区加上一行代码：&Meta http-equiv=Page-enter content=revealTrans(Transition=?,Duration=?) &。如果用在页面里的元素必须配合JS使用。
14.　　Shadow：建立另一种阴影效果
Shadow(Color=?, Direction=?)
Color：是指阴影的颜色。
Direction：是设置投影的方向，0度代表垂直向上，然后每45度为一个单位。
15.　　Wave：波纹效果
Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?)
Add：表示是否显示原对象，0表示不显示，非0表示要显示原对象。
Freq：设置波动的个数。
LightStrength：设置波浪效果的光照强度，从0到100。0表示最弱，100表示最强。
Phase：波浪的起始相角。从0到100的百分数值。（例如：25相当于90度，而50相当于180度。）
Strength：设置波浪摇摆的幅度。
16.　　Xray：显现图片的轮廓，X光片效果
注意：在使用CSS滤镜时，必须使用在有区域的元素，比如表格，图片等。而文本，段落这样没有区域的元素不能使用CSS滤镜，对这样的元素我们可以设置元素的Height和Width样式或坐标来实现。
看下面这个例子，我们对一行文字做阴影效果（dropshadow），新建自定义样式.shadow，在filter下拉框里选择“DropShadow(Color=?, OffX=?, OffY=?, Positive=?)”，我们设置为“DropShadow(Color=999999, OffX=2, OffY=2, Positive=1)”。然后把定义好的样式应用在页面中，我们发现在表格里的文字有了阴影，而段落里的文字却没有阴影。点CSS Styles面板里的编辑样式表按钮，给样式加上Hight属性：
为了不影响原来对象的高度，我们设置的高度不能超过字体本身的高度。OK后，在浏览器中可以看到段落里的文字也有阴影了。
Views:89&& Posted at:
| 录入： | 阅读：0 次
Copyright © 2009 - 2014
深圳宇创乐知网络技术有限公司
粤公网安备号