DW里CSS的详细介绍

1/1DW里CSS的详细介绍DW里CSS的详细介绍创建CSS样式表的过程，就是对各种CSS属性的配置过程，所以了解和掌控属性配置很重要。

在DWMX2004的CSS样式里包含了W3C规范定义的任何CSS1的属性，把这些属性分为：

类型、背景、区块、方框、边框、列表、定位、扩展等八个部分，如下图：

DWMX2004实现CSS属性配置功能是完全可视化的，无需编写代码。

下面我们分别周详讲解。

为了便于理解，从开始创建新的CSS样式表说起：

注：

您需对DWMX2004程式初步了解，并打开他对照本教程进行学习。

假如您对DWMX2004尚不熟悉，请浏览【DWMX2004简体中文版入门教程】。

【创建新的CSS样式】将插入点放在文档中，然后执行以下操作之一打开新建CSS样式对话框：

在CSS样式面板（窗口CSS样式）中，单击面板右下角区域中的新建CSS样式按钮，如下图：

在文本属性检查器中，从样式弹出式菜单中选择管理样式，然后在出现的对话框中单击新建。

在相关CSS选项卡（选择窗口标签检查器，然后单击相关CSS选项卡）中右键单击，然后从上下文菜单中选择新建规则。

选择文本菜单CSS样式新建(N)。

新建CSS样式对话框随即出现，如下图：

定义您要创建的CSS样式的类型：

若要创建可作为class属性应用于文本范围或文本块的自定义样式，请选择创建自定义样式(Class)，然后在名称文本框中输入样式名称。

注意：

类名称必须以句点开头，并且能够包含任何字母和数字组合（例如，.mycss）。

假如您没有输入开头的句点，DWMX2004将自动为您输入。

若要重定义特定HTML标签的默认格式，请选择重定义标签，然后在标签字段中输入一个HTML标签，或从弹出式菜单中选择一个标签。

若要为具体某个标签组合或任何包含特定Id属性的标签定义格式，请选择使用CSS选择器，然后在选择器文本框中输入一个或多个HTML标签，或从弹出式菜单中选择一个标签。

弹出式菜单中提供的选择器（称作伪类选择器）包括a:active、a:hover、a:link和a:visited。

选择定义样式的位置：

若要创建外部样式表，请选择新建样式表文档。

若要在当前文档中嵌入样式，请选择仅对该文档。

单击确定。

类型属性【定义CSS类型属性】使用CSS样式定义对话框中的类型类别能够定义CSS样式的基本字体和类型配置。

定义CSS样式的类型配置：

在CSS样式定义对话框中，选择类型（如下图），然后配置所需的样式属性。

请注意：

下列任意属性假如您认为不重要能够保留为空。

字体：

为样式配置字体。

DWMX2004内置6个系列的英文字体（如下图）。

一般英文字体常常用Arial，Helvetica，sans-serif这个系列比较美观，假如不用这些字体系列，您您能够通过下拉列表最下面的编辑字体列表来创建新的字体系列。

中文网页默认字体是宋体，一般留空即可。

浏览器最好选择用户系统第一种字体显示文本。

两种浏览器都支持字体属性。

大小：

定义文本大小。

能够通过选择数字和度量单位选择特定的大小，也能够选择相对大小。

以像素为单位能够有效地防止浏览器变形文本。

提示：

CSS中长度的单位分绝对长度单位和相对长度单位：

绝对长度相对长度px：

（象素）根据显示器的分辨率来确定长度。

pt：

（字号）根据windows系统定义的字号大小来确定长度。

in、cn、mm：

（英寸、厘米、毫米）根据显示的实际尺寸来确定长度。

此类单位不随显示器的分辨率改变而改变。

em：

当前文本的尺寸。

例如：

{font-size:2em}是指文字大小为原来的2倍。

ex：

当前字母x的高度，一般为字体尺寸的一半。

%：

是以当前文本的百分比定义尺寸。

例如：

{font-size:300%}是指文字大小为原来的3倍。

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

o样式：

将正常、斜体或偏斜体指定为字体样式。

默认配置是正常。

两种浏览器都支持样式属性。

o行高：

配置文本所在行的高度。

选择正常自动计算字体大小的行高，或输入一个确切的值并选择一种度量单位。

比较直观的写法用百分比，例如180%是指行高等于文字大小的1.8倍。

相对应的CSS属性是line-height。

两种浏览器都支持行高属性。

o修饰：

向文本中添加下划线、上划线或删除线，或使文本闪烁。

正常文本的默认配置是无。

链接的默认配置是下划线。

将链接配置设为无时，能够通过定义一个特别的类删除链接中的下划线。

这些效果能够同时存在，将效果前的复选框选定即可。

相对应的CSS属性是text-decoration。

两种浏览器都支持修饰属性。

o粗细：

对字体应用特定或相对的粗体量。

正常等于400；粗体等于700。

相对应的CSS属性是font-weight。

两种浏览器都支持粗细属性。

o变量：

配置文本的小型大写字母变量。

DWMX2004不在文档窗口中显示该属性。

InternetExplorer支持变量属性，但NetscapeNavigator不支持。

o大小写：

将选定内容中的每个单词的首字母大写或将文本配置为全部大写或小写。

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

o颜色：

配置文本颜色。

两种浏览器都支持颜色属性。

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

背景属性【定义CSS样式背景属性】使用CSS样式定义对话框的背景类别能够定义CSS样式的背景配置。

能够对网页中的任何元素应用背景属性。

例如，创建一个样式，将背景颜色或背景图像添加到任何页面元素中，比如在文本、表格、页面等的后面。

还能够配置背景图像的位置。

提示：

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

定义背景配置：

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

请注意：

下列任意属性假如您认为不重要能够保留为空。

背景颜色：

配置元素的背景颜色。

两种浏览器都支持背景颜色属性。

背景图像：

配置元素的背景图像。

两种浏览器都支持背景图像属性。

重复：

定义是否重复连同怎样重复背景图像。

两种浏览器都支持重复属性。

o不重复在元素开始处显示一次图像。

o重复在元素的后面水平和垂直平铺图像。

o横向重复和纵向重复分别显示图像水平带区和垂直带区。

图像被剪辑以适合元素的边界。

附件：

确定背景图像是固定在他的原始位置还是随内容一起滚动。

注意，某些浏览器可能将固定选项视为滚动。

InternetExplorer支持该选项，但NetscapeNavigator不支持。

水平位置：

和垂直位置指定背景图像相对于元素的初始位置。

这能够用于将背景图像和页面中央垂直和水平对齐。

假如附件属性为固定，则位置相对于文档窗口而不是元素。

InternetExplorer支持该属性，但NetscapeNavigator不支持。

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

区块属性【定义CSS样式区块属性】使用CSS样式定义对话框的区块类别能够定义标签和属性的间距和对齐配置。

下列两组表格为文本定义区块属性前后对比：

原文本未定义区块属性【定义CSS样式区块属性】定义区块属性后效果【定义CSS样式区块属性】原文本未定义区块使用样式定义对话框的区块类别能够定义标签和属性的间距和对齐配置。

此为区块定义演示。

字间的空格可不是用键盘敲出来的。

定义区块后效果（参数见下图）使用样式定义对话框的区块类别能够定义标签和属性的间距和对齐配置。

此为区块定义演示。

字间的空格可不是用键盘敲出来的。

定义区块配置：

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

请注意：

下列任意属性假如您认为不重要能够保留为空。

单词间距：

配置单词的间距。

若要配置特定的值，请在弹出式菜单中选择值，然后输入一个数值。

在第二个弹出式菜单中，选择度量单位。

注意：

能够指定负值，但显示取决于浏览器。

Dreamweaver不在文档窗口中显示该属性。

字母间距：

增加或减小字母或字符的间距。

若要减少字符间距，请指定一个负值（例如-4）。

字母间距配置覆盖对齐的文本配置。

InternetExplorer4和更高版本连同NetscapeNavigator6支持字母间距属性。

垂直对齐：

指定应用他的元素的垂直对齐方式。

仅当应用于img标签时，Dreamweaver才在文档窗口中显示该属性。

文本对齐：

配置元素中的文本对齐方式。

两种浏览器都支持文本对齐属性。

文本缩进：

指定第一行文本缩进的程度。

能够使用负值创建凸出，但显示取决于浏览器。

仅当标签应用于块级元素时，Dreamweaver才在文档窗口中显示该属性。

两种浏览器都支持文本缩进属性。

空格：

确定怎样处理元素中的空白。

从下面三个选项中选择：

正常收缩空白；保留的处理方式即保留任何空白，包括空格、制表符和回车；不换行指定仅当碰到br标签时文本才换行。

Dreamweaver不在文档窗口中显示该属性。

NetscapeNavigator和InternetExplorer5.5支持空格属性。

显示：

指定是否显示连同怎样显示元素。

无关闭他被指定给的元素的显示。

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

方框属性【定义CSS样式方框属性】使用CSS样式定义对话框的方框（又称盒子）类别能够为控制元素在页面上的放置方式的标签和属性定义配置。

能够在应用填充和边距配置时将配置应用于元素的各个边，也能够使用全部相同配置将相同的配置应用于元素的任何边。

定义元素在页面上的放置方式：

在CSS样式定义对话框中，选择方框（如下图），然后配置所需的样式属性。

请注意：

下列任意属性假如您认为不重要能够保留为空。

宽和高：

配置元素的宽度和高度。

宽和高定义的对象多为图片，表格，层等。

浮动：

配置元素浮动方式（如文本、层、表格等）。

其他元素按通常的方式环绕在浮动元素的周围。

两种浏览器都支持浮动属性。

这是配置浮动效果的演示。

定义表格浮动（左对齐），文本自动排列在该表格的右侧。

清除：

不允许元素的浮动。

左对齐：

表示不允许左边有浮动对象。

右对齐：

表示不允许右边有浮动对象。

两者：

表示允许两边都能够有浮动对象。

无：

不允许有浮动对象。

两种浏览器都支持清除属性。

填充：

指定元素内容和元素边框（假如没有边框，则为边距）之间的间距。

取消选择全部相同选项可配置元素各个边的填充。

全部相同：

将相同的填充属性配置为他应用于的元素的上、右、下和左侧。

边界：

指定一个元素的边框（假如没有边框，则为填充）和另一个元素之间的间距。

仅当应用于块级元素（段落、标题、列表等）时，DWMX2004才在文档窗口中显示该属性。

取消选择全部相同可配置元素各个边的边距。

全部相同：

将相同的边距属性配置为他应用于的元素的上、右、下和左侧。

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

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

提示：

本页为边框进行了配置（样式：

点划线宽度：

2px颜色：

#FF0000）配置边框样式：

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

请注意：

下列任意属性假如您认为不重要能够保留为空。

样式：

配置边框的样式外观。

样式的显示方式取决于浏览器。

DWMX2004在文档窗口中将任何样式呈现为实线。

两种浏览器都支持样式属性。

取消选择全部相同可配置元素各个边的边框样式。

全部相同：

将相同的边框样式属性配置应用于的元素的上、右、下和左侧。

宽度：

配置元素边框的粗细。

两种浏览器都支持宽度属性。

取消选择全部相同可配置元素各个边的边框宽度。

全部相同：

将相同的边框宽度配置应用于的元素的上、右、下和左侧。

颜色：

配置边框的颜色。

能够分别配置每个边的颜色，但显示取决于浏览器。

取消选择全部相同可配置元素各个边的边框颜色。

全部相同：

将相同的边框颜色配置应用于的元素的上、右、下和左侧。

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

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

定义列表样式：

在CSS样式定义对话框中，选择列表（如下图），然后选择所需的样式属性。

请注意：

下列任意属性假如您认为不重要能够保留为空。

o类型：

配置项目符号或编号的外观。

两种浏览器都支持类型。

o项目符号图像：

能够为项目符号指定自定义图像。

单击浏览选择图像或键入图像的路径。

o位置：

配置列表项文本是否换行和缩进连同文本是否换行到左边距。

列表属性配置应用举例如下：

圆点符号数字编号图像符号CSS样式表属性分为：

类型；背景；区块；方框；边框；列表；定位；扩展；CSS样式表属性分为：

9.类型；10.背景；11.区块；12.方框；13.边框；14.列表；CSS样式表属性分为：

类型；背景；区块；方框；边框；列表；定位；扩展；15.定位；16.扩展；配置完这些选项后，在面板左侧选择另一个CSS类别以配置其他的样式属性，或单击确定。

定位属性【定义CSS样式定位属性】定位样式属性使用层最好选择参数中定义层的默认标签，将标签或所选文本块更改为新层。

配置层定位属性：

在CSS样式定义对话框中，选择定位（如下图），然后配置所需的样式属性。

请注意：

下列任意属性假如您认为不重要能够保留为空。

类型：

确定浏览器应怎样来定位层。

绝对：

使用定位框中输入的坐标（相对于页面左上角）来放置层。

相对：

使用定位框中输入的坐标（相对于对象在文档的文本中的位置）来放置层。

该选项不显示在文档窗口中。

静态：

将层放在他在文本中的位置。

显示：

确定层的初始显示条件。

假如不指定可见性属性，则默认情况下大多数浏览器都继承父级的值。

选择以下可见性选项之一：

继承：

继承层父级的可见性属性。

假如层没有父级，则他将是可见的。

可见：

显示该层的内容，而不管父级的值是什么。

隐藏：

隐藏这些层的内容，而不管父级的值是什么。

Z轴：

确定层的堆叠顺序。

编号较高的层显示在编号较低的层的上面。

值能够为正，也能够为负。

（注：

使用层面板更改层的堆叠顺序更容易。

）溢出（仅限于CSS层）：

确定在层的内容超出他的大小时将发生的情况。

这些属性控制怎样处理此扩展，如下所示：

可见：

增加层的大小，使他的任何内容均可见。

层向右下方扩展。

隐藏：

保持层的大小并剪辑任何超出的内容。

不提供任何滚动条。

滚动：

在层中添加滚动条，不论内容是否超出层的大小。

专门提供滚动条可避免滚动条在动态环境中出现和消失所引起的混乱。

该选项不显示在文档窗口中，并且仅适用于支持滚动条的浏览器。

InternetExplorer和NetscapeNavigator6支持此属性。

自动：

使滚动条仅在层的内容超出他的边界时才出现。

该选项不显示在文档窗口中。

定位：

指定层的位置和大小。

浏览器怎样解释位置取决于类型配置。

假如层的内容超出指定的大小，则大小值被覆盖。

位置和大小的默认单位是像素。

对于CSS层，还能够指定下列单位：

pc（十二点活字）、pt（点）、in（英寸）、mm（毫米）、cm（厘米）、(ems)、(exs)或%（父级值的百分比）。

缩写必须紧跟在值之后，中间不留空格：

例如，3mm。

剪辑：

定义层的可见部分。

假如指定了剪辑区域，能够通过脚本语言（如javascript）访问他，并操作属性以创建像擦除这样的特别效果。

通过使用改变属性行为能够配置这些擦除效果。

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

扩展属性【定义CSS样式扩展属性】扩展样式属性包括过滤器、分页和光标选项，他们中的大部分效果仅受InternetExplorer4.0和更高版本的支持。

指定扩展属性：

在CSS样式定义对话框中，选择扩展（如下图），然后配置所需的样式属性。

请注意：

下列任意属性假如您认为不重要能够保留为空。

分页：

在打印期间在样式所控制的对象之前或之后强行分页。

选择要在弹出式菜单中配置的选项。

此选项不受任何4.0版本浏览器的支持，但可能受未来的浏览器的支持。

属性handcrosshair精确定位＋字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滤镜，对样式所控制的对象应用特别效果。

他把我们带入绚丽多姿的世界。

正是有了滤镜属性，页面才变得更加漂亮。

DWMX2004扩展类过滤器嵌入16项样式属性（如下图），您能够根据您的需要从过滤器弹出式菜单中选择并加以配置。

滤镜说明AlphaBlendTrans淡入淡出效果Blur风吹模糊的效果Chroma指定颜色透明透明的渐进效果DropShadow阴影效果FlipHFlipVGlowGrayInvertLightMaskRevealTrans动态效果ShadowWaveXray水平翻转垂直翻转边缘光晕效果彩色图片变灰度图底片的效果模拟光源效果矩形遮罩效果轮廓阴影效果波浪扭曲变形效果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滤镜的参数多，我们先来看一下下边的表格：

参数名效果说明取值说明OpacityFinishOpacity能够制作出透明渐变的效果。

取值0～100不透明的程度，百分比。

取值0～100Style指定渐变的显示形状。

0：

没有渐变；1：

线性渐变；2：

圆形渐变；3：

矩形辐射。

StartXStartYFinishXFinishY渐变开始的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=0style=1style=2style=3Style加载在图片上显示效果如下图：

原图style=0style=1style=2style=3Styl