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”。
Text-transform：将选区中每个单词的第一个字母转为大写，或者令单词全部大写或全部小写。参数：capitalize（单词首字母大写）、uppercase（转换成大写）、lowercase（转换成小写）、none（不转换）。相对应的CSS属性是”text-transform”。
Color：定义文字颜色。相对应的CSS属性是”color”。
注意：CSS中颜色的值有三种表示方法：
l#RRGGBB格式，是由红绿蓝三种颜色的值组合，每种颜色的值为“00 –FF”的两位十六进制正整数。例如：#FF0000表示红色，#FFFF00表示黄色。
lrgb(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-top; padding-right; padding-bottom; padding-left”。
Margin：定义元素的边框与其他元素之间的距离（如果没有边框就是指内容之间的距离）。可以分别设置top（上边界）、right（右边界）、bottom（下边界）、left（左边界）的值。相对应的CSS属性分别是”margin; margin-top; margin-right; margin-bottom; margin-left”。
下面是补白、边框、边界之间的关系图：
5.Border（边框）
Border面板可以设置对象边框的宽度、颜色及样式。
Width：设置元素边的宽度。可以分别设定Top（上边宽）、Right（右边宽）、Bottom（下边宽）、Left（左边宽）的值。相对应的CSS属性分别是”border; border-top; border-right; border-bottom; border-left”。
Color：设置边框的颜色。你可以分别对每条边设置颜色。相对应的CSS属性分别是”border-color; border-top-color; border-right-color; border-bottom-color; 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属性分别是”left; top; width; 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”的自定义样式，我们把这个样式应用到图片上，图片就是半透明的了。如果把这个样式应用到表格上，表格也变。
[背景]属性共有六项：
「背景颜色」（background-color），设置背景颜色。
「背景图像」（background-image），设置网页背景图像。
「重复」（background-repeat），控制背景图像的平铺方式，有不重复（no-repeat）、重复（repeat，沿水平、垂直方向平铺）、横向重复（repeat-X，图像沿水平方向平铺）和纵向重复（repeat-Y，沿图像垂直方向平铺）等4种选择。
「附加」（background-attachment），用于控制背景图像是否会随页面的滚动而一起滚动。有固定（fixd，文字滚动时，背景图像保质固定）和滚动（scroll，背景图像随文字内容一起滚动）两种选择。
「水平位置」/「垂直位置」（background-position），确定背景图像的水平、垂直位置
。共有左对齐（left）、右对齐（right）、顶部（top）、底部（bottom）、居中（center）和值（自定义背景图像的起点位置，可使用户对背景图像的位置做出更精确的控制）等6种选择。
[类型]属性共有九项：
「字体」（font-family），设定时，需考虑浏览器中有无该字体。
「大小」（font-size），注意度量单位。
「粗细」（font-weight），除了normal（正常）、bold（粗体）、bolder（特粗）、lighter（细体）外，还有9种以像素为度量为单位的设置方式。
「样式」（font-style），也就是字型。
「行高」（line-height），就是行距。注意，行距只能以是字体大小值为
「变形」（font-variant），可以将正常文字一半尺寸后大写显示，但IE目前不支持这项属性。
「大小写」（text-transform），这项属性能轻而易举地控制字母大小写，有首字大写（capitalize、大写（uppercase）、小写（lowercase）和无（none，使所有继承文字和变形参数被忽略，文字将以正常形式显示）等4种。
「修饰」（text-decoration），用于控制链接文本的显示形态，有下划线（underline）、无下划线（overline）、删除线（line-through）、闪烁（blink）和无（none ，使上述效果均不会发生）等5种修饰方式。但IE4不支持文字闪烁。
[区块]属性共有六项：
「单词间距」（word-spacing），主要用于控制文字间相隔的距离。有正常（normal）和值（自定义间隔值）两种选择方式。当选择值时，可用的单位有英吋（in）、厘米（cm）、毫米（mm）、点数(pt）、12pt字(pc）、字体高（em）、字体x有高（ex）像素（px）。
「字母间距」（letter-spacing），其作用与字符间距类似，也有正常（normal）和值（自定义间隔值）两种选择方式。
「垂直对齐」（vertical-align），控制文字或图像相对于其母体元素的垂直位置。如将一个2×3像素的GIF图像同其母体元素文字的顶部垂直对齐，则该GIF图像将在该行文字的顶部显示。共有基线（baseline，将元素的基准线同母体元素的基准线对齐）、下标（sub，将元素以下标的形式显示）,上标（super，将元素以上标的形式显示）、顶部（top ，将元素顶部同最高的母体元素对齐）、文本顶对齐（text-top，将元素的顶部同母体元素文字的顶部对齐）、中线对齐（middle，将元素的中点同母体元素的中点对齐）、底部（bottom，将元素的底部同最低的母体元素对齐）及值（自定义）等9种选择。
「文本对齐」（text-align），设置块的水平对齐方式。共有左对齐（left）、右对齐（right）、居中（center）和均分（justify）等4种选择。
「文字缩进」（text-indent），控制块的缩进程度。
「空白间距」（white-space），在HTML中，空格是被省略的；在CSS中则使用属性（white-space）控制空格的输入。共有正常（normal）、保留（pre）和不换行（nowrap）等3种选择。
[边框]的属性有3项：
「宽」（border-width），控制边框的宽度，其中分为4个属性：border-top-width顶边框的宽度、border-right-width右边框的宽度、border-bottom-width底边框的宽度、border-left-width左边框的宽度。
「颜色」（border-color），设置各边框的颜色。若要使边框的四边显示不同的颜色，可在设置中分别列出。如，
p{: #ff0000 #009900 #0000ff #55cc00}
浏览器将四种颜色依次理解为：上边框、右边框、底边框和左边框（自上开始顺时针）。
「样式」（border-style），设定边框的样式，共有无（none）、虚线（dotted）、点划线线（dotted）、点划线（dashed）、实线（solid）、双线（double ）、槽状（grove）、脊状（ridge）、凹陷（inset）和凸起（outset）等9种。
「盒子」属性共有6项：
「宽」（width），确定盒子本身的宽度，可以使盒子的宽度不依靠它所包含的内容多少。
「高」（height），确定盒子本身的高度。
「浮动」（float），设置块元素的浮动效果。
「清除」（clear），用于清除设置的浮动效果。
「边距」（margin），控制围绕边框的边距大小。其中包含4个属性：margin-top控制上边距的宽度、margin-right控制右边距的宽度、margin-bottom控制下边距的宽度、margin-left控制左边距的宽度。
「边界」（padding），确定围绕块元素的空格填充数量，其中包含4个属性「padding-top控制上留白的宽度、padding-right控制右留白的宽度、padding-bottom控制下留白宽度、padding-left控制左留白的宽度。
[列表]属性共有3项：
「类型」（list-style-type），确定列表每一项前使用的符号，共有圆点（disc）、圆圈（circle）、方形（square）、数字（decimal）、小写罗马数字（lower-roman ）、大写罗马数字（upper-roman）、小写字母（lower-alpha）和大写字母（upper－alpha）等8种。
「项目图像」（list-style-image），其作用是将列表前面的符号换为图形。
「位置」（list-style-position），用于描述列表位置，有内（outside）和外（inside）两种选择。
[定位]属性共有6项：
「类型」（position），用于确定定位的类型，共有绝对（absolute）、相对（relative）和静态（static）等3种选择。
「Z轴」（z-index），用于控制网页中块元素的叠放顺序，可为元素设置重叠效果。该属性的参数值使用纯整数，值为0时，元素在最下层，适用于绝对定位或相对定位的元素。
「显示」（visibility）使用该属性可将网页中的元素隐藏，共有继承（inherit，继承母体要素的可视性设置）、可见（visible）和隐藏（hidden）等3种选择。
「溢出」（overflow），在确定了元素的高度和宽度后，如果元素的面积不能全部显示元素中的内容时，该属性做一日和尚撞一天钟起作用了。其中共有可见（visible，扩大面积以显示所有内容）、隐藏（hidden，隐藏超出范围的内容）、滚动（scroll，在元素的右边显示一个滚动条）和自动（auto，当内容超出元素面积时，显示滚动条）等4种选择。
「定位」，当为元素确定了绝对定位类型后，该组属性决定元素在网页中的具体位置。该组属性包含4个子属性，分别是「左」（属性名为「left」，控制元素左边的起始位置）、「上」（属性名为「top」，控制元素上面的起始位置）、 「宽」或「高」（与「盒子」类属性面板中「宽」或「高」的属性作用相同）。
「剪辑」（clip），当元素被指定为绝对定位类型后，该属性可以把元素区域切成各种形状，但目前提供的只有方形一种。属性值为rect(top right bottom left)，即：
rect(top right bottom left)，属性值的单位为任何一种长度单位。
[扩展]属性共有两部分：
「分页」，其中两个属性的作用是为打印的页面设置分页符。 「之前」（page-break-before）；「之后」（page-break-after）。
「视觉效果」，其中两个属性的作用是为网页中的元素施加特殊效果。 「光标」（cusor），可以指定在某个元素上要使用的光标形状，共有15种选择方式，分别代表鼠标在Windows操作系统中的各种形状。另外它还可以指定指针图标的URL地址；「滤镜」（fiter），可以为网页中元素施加各种奇妙的滤镜效果，共包含有16种滤镜。
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
