列 表 属 性 |
【定义 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
透明的渐进效果
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 属性【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=0style=1style=2style=3Style加载在图片上显示效果如下图:
原图
style=0
style=1
style=2
style=3





Style加载在文字上显示效果如下图:Alpha(Opacity=30,Style=0)这是文字透明效果演示BLENDTRANS 属性【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;
myimg.filters[0].play();
mytimeout=setTimeout("play()",6000);
}
-->
</script >5、在网页源代码的< body >加入这样的一句代码:onload="play()"。
设置完成,点F12预览效果
【定义 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 滤镜属性的详细介绍请从导航条选择“滤镜属性”按钮浏览。


TAG: