【定义 CSS 类型属性】使用“CSS 样式定义”对话框中的“类型”类别能够定义 CSS 样式的基本字体和类型配置。
定义 CSS 样式的类型配置：
在“CSS 样式定义”对话框中，选择“类型”（如下图），然后配置所需的样式属性。
请注意：下列任意属性假如您认为不重要能够保留为空。
字体：为样式配置字体。DW MX 2004内置6个系列的英文字体（如下图）。
一般英文字体常常用“Arial， Helvetica， sans-serif”这个系列比较美观，假如不用这些字体系列，您您能够通过下拉列表最下面的“编辑字体列表”来创建新的字体系列。中文网页默认字体是宋体，一般留空即可。浏览器最好选择用户系统第一种字体显示文本。两种浏览器都支持字体属性。
大小：定义文本大小。能够通过选择数字和度量单位选择特定的大小，也能够选择相对大小。以像素为单位能够有效地防止浏览器变形文本。
提示：CSS中长度的单位分绝对长度单位和相对长度单位：
![[转载]DW里CSS的详细介绍~~~~~~~~~](http://www./d/file/wangyesheji/htcss/2010-03-07/3149c829581642c03693a9ffc4a2703c.gif "[转载]DW里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样式定义”对话框中，选择“区块”（如下图），然后配置所需的样式属性。
请注意：下列任意属性假如您认为不重要能够保留为空。
单词间距：配置单词的间距。若要配置特定的值，请在弹出式菜单中选择“值”，然后输入一个数值。在第二个弹出式菜单中，选择度量单位。
注意：能够指定负值，但显示取决于浏览器。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。
剪辑：定义层的可见部分。假如指定了剪辑区域，能够通过脚本语言（如 javascript）访问他，并操作属性以创建像擦除这样的特别效果。通过使用“改变属性”行为能够配置这些擦除效果。
配置完这些选项后，在面板左侧选择另一个 CSS 类别以配置其他的样式属性，或单击“确定”。
【定义 CSS 样式扩展属性】“扩展”样式属性包括过滤器、分页和光标选项，他们中的大部分效果仅受 Internet Explorer 4.0 和更高版本的支持。
指定扩展属性：
在“CSS 样式定义”对话框中，选择“扩展”（如下图），然后配置所需的样式属性。
请注意：下列任意属性假如您认为不重要能够保留为空。
分页：在打印期间在样式所控制的对象之前或之后强行分页。选择要在弹出式菜单中配置的选项。此选项不受任何 4.0 版本浏览器的支持，但可能受未来的浏览器的支持。
|
|
|
|
hand
|
手形
|
|
crosshair
|
精确定位“＋”字
|
|
text
|
文本“I”形
|
|
wait
|
等待
|
|
default
|
默认光标
|
|
help
|
帮助
|
|
e-resize
|
箭头朝右方
|
|
ne-resize
|
箭头朝右上方
|
|
n-resize
|
箭头朝上方
|
|
nw-resize
|
箭头朝左上方
|
|
w-resize
|
箭头朝左方
|
|
sw-resize
|
箭头朝左下方
|
|
s-resize
|
箭头朝下方
|
|
se-resize
|
箭头朝右下方
|
|
auto
|
自动 按照默认状态改变
|
光标：位于“视觉效果”下的“光标”选项，是光标显示属性配置。当指针位于样式所控制的对象上时改变指针图像。选择弹出式菜单（右图）进行配置。（左图）是他的周详列表和相关说明。
过滤器：又称 CSS滤镜，对样式所控制的对象应用特别效果。他把我们带入绚丽多姿的世界。正是有了滤镜属性，页面才变得更加漂亮。从“过滤器”弹出式菜单中选择一种效果并视具体需要加以配置。各种 CSS 滤镜属性的周详介绍请从导航条选择“滤镜属性”按钮浏览。
过滤器：又称 CSS滤镜，对样式所控制的对象应用特别效果。他把我们带入绚丽多姿的世界。正是有了滤镜属性，页面才变得更加漂亮。DW MX 2004 扩展类过滤器嵌入16项样式属性（如下图），您能够根据您的需要从“过滤器”弹出式菜单中选择并加以配置。
|
滤 镜
|
说 明
|
|
Alpha
|
透明的渐进效果
|
|
BlendTrans
|
淡入淡出效果
|
|
Blur
|
风吹模糊的效果
|
|
Chroma
|
指定颜色透明
|
|
DropShadow
|
阴影效果
|
|
FlipH
|
水平翻转
|
|
FlipV
|
垂直翻转
|
|
Glow
|
边缘光晕效果
|
|
Gray
|
彩色图片变灰度图
|
|
Invert
|
底片的效果
|
|
Light
|
模拟光源效果
|
|
Mask
|
矩形遮罩效果
|
|
RevealTrans
|
动态效果
|
|
Shadow
|
轮廓阴影效果
|
|
Wave
|
波浪扭曲变形效果
|
|
Xray
|
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滤镜属性】这个名字，在Flash和Photoshop经常见到。他们的作用基本类似，就是把一个目标元素和背景混合。您能够指定数值来控制混合的程度。这种“和背景混合”通俗地说就是个元素的透明度。通过指定坐标，能够指定点、线、面的透明度。由于“Alpha”滤镜的参数多，我们先来看一下下边的表格：
|
参数名
|
效 果 说 明
|
取值说明
|
|
Opacity
|
不透明的程度，百分比。 |
取值0～100 |
|
FinishOpacity
|
能够制作出透明渐变的效果。 |
取值0～100 |
|
Style
|
指定渐变的显示形状。 |
0：没有渐变；1：线性渐变；
2：圆形渐变；3：矩形辐射。 |
|
StartX
|
渐变开始的 X 坐标值 |
|
|
StartY
|
渐变开始的 Y 坐标值 |
|
|
FinishX
|
渐变结束的 X 坐标值 |
|
|
FinishY
|
渐变结束的 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=0
|
style=1
|
style=2
|
style=3
|
|
|
|
|
|
|
Style加载在图片上显示效果如下图：
|
原图
|
style=0
|
style=1
|
style=2
|
style=3
|
|
|
|
|
|
Style加载在文字上显示效果如下图：
|
Alpha(Opacity=30,Style=0)
|
|
这是文字透明效果演示
|
【BlendTrans属性】淡入淡出的效果滤镜，能产生极精细的图片转换效果。
制作说明：
BlendTrans滤镜功能也比较单一，只有一个参数：Duration（变换时间）。需要借助于javascript来调用他的方法来实现转换功能。使用BlendTrans滤镜，首先您要准备几张宽高尺寸相同的图片，并分别命名，保存在图像目录下，如：images/*.jpg。假如用4幅的话，分别取名为：blen1.jpg； blen2.jpg； blen3.jpg；blen4.jpg。（用其他名称也能够，但下边的javascript配置要相应调整。）
制作方法：
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="images/blen1.jpg" name="myimg" width="570" height="150" class="myblen" id="myimg">；
4、在网页的源代码< head >和< /head >之间插入下面这段javascript程式：
<script language="javascript" >
<!--
function img(len)
{
this.length=len;
}
imgname=new img(4);
imgname[0]="images/blen1.jpg";
imgname[1]="images/blen2.jpg";
imgname[2]="images/blen3.jpg";
imgname[3]="images/blen4.jpg";
var i=1;
function play()
{
if (i==3)
{ i=0 ;}
else
{ i++; }
myimg.filters[0].apply();
myimg.src=imgname[i];
myimg.filters[0].play();
mytimeout=setTimeout("play()",6000);
}
-->
</script > |
5、在网页源代码的< body >加入这样的一句代码：onload="play()"。
配置完成，点F12预览效果
