3.3 设置CSS属性
要通过CSS样式规则来控制网页的外观，就需要对各种各样的CSS属性进行设置。在Dreamweaver CS3中，可以利用CSS规则定义对话框或【CSS样式】面板来设置CSS属性；如果正在代码视图中编写CSS代码，还可以利用代码提示功能来显示CSS属性名称和属性值。按照功能，CSS属性可以分为字体、背景、区块、方框、边框、列表、定位和扩展等8个类别。下面对这些属性及其设置方法加以介绍。
3.3.1 设置字体属性
下面首先介绍与字体相关的CSS属性，然后介绍如何在Dreamweaver CS3中设置这些属性。
1.常用字体属性
在CSS中，与字体相关的属性主要包括：font-family，font-size，color，font-style，line-height，font-weight，text-transform，font-variant，text-decoration，font。
（1）font-family属性。用于设置或检索用于元素中文本的字体名称序列，语法如下：
font-family:name(s)
其中name（s）指定一组字体，以逗号隔开，按优先顺序排列。若字体名称包含空格，则应使用引号括起。
font-family属性的脚本特性为fontFamily。
示例：
span{font-family:楷体_GB2312,宋体,Courier,"Courier New","Times New Roman";}
（2）font-size属性。用于设置或检索元素中的字体大小，语法如下：
font-size:absolute-size|relative-size|length
其中“|”表示二中选一。
● absolute-size表示根据元素的字体进行调节，取值可以是：xx-small、x-small、small、medium、large、x-large或xx-large。
● relative-size表示对于父元素中字体大小进行相对调节，使用em单位计算，取值可以是larger或smaller。
● length表示由浮点数字和单位标识符组成的长度值，不可为负值；若取百分比，则表示基于父元素中字体的大小。
font-size属性的脚本特性为fontSize。
示例：
p{font-size:9pt;}
p.sub{font-size:20%;}
（3）color属性。用于设置或检索元素的文本颜色，语法如下：
color:color
其中参数color指定元素的文本颜色，可通过#RRGGBB、rgb（R, G, B）或颜色名称指定。
color属性的脚本特性为color。
示例：
div{color:#345456;}
p{color:rgb(100, 121, 200);}
span{color:blue;}
（4）font-style属性。用于设置或检索元素中的字体样式，语法如下：
font-style:normal|italic|oblique
其中：
● normal表示正常显示。
● italic和oblique均表示以斜体显示。
font-style属性的脚本特性为fontStyle。
示例：
p{font-style:normal;}
.italicText{font-style:italic;}
（5）line-height属性。用于设置或检索元素的行高，即字体最底端与字体内部顶端之间的距离，语法如下：
line-height:normal|length
其中：
● normal表示使用默认行高。
● length可以是百分比数字或由浮点数字和单位标识符组成的长度值，允许为负值。其百分比值是基于字体的高度尺寸。
line-height属性的脚本特性为lineHeight。
示例：
p{font-size:9pt;line-height:2em;}
div{line-height:16pt;}
div.pp{font-size:9pt;line-height:200%;}
（6）font-weight属性。用于设置或检索元素中文本字体的粗细，语法如下：
font-weight:normal|bold|bolder|lighter|number
其中：
● normal表示使用正常的字体，相当于number为400。
● bold表示使用粗体，相当于number为700，与<b>标签的作用相同。
● bolder表示使用特粗体；lighter表示使用细体；number表示使用数字设置字体粗细，数字可以是：100、200、300、400、500、600、700、800或900；数字越大，字体越粗。
font-weight属性的脚本特性为fontWeight。
示例：
span{font-weight:800;}
（7）text-transform属性。用于设置元素文本中字母的大小写，语法如下：
text-transform:upercase|lowercase|capitalize|none
其中：
● upercase表示使所有字母以大写显示。
● lowercase表示使所有字母以小写显示。
● capitalize表示将每个单词的首字母转换为大写。
● none表示无转换发生。
text-transform属性的脚本特性为textTransform。
示例：
div{text-transform:uppercase;}
（8）font-variant属性。用于设置或检索元素中的文本是否为小型大写字母，语法如下：
font-variant:normal|small-caps
其中：
● normal表示正常字体。
● small-caps表示小型大写字母，例如SMALL-CAPS。正常字体与小型大写字母的对比如图3-10所示。
图3-10 小型大写字母效果
font-variant属性的脚本特性为fontVarian。
示例：
p{font-variant:small-caps;}
（9）text-decoration属性。用于设置或检索元素中文本的修饰，语法如下：
text-decoration:underline||overline||line-throungh||blink||none
其中“||”表示两者可以同时使用。
● underline表示对文本添加下画线。
● overline表示对文本添加上画线。
● line-throungh表示对文本添加删除线。
● blink表示文本闪烁。
● none表示上述效果均不会产生。
text-decoration属性的脚本特性为textDecoration。
示例：
a:hover{text-decoration:underline overline;}/＊ 指向链接时，添加下画线和上画线 ＊/
（10）font属性。用于设置与字体有关的多种属性，该属性是复合属性，语法如下：
font:font-style||font-variant||font-weight||font-size||line-height||font-family
其中“||”表示两者可以同时使用。各个属性值必须按照以上排列顺序。每个属性仅允许有一个值，忽略的属性将使用其默认值。请参阅前面对各个属性的说明。
font属性对应的脚本特性为font。
示例：
p{font:italic small-caps 600 12pt/150% "Times New Roman";}
其中12pt/150%表示font-size和line-height属性分别为150%、12pt。
2.利用Dreamweaver CS3设置CSS字体属性
下面介绍在Dreamweaver CS3中设置CSS字体属性的几种方式。
（1）使用CSS规则定义对话框。当创建或修改CSS规则时，可以在CSS规则定义对话框中选择【类型】类别，然后对各种字体属性进行设置，如图3-11所示。
图3-11 利用CSS规则定义对话框中设置字体属性
● 在【大小】列表中选择字体的大小并从右边的列表中选择所用的单位（font-size）。
● 在【样式】列表中，选择【正常】、【斜体】或【偏斜体】作为字体样式（font-style）。
● 在【行高】列表中，设置行的高度并从相邻的列表中选择一种单位（line-height）。
● 对于【修饰】（text-decoration），根据需要选择适当的复选框。
● 在【粗细】列表中，选择对字体应用特定或相对的粗体量（font-weight）。
● 在【变体】列表中，选择【正常】或【小型大写字母】（font-variant）。
● 在【大小写】列表中，选择字母的大小写设置（text-transform）。
● 在【颜色】框中，设置文本的颜色（color）。
（2）使用CSS样式面板。操作方法是：首先在【所有规则】下展开【样式】并单击要更改的样式，然后在面板底部单击【显示类别视图】按钮
，再展开【字体】类别并对相关的字体属性进行修改，如图3-12所示。
（3）使用属性检查器。当在文档窗口中选择部分文本后，然后在属性检查器中设置文本的字体、大小和颜色，Dreamweaver会自动生成CSS类样式并应用于所选文本。
（4）使用【页面属性】对话框。当在【页面属性】对话框中设置有关选项时，将在后台自动生成CSS样式。在【外观】分类中，可以对body、td、th等HTML标记进行设置；在【链接】分类中，可以对a:link、a:visited、a:hover等伪类样式进行设置。
图3-12 用CSS样式面板编辑字体属性
例3-3 通过CSS规则设置超链接的样式，网页效果如图3-13所示。
设计步骤
1 在Dreamweaver中打开Ajax站点，在chap03文件夹中创建一个HTML网页并保存为page3-03.html，把网页标题设置为“用CSS设置超链接的样式”。
2 利用【页面属性】对话框对未访问链接、已访问链接及鼠标悬停时链接的颜色进行设置，如图3-14所示。
图3-13 用CSS设置超链接的外观
图3-14 利用页面属性对话框设置链接样式
3 利用【CSS样式】面板对样式表中包含的规则进行修改，如图3-15所示。
4 在页面上输入“链接1”、“链接2”和“链接3”，然后分别创建三个链接，前两个链接分别指向page3-01.html、page3-02.html，第三个链接用于执行脚本“window.close();”。
5 在视图下查看所生成的CSS和HTML源代码。
6 在浏览器中查看网页效果。
图3-15 利用CSS样式面板修改样式表
3.3.2 设置背景属性
下面首先介绍与背景设置相关的CSS属性，然后介绍如何在Dreamweaver CS3中设置各种背景属性。
1.与背景设置相关的CSS属性
在CSS中，与背景设置相关的属性主要包括：background-color，background-image，background-repeat，background-attachment，background-position，background。
（1）background-color属性。用于设置或检索元素的背景颜色，语法如下：
background-color:color|transparent
其中：
● color指定一种颜色。
● transparent表示透明，这是默认值。
background-color属性对应的脚本特性为backgroundColor。
示例：
p.aa{background-color:purple;}
div{background-color:rgb(223,71,177);}
span{background-color:#98AB6F;}
（2）background-image属性。用于设置或检索元素的背景图像，语法如下：
background-image:url(URL)|none
其中：
● url（URL）使用绝对或相对地址来指定背景图像的路径。
● none表示不使用背景图像，这是默认值。
background-image属性对应的脚本特性为backgroundImage。
注意 当同时设置网页的背景图像与背景颜色属性时，背景图片将覆盖于背景颜色之上，此时看不到背景颜色。
示例：
body{background-image:url("images/bg.gif");}
div{background-image:url(http://www.fred.com/images/image01.jpg);}
（3）background-repeat属性。用于设置或检索元素的背景图像如何重复，语法如下：
background-repeat:repeat|no-repeat|repeat-x|repeat-y
其中：
● repeat表示背景图像同时在水平方向和垂直方向平铺，这是默认值。
● no-repeat表示背景图像不平铺。
● repeat-x表示背景图像仅在水平方向上平铺。
● repeat-y表示背景图像仅在垂直方向上平铺。
background-repeat属性对应的脚本特性为backgroundRepeat。
说明 设置background-repeat属性时，必须先指定元素的background-image属性。
示例：
body{background-image:url("images/aardvark.gif");background-repeat:repeat-y;}
（4）background-attachment属性。用于设置或检索背景图像随元素内容是滚动还是固定的，语法如下：
background-attachment:scroll|fixed
其中：
● scroll表示背景图像是随元素内容滚动，这是默认值。
● fixed表示背景图像固定。
background-attachment属性对应的脚本特性为backgroundAttachment。
示例：
body{background:white url(candybar.gif);background-attachment:fixed}
（5）background-position属性。用于设置或检索元素的背景图像的位置，语法如下：
background-position:length||length
background-position:position||position
其中：
● length是百分数或由浮点数字和单位标识符组成的长度值。
● position的取值可以是：top、middle、bottom、left、center或right。
background-position属性对应的脚本特性为backgroundPosition。
注意 当设置元素的背景图像位置时，必须先设置元素的背景图像（background-image属性）。background-position属性的默认值为：0% 0%。若只指定了一个值，则该值用于横坐标，纵坐标将默认为50%。若指定了两个值，则分别用于横坐标和纵坐标。
示例：
div{background-image:url("images/aardvark.gif");background-position:35% 80%;}
body{background-image:url("images/aardvark.gif");background-position:top right;}
（6）background属性。用于设置元素的背景样式，语法如下：
background:background-color||background-image||background-repeat||
background-attachment||background-position
该属性是复合属性，其默认值为transparent none repeat scroll 0% 0%。请参阅关于各个背景属性的说明。
background属性对应的脚本特性为background。
示例：
div{background:red no-repeat scroll 5% 60%;}
body{background:url("images/aardvark.gif") repeat-y;}
如果使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
2.利用Dreamweaver CS3设置背景属性
在Dreamweaver CS3中，可以通过以下三种方式对与背景相关的CSS属性进行设置。
（1）使用CSS规则定义对话框。当创建和编辑CSS样式时，可以在CSS规则定义对话框中选择【背景】类别，然后对各种背景属性进行设置，如图3-16所示。
● 在【背景颜色】框中设置元素的背景颜色（background-color）。
● 在【背景图像】框中设置元素的背景图像（background-image）。
● 在【重复】框中设置是否及如何重复背景图像（background-repeat）。
● 在【附件】框中设置元素的背景图像是固定在原始位置还是随着内容而滚动（background-attachment）。
● 在【水平位置】和【垂直位置】框中指定背景图像的初始位置（background-position）。
（2）使用【CSS样式】面板。操作方法是：在【CSS样式】面板中展开【样式】并单击要更改的规则；单击【显示类别视图】按钮
并展开【背景】类别，然后对相关的背景属性进行修改，如图3-17所示。
（3）使用【页面属性】对话框。当在【页面属性】对话框中设置页面的背景图像和背景颜色时，Dreamweaver将通过CSS样式对网页的body标记的背景属性进行设置。
例3-4 通过CSS规则设置元素的背景属性。创建一个HTML网页，用于模拟网站登录。若不输入用户名和密码而直接单击【登录】按钮，则文本框和密码框背景颜色发生变化并显示提示信息，实现了页面的局部刷新，效果如图3-18和图3-19所示。
图3-16 利用CSS规则定义对话框设置背景属性
图3-17 利用CSS样式面板编辑背景属性
图3-18 不输入用户名和密码直接登录
图3-19 文本框和密码框改变背景颜色
设计步骤
1 在Dreamweaver中打开Ajax站点，在chap03文件夹中创建一个HTML网页并保存为page3-04.html，把网页标题设置为“网站登录”。
2 在页面上插入一个表单，保留其所有默认属性，其名称为form1；利用【行为】面板把表单form1的onSubmit事件处理程序设置为“return check()”，把onReset事件处理程序设置为“resetForm();”。
3 在表单form1中插入一个边框宽度为0的表格，输入提示文字；添加一个文本框并命名为txtUsername，添加一个密码框并命名为txtPassword；添加一个提交按钮和重置按钮，并把前者的标题文字设置为“登录”。
4 切换到代码视图，在网页首部创建一个CSS样式表，源代码如下：
<style type="text/css">
<!--
.normal{background-color:#FFFFFF;}
.required{background-color:#FF9999;}
td span{color:#CC0000;}
body,td,th,input{font-family:Times New Roman;font-size:9pt;}
-->
</style>
5 在CSS样式表下方定义两个客户端JavaScript函数，源代码如下：
<script language="javascript" type="text/javascript">
function check(){
ok=true;
if(form1.txtUsername.value==""){
form1.txtUsername.className="required"; // 更改文本框的样式
document.getElementById("msg1").innerHTML="需要提供用户名。"; // 设置span元素的内容
ok=false;
}
if(form1.txtPassword.value==""){
form1.txtPassword.className="required";
document.getElementById("msg2").innerHTML="需要提供密码。";
ok=false;
}
return ok;
}
function resetForm(){
form1.txtUsername.className="normal"; // 更改文本框的样式
form1.txtPassword.className="normal";
document.getElementById("msg1").innerHTML=""; // 更改span元素内容
document.getElementById("msg2").innerHTML="";
}
</script>
6 在浏览器中打开网页，并对表单验证功能进行测试。
3.3.3 设置区块属性
下面首先介绍与区块设置相关的CSS属性，然后介绍如何在Dreamweaver CS3中设置各种区块属性。
1.块设置相关的CSS属性
在CSS中，与区块相关的主要属性包括：word-spacing，letter-spacing，text-align，vertical- align，text-indent，white-space，display，ime-mode。
（1）word-spacing属性。用于检索或设置元素中的单词之间插入的空格数，语法如下：
word-spacing:normal|length
其中：
word-spacing属性对应的脚本特性为wordSpacing。
● normal表示默认间隔（默认值）。
● length表示由浮点数字和单位标识符组成的长度值，允许为负值。示例：
div{word-spacing:10px;}
（2）letter-spacing属性。用于检索或设置元素中的文字之间的间隔，语法如下：
letter-spacing:normal|length
其中：
● normal表示默认间隔（默认值）。
● length表示由浮点数字和单位标识符组成的长度值，允许为负值。
word-spacing属性将指定的间隔添加到每个字之后，但最后一个字将被排除在外。
letter-spacing属性对应的脚本特性为letterSpacing。
示例：
div, p, span{letter-spacing:6px;}
（3）text-align属性。用于设置或检索元素中文本的水平对齐方式，仅适用于块级元素，例如p、h1～h6及ul等，语法如下：
text-align:left|center|right|justify
其中：
● left表示左对齐（默认值）。
● center表示居中对齐。
● right表示右对齐。
● justify表示两端对齐。
text-align属性对应的脚本特性为textAlign。
示例：
div{text-align:center;}
（4）vertical-align属性。用于设置或检索元素内容的垂直对齐方式，语法如下：
vertical-align:auto|baseline|sub|super|top|text-top|middle|bottom|text-bottom|length
其中：
● auto表示根据layout-flow属性的值对齐元素内容。
● baseline表示将元素内容与基线对齐（默认值）。
● sub表示垂直对齐文本的下标。
● super表示垂直对齐文本的上标。
● top表示将元素内容与元素顶端对齐。
● text-top表示将元素的文本与元素顶端对齐。
● middle表示将元素内容与元素中部对齐。
● bottom表示将元素内容与元素底端对齐。
● text-bottom表示将元素的文本与元素底端对齐。
● length可以是由浮点数字和单位标识符组成的长度值或百分数，也可以是负数。length定义由基线算起的偏移量，基线对于数值来说为0，对于百分数来说就是0%。
vertical-align属性对应的脚本特性为verticalAlign。
示例：
td, th{vertical-align:middle;}
（5）text-indent属性。用于设置或检索元素中文本的缩进量，语法如下：
text-indent:length
其中length可以是一个百分比或由浮点数字和单位标识符组成的长度值，允许为负值。默认值为0。
text-indent属性对应的脚本特性为textIndent。
示例：
p{font-family:宋体;font-size:9pt;text-indent:2em;}
（6）white-space属性。用于设置或检索元素内空格的处理方式，语法如下：
white-space:normal|pre|nowrap
其中：
● normal表示默认的处理方式，即文本自动处理换行，将多个空格折叠成一个。
● pre表示不折叠空格，即换行符和其他空白字符都将受到保护。
● nowrap表示强制在同一行内显示所有文本，直到文本结束或遇到<br />标记。
white-space属性对应的脚本特性为whiteSpace。
示例：
div, span, p{white-space:nowrap;}
（7）display属性。用于设置或检索元素是否及如何显示，语法如下：
display:block|inline|list-item|none
其中：
● block表示元素强制作为块级元素呈现并在其后添加新行，这是块级元素的默认值。
● inline表示元素强制作为行内元素呈现并从其中删除行，这是行内元素的默认值。
● list-item表示把块级元素指定为列表项目，并且可以添加项目标记。
● none表示隐藏元素。
display属性对应的脚本特性为display。
示例：
p{display:inline;} /＊ 把块级元素p转换为行内元素 ＊/
span{display:block;} /＊ 把行内元素span转换为块级元素 ＊/
（8）ime-mode属性。设置或检索是否允许用户激活输入中文、韩文等的输入法（IME）状态，语法如下：
ime-mode:auto|active|inactive|disabled
其中：
● auto表示不影响IME的状态。与不指定ime-mode属性时相同。
● active指定所有使用IME输入的字符，即激活本地语言输入法。用户仍然可以撤销激活IME。
● inactive指定所有不使用IME输入的字符，即激活非本地语言。用户仍然可以撤销激活IME。
● disabled表示完全禁用IME。对于有焦点的控件（如文本框），用户不可以激活IME。
ime-mode属性适用于IE 5及其更高版本，对应的脚本特性为imeMode。
示例：
input.Englishonly{ime-mode:disabled;} /＊ 在应用此样式的文本框中，无法打开中文输入法 ＊/
2.利用Dreamweaver CS3设置区块属性
在Dreamweaver CS3中，可以通过以下两种方式设置区块属性。
（1）使用CSS规则定义对话框。当创建或编辑CSS样式时，可以在CSS规则定义对话框中选择【区块】类别，然后对以下区块属性进行设置，如图3-20所示。
● 在【单词间距】列表框中设置单词的间距（word-spacing）。
● 在【字母间距】框中设置字母或字符之间的距离（letter-spacing）。
● 在【垂直对齐】框中指定元素的垂直对齐方式（vertical-align）。
● 在【文本对齐】列表框中设置元素中文本的对齐方式（text-align）。
● 在【文字缩进】框中指定首行缩进量（text-indent）。
● 在【空格】列表框中确定如何处理元素中的空白（white-space）。
● 在【显示】列表框中设置是否及如何显示元素（display）。
（2）使用CSS样式面板。方法如下：在CSS样式面板中展开【样式】并单击要更改的规则；单击【显示类别视图】按钮
并展开【区块】类别，然后对相关的区块属性进行设置，如图3-21所示。
图3-20 利用CSS规则定义对话框设置区块属性
图3-21 利用CSS样式面板编辑区块属性
例3-5 用CSS规则实现首行缩进二字，网页效果如图3-22所示。
设计步骤
1 在Dreamweaver中打开Ajax站点，在chap03文件夹中创建一个HTML网页并保存为page3-05.html，把文档标题设置为“制作首行缩进二字效果”。
图3-22 制作首行缩进二字效果
2 在网页首部创建CSS样式表，其中包括以下规则：
<style type="text/css">
<!--
div.headling{
font-family:"华文行楷";font-size:26px;
color:#CC0099;text-align:center;letter-spacing:6px;
}
div.headling span{
font-family:"宋体";font-size:14px;
color:#CC3300;letter-spacing:1px;
} div{
font-family:"宋体";font-size:9pt;
text-indent:20pt; /＊ 每个字的大小为9pt，字间距为1pt，两个字加上间距共占20pt ＊/
color:#003399;letter-spacing:1pt;
}
body{margin-top:3px;}
-->
</style>
3 在网页上输入《曹刿论战》的内容，标题和正文均用<div>标记定义。
4 把标题<div>的class属性设置为headling；从标题中选取“选自《左传》”，对其添加<span>标记。
5 在浏览器中查看网页效果。
3.3.4 设置方框属性
下面首先介绍与方框设置相关的CSS属性，然后介绍如何在Dreamweaver CS3中设置各种方框属性。
1.常用方框属性
在CSS中，与方框相关的属性主要包括：width，height，float，clear，margin，margin-top，margin-right，margin-bottom，margin-left，padding，padding-top，padding-right，padding- bottom，padding-left。这些属性的含义如图3-23所示。
图3-23 元素格式化时各部分的名称
（1）width属性。用于设置或检索元素的宽度，语法如下：
width:auto|length
其中：
● auto表示根据HTML定位规则在文档流中分配宽度。
● length表示由浮点数字和单位标识符组成的长度值或百分比，百分比是基于父元素的数值。该属性不能是负数。
width属性对应的脚本特性为width，其值是一个字符串，所以不可用于脚本中的计算。应使用style元素的posWidth、pixelWidth，以及元素的offsetWidth等特性。
示例：
div{width:32px;}
（2）height属性。用于设置或检索元素的高度，语法如下：
height:auto|length
其中auto和length的含义与width属性中类似。
对应的脚本特性为height，其值是一个字符串，所以不可用于脚本中的计算。应使用style元素的posHeight、pixelHeight，以及元素的offsetHeight等特性。
示例：
div{height:22px;}
（3）float属性。用于设置或检索元素是否及如何浮动，语法如下：
float:none|left|right
其中：
● none表示元素不浮动（默认值）。
● left表示元素浮动在左边，文本流向元素的右边。
● right表示元素浮动在右边，文本流向元素的左边。
当float属性不等于none引起元素浮动时，该元素将为视作块级元素，即display属性等于block。也就是说，浮动对象的display特性将被忽略。
float属性对应的脚本特性为styleFloat。
示例：
img{float:right;}
（4）clear属性。用于设置不允许有浮动元素的边，语法如下：
clear:none|left|right|both
其中：
● none表示允许两边都可以有浮动元素（默认值）。
● left表示不允许左边有浮动元素。
● right表示不允许右边有浮动元素。
● both表示不允许有浮动元素。
clear属性对应的脚本特性为clear。
示例：
div{clear:left;}
（5）margin-top、margin-right、margin-bottom和margin-left属性。分别用于设置或检索元素的上边距、右边距、下边距和左边距，语法如下：
margin-top:auto|length
margin-right:auto|length
margin-bottom:auto|length
margin-left:auto|length
其中：
● auto表示设置为相对边的值。
● length表示由浮点数字和单位标识符组成的长度值或百分比，百分比是基于父元素的高度。
若要对行内元素设置margin-top、margin-right、margin-bottom和margin-left属性，必须先设置元素的height或width属性，或者把position属性为absolute。这些属性对应的脚本特性分别为marginTop、marginRight、marginBottom和marginLeft。
示例：
body{margin-top:11.5%;}
body{margin-right:20px;}
body{margin-bottom:2em;}
body{margin-left:15pt;}
（6）margin属性。用于设置或检索元素四周的边距，语法如下：
margin:auto|length{ 1,4}
其中{ 1,4}表示可为margin属性提供1～4个值。
● auto表示设置为相对边的值。
● length表示由浮点数字和单位标识符组成的长度值或百分比，百分比是基于父元素的高度。
若提供全部4个参数值，则按上→右→下→左的顺序用于4条边。若只提供一个参数，将用于全部的4条边。若提供两个参数，第一个用于上边和下边，第二个用于左边和右边。若提供三个参数，则第一个用于上边，第二个用于左边和右边，第三个用于下边。
行内元素要使用margin-top属性，必须先设定元素的height或width属性，或者设定position属性为absolute。
margin属性对应的脚本特性为margin。
示例：
body{margin:36pt 24pt 36pt;}
div{margin:11.5%;}
div.menu{margin:10% 10% 10% 10%;}
（7）padding-top、padding-right、padding-bottom和padding-left属性。分别用于设置或检索元素的内容与上边框、右边框、下边框或左边框之间的距离，语法如下：
padding-top:length
padding-bottom:length
padding-right:length
padding-left:length
其中length可以是由浮点数字和单位标识符组成的长度值或者百分数，百分数是基于父元素的宽度。
若要对内联元素设置这些属性，必须先设定元素的height或width属性，或将其position属性设置为absolute。这些属性都不允许取负值。它们对应的脚本特性分别是paddingTop、paddingRight、paddingBottom和paddingLeft。
示例：
body{
padding-top:36pt;padding-right:36pt;
padding-bottom:36pt;padding-left:36pt;
}
（8）padding属性。用于设置或检索元素内容与其四周边框之间的距离，语法如下：
padding:length{1, 4}
其中length可以是由浮点数字和单位标识符组成的长度值或百分比，百分比是基于父元素的宽度。不允许使用负值。
若提供了全部4个参数值，则按上→右→下→左的顺序用于4条边。若只提供一个参数，将用于全部的4条边。若提供了两个参数，则第一个用于上边和下边，第二个用于左边和右边。若提供了三个，则第一个用于上边，第二个用于左边和右边，第三个用于下边。
若要对内联元素设置padding属性，必须先设定元素的height或width属性，或者将其position属性设置为absolute。padding属性不允许取负值。
该属性对应的脚本特性为padding。
示例：
body{padding:11.5%;}
body{padding:36px 36px;}
body{padding:12pt 6pt 1pt;}
body{padding:10% 10% 10% 10%;}
2.利用Dreamweaver CS3设置方框属性
在Dreamweaver CS3中，设置方框属性有以下两种方式。
（1）使用CSS规则定义对话框。创建和编辑CSS样式时，可以在CSS规则定义对话框中选择【方框】类别，然后对各种方框属性进行设置，如图3-24所示。
● 在【宽】和【高】框中，设置元素的宽度（width）和高度（height）。
● 在【浮动】框中，设置其他元素围绕元素的哪个边浮动（float）。
● 在【清除】框中，设置元素是否允许有其他元素漂浮在其旁边（clear）。
● 在【填充】区域中，指定元素内容与元素边框（如果没有边框，则为边距）之间的距离。如果选择【全部相同】复选框，则将相同的填充属性（padding）应用于元素的上侧、右侧、下侧和左侧；如果取消选择【全部相同】复选框，则可以对元素各个边的填充（padding-top、padding-right、padding-bottom和padding-left）分别进行设置。
● 在【边界】区域中，指定元素的边框（若没有边框，则为填充）与另一个元素之间的距离。若选择【全部相同】复选框，则将相同的边距属性（margin）应用于元素的上侧、右侧、下侧和左侧；若取消选择【全部相同】复选框，则可以分别设置元素各个边的边距（margin-top、margin-right、margin-bottom和margin- left）。
（2）使用CSS样式面板。操作方法如下：在CSS样式面板中，展开【所有规则】下的【样式】，单击要设置的样式；单击CSS样式面板底部的【显示类别视图】按钮
；展开【方框】类别，然后对相关属性进行修改，如图3-25所示。
图3-24 利用CSS规则定义对话框设置方框属性
图3-25 利用CSS样式面板编辑方框属性
例3-6 设置元素的边距、填充和浮动，网页效果如图3-26所示。
图3-26 设置边距、填充与浮动示例
设计步骤
1 在Dreamweaver中打开Ajax站点，在chap03文件夹中创建一个HTML网页并保存为page3-06.html，把网页标题设置为“设置边距、填充与浮动示例”。
2 在页面首部创建CSS样式表，源代码如下：
<style type="text/css">
<!--
body{
margin-top:12px;
margin-left:2em;
text-indent:2em;
}
p.nn{
margin-top:0px;
margin-bottom:0px;
}
img{
float:right;
padding-right:2em;
padding-left:2em;
}
-->
</style>
3 在页面正文部分输入4个文本段落，在第一个段落中添加一个图像；把后面两个段落的class属性设置为nn。源代码如下：
<p><img src="../images/image14.jpg" width="100" />这是一个普通的文本段落，它与其他段落之间有一个空行。
在这个段落中添加了一个图像，对这个图像设置了浮动属性（float:right），因此它浮动到了右边。</p>
<p>这是另一个普通文本段落。</p>
<p class="nn">这个段落中，上边距和下边距都被设置为0。</p>
<p class="nn">在这个段落中，上边距和下边距也被设置为0。</p>
4 在浏览器中查看网页效果。
3.3.5 设置边框属性
下面首先介绍与边框设置相关的CSS属性，然后介绍如何在Dreamweaver CS3中设置各种边框属性。
1.常用的边框属性
在CSS中，与边框设置相关的属性比较多，可以分为以下4个类别。
● 与边框颜色相关：border-color，border-top-color，border-right-color，border-bottom- color，border-left-color。
● 与边框样式相关：border-style，border-top-style，border-right-style，border-bottom-style，border-lef-style。
● 与边框宽度相关：border-width，border-top-width，border-right-width，border-bottom- width，border-left-width。
● 与边框颜色、样式和宽度相关的复合属性：border，border-top，border-right，border- bottom，border-left。
（1）border-color属性。用于设置元素四周边框的颜色，语法如下：
border-color:color{ 1,4}
设置border-color属性时，可以提供1～4个颜色参数。若只提供一个参数，将用于全部的4个边框。若提供两个参数，第一个参数用于上边框和下边框，第二个参数用于左边框和右边框。若提供三个参数，则第一个用于上边框，第二个用于左边框和右边框，第三个用于下边框。若提供全部4个参数值，将按上→右→下→左的顺序作用于4个边框。
若要使用border-color属性，必须先设置元素的height或width属性，或者设置position属性为absolute。若border-width等于0或border-style设置为none，则本属性将失去作用。
border-color属性对应的脚本特性为borderColor。
示例：
body{border-color:silver;}
body{border-color:silver red;}
body{border-color:silver red RGB(223, 94, 77);}
body{border-color:silver red RGB(223, 94, 77) black;}
（2）border-top-color、border-right-color、border-bottom-color和border-left-color属性。分别用于设置元素上边框、右边框、下边框和左边框的颜色，语法如下：
border-top-color:color
border-right-color:color
border-bottom-color:color
border-left-color:color
若要使用这些属性，必须先设置元素的height或width属性，或者设置position属性为absolute。若将border-style设置为none或border-width设置为0，则这些属性失去作用。
这些属性对应的脚本特性分别为borderTopColor、borderRightColor、borderBottomColor和borderTop Color。
示例：
div{
border-top-color:red;border-right-color:magenta;
border-bottom-color:RGB(223, 94, 77);border-left-color:black;
}
（3）border-style属性。用于设置元素边框的样式，语法如下：
border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset{1, 4}
其中：
● none表示无边框（默认值），不受任何指定的border-width值影响。
● hidden表示隐藏边框。
● dotted表示点线边框。
● dashed表示虚线边框。
● solid表示实线边框。
● double表示双线边框，两条单线与其间隔的和等于指定的border-width值。
● groove表示根据border-color的值画3D凹槽。
● ridge表示根据border-color的值画菱形边框。
● inset表示根据border-color的值画3D凹边。
● outset表示根据border-color的值画3D凸边。应用规则请参阅border-color属性
设置border-style属性时，可以提供1～4个参数值。关于这些参数的具体应用规则，请参阅border-color属性说明。
若要使用border-style属性，必须先设置元素的height或width属性，或者设置position属性为absolute。若border-width不大于0，则本属性将失去作用。
border-style属性对应的脚本特性为borderStyle。
示例：
body{border-style:double groove;}
body{border-style:double groove dashed;}
（4）border-top-style、border-right-style、border-bottom-style和border-left-style属性。分别用于设置元素上边框、右边框、下边框和左边框的样式，语法如下：
border-top-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset
border-right-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset
border-bottom-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset
border-left-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset
其中各个值的含义请参阅border-style属性说明。
若要使用这些属性，必须先设置对象的height或width属性，或者设置position属性为absolute。若border-width不大于0，则这些属性将失去作用。
这些属性对应的脚本特性为borderTopStyle、borderRightStyle、borderBottomStyle和borderLeftStyle。
示例：
div{
border-top-style:double;border-right-style:dotted;
border-bottom-style:groove;border-left-style:dashed;
}
（5）border-width属性。用于设置元素边框的宽度，语法如下：
border-width:medium|thin|thick|length{1, 4}
其中：
● medium表示默认宽度。
● thin表示小于默认宽度。
● thick表示大于默认宽度。
● length是由浮点数字和单位标识符组成的长度值，不可为负值。
设置border-width属性时，可以提供1～4个参数值。参数的应用规则请参阅border-color属性说明。
若要使用border-width属性，必须先设置对象的height或width属性，或者设置position属性为absolute。若border-style设置为none，则本属性将失去作用。
border-width属性对应的脚本特性为borderWidth。
示例：
span{border-style:solid;border-width:thin;}
span{border-style:solid;border-width:1px thin;}
（6）border-top-width、border-right-width、border-bottom-width和border-left-width属性。分别用于设置元素上边框、右边框、下边框和左边框的宽度，语法如下：
border-top-width:medium|thin|thick|length
border-right-width:medium|thin|thick|length
border-bottom-width:medium|thin|thick|length
border-left-width:medium|thin|thick|length
其中各个值的含义请参阅border-width属性说明。
若要使用这些属性，必须先设置元素的height或width属性，或者设置position属性为absolute。若border-style设置为none，则这些属性将失去作用。
这些属性对应的脚本特性分别为borderTopWidth、borderRightWidth、borderBottomWidth和borderLeft Width。
示例：
div{
border-top-width:thin;border-top-style:solid;
border-right-width:thin;border-right-style:solid;
border-bottom-width:thin;border-bottom-style:solid;
border-left-width:thin;border-left-style:solid;
}
（7）border属性。用于设置元素四周边框的宽度、样式和颜色，语法如下：
border:border-width||border-style||border-color
border属性是一个复合属性，其中：
● border-width属性用于设置边框的宽度。
● border-style属性用于设置边框的样式。
● border-color属性用于设置边框的颜色。
请参阅关于各个属性的说明。
若使用border属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。该属性的默认值为medium none，其中border-color的默认值将采用文本颜色。
要使用border属性，必须先设置元素的height或width属性，或者设定position属性为absolute。
border属性对应的脚本特性为border。
示例：
p{border:25px;}
div{border:dotted blue;}
span{border:thick double yellow;}
（8）border-top、border-right、border-bottom和border-left属性。分别用于设置元素上边框、右边框、下边框及左边框的宽度、样式和颜色，语法如下：
border-top:border-width||border-style||border-color
border-right:border-width||border-style||border-color
border-bottom:border-width||border-style||border-color
border-left:border-width||border-style||border-color
这些属性都是一个复合属性，请参阅各个属性的说明。它们的默认值为medium none，其中border-color的默认值将采用文本颜色。
这些属性对应的脚本特性分别为borderTop、borderRight、borderBottom和borderLeft。
示例：
div{
border-top:25px solid magenta;
border-right:25px solid blue;
border-bottom:25px solid red;
border-left:25px solid yellow;
}
2.利用Dreamweaver CS3设置边框属性
在Dreamweaver CS3中，可以通过以下两种方式来设置边框属性。
（1）使用CSS规则定义对话框。当创建和编辑CSS样式时，可以在CSS规则定义对话框中选择【边框】类别，然后对各种背景属性进行设置，如图3-27所示。
● 设置元素边框的样式外观。若要将相同的边框样式（boder-style）应用于元素的4个边框，可在【样式】区域选取【全部相同】复选框，然后对上边框的样式进行设置；若要分别设置元素各个边框的样式，则不要选取【全部相同】复选框，此时可对上、右、下、左边框的样式（border-top-style、border-right-style、border-bottom-style和border-left-style）分别进行设置。
● 设置元素边框的粗细。如果要将相同的边框宽度值（boder-width）应用于元素的4个边框，可在【宽度】区域选取【全部相同】复选框，然后对上边框的宽度进行设置；如果要分别设置元素各个边框的宽度，则不要选取【全部相同】复选框，此时可对元素各个边框的宽度（border-top-width、border-right-width、border-bottom-width和border-left-width）分别进行设置。
● 设置元素边框的颜色。如果要将相同的边框颜色值（boder-color）应用于元素的4个边框，可在【颜色】区域选择【全部相同】复选框，然后设置上边框的颜色；若要分别设置各个边框的颜色，则不要选取【全部相同】复选框，此时可对4个边框的颜色（border-top-color、border-right-color、border-bottom- color和border-left-color）分别进行设置。
说明 在上述操作中，如果选取了4个【全部相同】复选框，则会对元素的border属性进行设置。
（2）使用CSS样式面板。具体操作方法如下：在CSS样式面板中，在【所有规则】下展开【样式】，单击要设置的样式；单击CSS样式面板底部的【显示类别视图】按钮
；展开【边框】类别，然后对相关属性进行修改，如图3-28所示。
图3-27 利用CSS规则定义对话框设置边框属性
图3-28 利用CSS样式面板编辑边框属性
例3-7 设置边框属性。在本例中创建了8个CSS规则，分别应用于表格中的不同单元格，网页效果如图3-29所示。
图3-29 设置边框属性示例
设计步骤
1 在Dreamweaver中打开Ajax站点，在chap03文件夹中创建一个HTML网页并保存为page3-07.html，把网页标题设置为“设置边框属性示例”。
2 在网页首部创建CSS样式表，源代码如下：
<style type="text/css">
<!--
table td.style1{
border:8px dotted #0000FF;
padding:1em;
}
table td.style2{
border:8px dashed #CCCC66;
padding:1em;
}
table td.style3{
border:8px solid #CC9933;
padding:1em;
}
table td.style4{
border:8px double #666600;
padding:1em;
}
table td.style5{
border:8px groove #FF6633;
padding:1em;
}
table td.style6{
border:8px ridge #FF66CC;
padding:1em;
}
table td.style7{
border:8px inset #FF9900;
padding:1em;
}
table td.style8{
border:8px outset #99FF66;
padding:1em;
}
-->
</style>
3 在网页上插入一个2行4列的表格，把表格边框设置为0；分别在每个单元格中输入文字；把8个单元格的class属性分别设置为style1～style8。
4 在浏览器中查看网页效果。
3.3.6 设置列表属性
下面首先介绍与列表设置相关的CSS属性，然后介绍如何在Dreamweaver CS3中设置各种列表属性。
1.常用列表属性
在CSS中，与列表设置相关的属性包括：list-style-image，list-style-position，list-style- type，list-style。
（1）list-style-type属性。用于设置或检索列表项所使用的预设标记，语法如下：
list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none
其中：
● disc表示实心圆（●），这是默认值。
● circle表示空心圆（○）。
● square表示实心方块（■）。
● decimal表示阿拉伯数字（1，2，3，4，......）。
● lower-roman表示小写罗马数字（i，ii，iii，iv，......）。
● upper-roman表示大写罗马数字（I，II，III，IV，......）。
● lower-alpha表示小写英文字母（a，b，c，d，......）。
● upper-alpha表示大写英文字母（A，B，C，D，......）。
● none表示不使用项目符号。
若将list-style-image属性值为none或指定URL地址的图片不能被显示时，此属性将发生作用。
示例：
ul.in{display:list-item;list-style-position:inside;}
list-style-type属性对应的脚本特性为listStyleType。
（2）list-style-image属性。用于设置列表项标记的图像，语法如下：
list-style-image:none|url(url)
其中：
● none表示不指定图像（默认值）。
● url（url）表示使用绝对或相对URL地址指定图像。
若将此属性值设置为none或指定URL地址的图片不能被显示时，则list-style-type属性将发生作用。
list-style-image属性对应的脚本特性为listStyleImage。
示例：
ul.out{list-style-position:outside;list-style-image:url("images/ie.gif");}
（3）list-style-position属性。用于设置列表项标记如何根据文本排列，语法如下：
list-style-position:outside | inside
其中：
● outside表示将列表项目标记放置在文本以外，并且环绕文本不根据标记对齐，这是默认值。
● inside表示列表项目标记放置在文本以内，并且环绕文本根据标记对齐。
list-style-position属性在脚本中通过listStylePosition来引用。
示例：
ul.in{display:list-item;list-style-position:inside;}
（4）list-style属性。用于设置列表项目的相关样式，语法如下：
list-style:list-style-image||list-style-position||list-style-type
list-style属性是复合属性，其中：
● list-style-type用于设置列表项所使用的预设标记。
● list-style-image用于指定列表项标记的图像。
● list-style-position用于设置列表项标记如何根据文本排列。
请参阅各个属性的说明。list-style属性的默认值为：disc outside none。
当同时指定list-style-image和list-style-type时，list-style-image将获得优先权。除非list-style-imag设置为none或指定URL地址的图片不能被显示。
list-style属性对应的脚本特性为listStyle。
示例：
ol{list-style:square;}
ul{list-style:outside upper-roman;}
li{list-style:url("http://www.dhtmlet.com/devgurupix.gif") inside circle;}
2.利用Dreamweaver CS3中设置列表属性
在Dreamweaver CS3中，可以通过以下两种方式来设置列表属性。
（1）使用CSS规则定义对话框。当创建和编辑CSS样式时，可以在CSS规则定义对话框中选择【列表】类别，然后对列表项的类型、图像及位置属性进行设置，如图3-30所示。
● 从【类型】中选择一种项目符号或编号。
● 在【项目符号图像】中为项目符号指定自定义图像，可以直接输入图像文件的路径，也可以单击【浏览】来选择图像文件。
● 从【位置】中选择【外】或【内】，以设置列表项文本是否换行和缩进（外部），以及文本是否换行到左边距（内部）。
（2）使用CSS样式面板。操作方法如下：在CSS样式面板中，在【所有规则】下展开【样式】，单击要设置的样式；单击CSS样式面板底部的【显示类别视图】按钮
；展开【列表】类别，然后对相关属性进行修改，如图3-31所示。
图3-30 利用CSS规则定义对话框设置列表属性
图3-31 用CSS样式面板编辑列表属性
例3-8 通过CSS样式设置GIF图像作为项目符号，网页效果如图3-32所示。
图3-32 设置GIF图像作为项目符号
设计步骤
1 在Dreamweaver CS3中打开Ajax站点，然后在文件夹chapter03中创建一个HTML网页并保存为page3-08.html，把网页标题设置为“设置图像项目符号”。
2 在页面输入“Ajax技术组成”，然后创建一个包含5个项目的无序列表。
3 在页面首部创建一个CSS样式表，代码如下：
ul.style1{
list-style-image:url(../images/BD14868_.GIF);
margin-top:0.5em;
line-height:1.5em;
letter-spacing:1px;
}
-->
</style>
4 在标签选择器中选择<ul>标记，并在属性检查器的【样式】列表框中选择style1。
5 在浏览器中查看网页效果。
3.3.7 设置定位属性
下面首先介绍与定位设置相关的CSS属性，然后介绍如何在Dreamweaver CS3中设置各种定位属性及创建和设置AP（绝对定位）元素。
1.CSS定位属性
在CSS中，与定位相关的属性包括：position，top，left，bottom，right，z-index，visibility，clip，overflow。
（1）position属性。用于设置或检索元素的定位方式，语法如下：
position:static|absolute|relative
其中：
● static表示无特殊定位，元素遵循HTML定位规则，这是默认值。
● absolute表示把元素从正常的文档流中拖出，并使用left、right、top和bottom等属性相对于其最接近的一个有定位设置的父元素进行绝对定位。如果不存在这样的父元素，则依据body元素进行定位。元素的层叠通过z-index属性定义。
● relative表示对象不可层叠，但将依据left、right、top和bottom等属性在正常的HTML文档流中实现偏移的位置。
若要激活对象的绝对定位方式，除了把position属性设置为absolute之外，还必须至少指定left、right、top和bottom属性中的一个。
position属性对应的脚本特性为position。
示例：
div{position:relative;top:3px;}
（2）top和left属性。用于设置元素与其最近一个具有定位设置的父元素顶边和左边相关的位置，语法如下：
top:auto|length
left:auto|length
其中：
● auto表示无特殊定位，即根据HTML定位规则在文档流中分配，这是默认值。
● length是由浮点数字和单位标识符组成的长度值或百分比。必须将position属性设置为absolute或relative，length值才能生效。
这些属性对应的脚本特性为top和left，它们的值都是一个字符串，所以不可用于脚本中的计算。应使用style对象的posTop、posLeft、pixelTop、pixelLeft等运行时特性，以及对象的offsetTop、offsetLeft等特性。
示例：
div{position:relative;top:3px;left:6px;}
（3）bottom和right属性。用于设置元素与其最近一个具有定位设置的父元素底边和右边相关的位置，语法如下：
bottom:auto|length
right:auto|length
其中属性值请参阅top和left属性说明。
这些属性对应的脚本特性为bottom和right，它们的值都是一个字符串，所以不可用于脚本中的计算。应使用style对象的posBottom、posRight、pixelBottom、pixelRight等运行时特性，以及对象的offsetBottom、offsetRight等特性。
示例：
div{position:relative;bottom:3px;right:6px;}
（4）z-index属性。用于设置或检索元素的层叠顺序，语法如下：
z-index:auto|number
其中：
● auto表示遵从其父元素的定位，这是默认值。
● number是无单位的整数值，可为负数。
说明 较大number值的对象会覆盖在较小number值的对象之上。若两个绝对定位对象的此属性具有同样的number值，则依据它们在HTML文档中声明的顺序层叠。对于未指定此属性的绝对定位对象，此属性的number值为正数的对象会在其之上，而number值为负数的对象在其之下。此属性仅作用于position属性值为relative或absolute的对象。
z-index属性对应的脚本特性为zIndex。
示例：
div{position:absolute;z-index:3;width:6px;}
（5）visibility属性。用于设置或检索是否显示元素，语法如下：
visibility:inherit|visible|collapse|hidden
其中：
● inherit表示继承父元素的可见性，这是默认值。
● visible表示使对象可见。
● hidden表示使对象隐藏起来。
与display属性不同的是，visibility属性为隐藏的对象保留其占据的物理空间。
visibility属性对应的脚本特性为visibility。
示例：
img{visibility:inherit;float:right;}
（6）clip属性。用于设置对象的可视区域（此区域外的部分是透明的），语法如下：
clip:auto|rect(number number number number)
其中：
● auto表示对象无剪切，这是默认值。
● rect（number number number number）表示依据上、右、下、左的顺序提供自对象左上角为（0,0）的坐标计算的4个偏移数值，其中任何一个数值都可以用auto替换，即此边不剪切。
clip属性定义了绝对定位对象的可视区域尺寸。必须将对象的position属性的值设置为absolute，才能使用此属性。
clip属性对应的脚本特性为clip。
示例：
div{
position:absolute;
width:60px;height:60px;
clip:rect(0 20 50 10);
}
div{
position:absolute;
width:60px;height:60px;
clip:rect(1cm auto 50px 10cm);
}
（7）overflow属性。设置当元素的内容超过其指定高度和宽度时如何管理内容，语法格式如下：
overflow:visible|auto|hidden|scroll
其中：
● visible表示不剪切内容也不添加滚动条，这是默认值。
● auto表示在必要时对象内容才会被裁切或显示滚动条。
● hidden表示不显示超过对象尺寸的内容。
● scroll表示总是显示滚动条。
除了textarea对象和body对象的默认值是auto之外，所有其他对象的默认值都是visible。若将textarea对象的overflow属性设置为hidden，则将隐藏其滚动条。
overflow属性对应的脚本特性为overflow。
示例：
body{overflow:hidden;}
div{overflow:scroll;height:100px;width:100px;}
2.利用Dreamweaver CS3设置CSS定位属性
在Dreamweaver CS3中，可以通过以下两种方式设置CSS定位属性。
（1）使用CSS规则定义对话框。当创建和编辑CSS样式时，可以在CSS规则定义对话框中选择【定位】类别，然后对相关的定位属性进行设置，如图3-33所示。
图3-33 利用CSS规则定义对话框设置定位属性
● 在【类型】框中，确定浏览器应如何来定位对象（position）。
● 在【显示】框中，设置对象的初始显示条件（visibility）。
● 在【Z轴】框中，设置对象的堆叠顺序（z-index）。
● 在【宽】和【高】框中，设置对象的宽度（width）和高度（height）。
● 在【溢出】框中，设置在对象的内容超出它的大小时将发生的情况（overflow）。
● 在【置入】区域中，指定对象的位置（top、right、bottom和left）。
● 在【裁切】区域中，定义层的可见部分（clip）。
（2）使用CSS样式面板。操作方法如下：在CSS样式面板中，在【所有规则】下展开【样式】，单击要设置的样式；单击CSS样式面板底部的【显示类别视图】按钮
；展开【定位】类别，然后对相关属性进行修改，如图3-34所示。
图3-34 利用CSS样式面板设置定位属性
3.通过AP元素设计页面布局
AP元素（绝对定位元素）是分配有绝对位置的HTML页面元素，具体地说，可以是div标记或其他任何标记。AP元素可以包含文本、图像或其他任何可放置到HTML文档正文中的内容。在Dreamweaver CS3中，可以使用AP元素来设计页面的布局，可以将AP元素放置到其他AP元素的前后，隐藏某些AP元素而显示其他AP元素，以及在屏幕上移动AP元素。可以在一个AP元素中放置背景图像，然后在该AP元素的前面放置另一个包含带有透明背景的文本的AP元素。
若要在页面上插入AP div标记，则可执行下列操作之一：
● 选择【插入】→【布局对象】→【AP Div】命令，此时一个绝对定位的<div>标记插入页面中。
● 在插入栏的【布局】类别中选择【标准】选项卡，单击【绘制AP Div】按钮
，然后在页面上拖动鼠标，以绘制一个矩形。使用这种方法的优点在于可以在绘制过程中控制AP元素的位置和大小。
在页面上添加一个AP元素后，可以通过拖动左上角的
标记来移动该元素的位置，或者通过拖动其4个角及4条边上的方块控制点来调整该元素的大小，如图3-35所示。
图3-35 AP元素上的控制点
也可以利用属性检查器对AP元素的属性进行设置，如图3-36所示。
● 在【CSS-P元素】框中为AP元素指定一个ID。此ID用于在【AP元素】面板和JavaScript代码中标识AP元素。CSS-P属性检查器为相对定位元素也提供相同选项。
● 【左】和【上】指定AP元素的左上角相对于页面（如果嵌套，则为父AP元素）左上角的位置。
图3-36 利用属性检查器设置AP元素的属性
● 在【宽】和【高】框中指定AP元素的宽度和高度。
● 在【Z轴】框中确定AP元素的Z轴或堆叠顺序。
● 在【可见性】列表框中指定AP元素最初是否是可见的。使用JavaScript脚本语言可以控制可见性属性并动态地显示AP元素的内容。
● 在【背景图像】框中指定AP元素的背景图像。
● 在【背景颜色】框中指定AP元素的背景颜色。将此选项留为空白意味着指定透明的背景。
● 在【类】列表框中指定用于设置AP元素的样式的CSS类。
● 在【溢出】列表框中设置当AP元素的内容超过AP元素的指定大小时，如何在浏览器中显示AP元素。
● 在【剪辑】区域中定义AP元素的可见区域，指定左、上、右和下坐标以在AP元素的坐标空间中定义一个矩形（从AP元素的左上角开始计算）。
当处理文档时，可以使用【AP元素】面板手动显示和隐藏AP元素，以查看页面在不同条件下的显示方式。若要更改AP元素的可见性，可执行以下操作。
（1）选择【窗口】→【AP元素】命令，以打开【AP元素】面板。
（2）在AP元素的眼形图标列内单击以更改其可见性，如图3-37所示。
图3-37 利用AP元素面板更改AP元素的可见性
● 眼睛睁开
表示AP元素是可见的。
● 眼睛闭合
表示AP元素是不可见的。
● 如果没有眼形图标，AP元素通常会继承其父级的可见性。如果AP元素没有嵌套，父级就是文档正文，而文档正文始终是可见的。另外，如果未指定可见性，则不会显示眼形图标，这在属性检查器中表示为“默认”可见性。
例3-9 在本例中通过AP元素制作一个弹出式登录窗口。当在网页上单击【登录】按钮时将弹出一个登录窗口，要关闭该窗口上单击【关闭】链接即可，效果如图3-38和图3-39所示。
设计步骤
1 在Dreamweaver中打开Ajax站点，在chap03文件夹中创建一个HTML网页并保存为page3-09.html，把网页标题设置为“AP元素应用示例”。
图3-38 此时网页上未显示登录窗口
图3-39 在网页上弹出了登录窗口
2 在页面上输入文字，选择“登录”二字，在属性检查器的【链接】框中输入“#”，利用【行为】面板把此a元素的onClick事件处理程序设置为“show();”。
3 在页面上添加一个AP Div标记并命名为loginDiv，调整其位置和大小；在此AP元素内插入一个表单，在表单内添加一个表格，输入提示文字，添加文本框、密码框、提交按钮和重置按钮；在AP元素中输入“关闭”并选择这两个字，在属性检查器的【链接】框中输入“#”；利用【行为】面板把此a元素的onClick事件处理程序设置为“hide();”。
4 利用【AP元素】面板使AP元素loginDiv隐藏起来。
5 在页面首部定义a:link、a:hover和a:visited伪类样式，以设置超链接的外观。
6 切换到代码视图，查看为AP元素loginDiv生成的CSS规则（以#loginDiv作为选择符）及其他CSS规则。
7 在</head>标记之前定义两个JavaScript函数，源代码如下：
<script language="javascript" type="text/javascript">
var loginDiv=document.getElementById("loginDiv");
function show(){
loginDiv.style.visibility="visible";
}
function hide(){
loginDiv.style.visibility="hidden";
}
</script>
8 在浏览器中打开网页，对弹出式登录窗口的显示和隐藏功能进行测试。
3.3.8 设置扩展属性
下面首先介绍CSS扩展属性，然后介绍如何在Dreamweaver CS3中设置这些属性。
1.CSS扩展属性
在CSS中，常用的扩展属性包括：page-break-before，page-break-after，cursor，filter，border-collapse，border-spacing，caption-side，empty-cells，table-layout。
（1）page-break-before属性。此属性在打印文档时发生作用，用于设置元素之前出现的分页符，语法如下：
page-break-before:auto|always|avoid|left|right|null
其中：
● auto表示需要时在元素之前插入分页符。
● always表示始终在元素之前插入分页符。
● avoid表示避免在元素之前插入分页符。
● left表示在元素之前插入分页符直至到达一个空白的左页边。
● right表示在元素之前插入分页符直至到达一个空白的右页边。
● null表示空白字符串，取消分页符设置。
page-break-before属性对应的脚本特性为pageBreakBefore。
示例：
p{page-break-before:always;}
（2）page-break-after属性。此属性在打印文档时发生作用，用于设置元素前出现的分页符，语法如下：
page-break-after :auto|always|avoid|left|right|null
其中：
● auto表示需要时在元素之后插入分页符。
● always表示始终在元素之后插入分页符。
● avoid表示避免在元素后面插入分页符。
● left表示在元素后面插入分页符直至到达一个空白的左页边。
● right表示在元素后面插入分页符直至到达一个空白的右页边。
● null表示空白字符串，可取消分页符设置。
page-break-after属性对应的脚本特性为pageBreakAfter。
示例：
p{page-break-after:always;}
（3）cursor属性。用于设置移动到元素上的鼠标指针采用的光标形状，语法如下：
cursor:auto|all-scroll|col-resize|crosshair|default|hand|move|help|no-drop|
not-allowed| pointer| progress|row-resize|text|vertical-text|wait|＊-resize|url(url)
其中：
● auto表示浏览器根据当前情况自动确定鼠标光标类型，这是默认值。
● all-scroll表示有上、下、左、右4个箭头且中间有一个圆点的光标，指示页面可以向上、下、左、右任何方向滚动。
● col-resize表示有左右两个箭头、中间由竖线分隔开的光标，指示项目或标题栏可以被水平改变尺寸。
● crosshair表示简单的十字线光标。
● default表示客户端平台的默认光标，通常是一个箭头。
● hand表示竖起一只手指的手形光标，就像通常用户把光标移到超链接上时那样。
● move表示十字箭头光标，指示对象可被移动。
● help表示带有问号标记的箭头，指示有帮助信息存在。
● no-drop表示带有一个被斜线贯穿的圆圈的手形光标，指示被拖起的对象不允许在光标的当前位置被放下。
● not-allowed表示禁止标记（一个被斜线贯穿的圆圈）光标，指示请求的操作不允许执行。
● pointer表示竖起一只手指的手形光标（与hand一样），就像通常用户将光标移到超链接上时那样。
● progress表示带有沙漏标记的箭头光标，指示有一个进程正在后台运行。
● row-resize表示有上下两个箭头，中间由横线分隔开的光标，指示项目或标题栏可以在垂直方向改变尺寸。
● text表示用于标示可编辑的水平文本的光标，通常是大写字母I的形状。
● vertical-text表示编辑的垂直文本的光标，通常是大写字母I旋转90度的形状“
”。
● wait表示用于指示程序忙、用户需要等待的光标，通常是沙漏或手表的形状。
● *-resize表示用于指示对象可被改变尺寸方向的箭头光标，包括：w-resize、s-resize、n-resize、e-resize、ne-resize、sw-resize、se-resize、nw-resize。
● url（url）表示用户自定义光标，使用绝对或相对url地址指定光标文件，文件扩展名为.cur或.ani。
cursor属性对于currentStyle对象而言是只读的，对于其他对象而言是可读写的。cursor属性的值可以是多个，这些值之间用逗号分隔。若第一个值不可以被客户端系统理解或所指定的光标无法找到和显示，则第二个值将被尝试使用，依次类推。假如全部值都不可用的话，则此属性不会发生作用。光标不会被改变。cursor属性对应的脚本特性为cursor。
示例：
body{cursor:url("butterfly.gif"), url("images/cursors/bird.jpg"), default;}
（4）filter属性。用于设置对象所应用的滤镜或滤镜集合，可以生成各种特殊效果，例如渐变、模糊、透明、阴影、水平翻转、垂直翻转、遮罩等，语法如下：
filter:filter
其中filter参数表示要使用的滤镜效果，多个滤镜之间用空格隔开。
说明 filter属性仅作用于具有布局的元素，例如块级元素。若要对一个行内元素使用filter属性，必须先设置该元素的height或width属性，或设置position属性为absolute，或设置display属性为block。
filter属性对应的脚本特性为filter。
示例：
div{width:200px;filter:blur(strength=50) flipv();}
input.aFilter{filter:alpha(opacity=50);}
div{width:200px;filter:redirect;}
.aFilter{background-color:#FFFFFF;filter:light();color:#000000;width:150;}
div.aFilter{filter:glow(Color=blue,Strength=5);width:150;}
div.bFilter{filter:shadow(color=#0000FF,direction=45);width:150;color:FF0000;}
（5）border-collapse属性。用于设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开，语法如下：
border-collapse:separate|collapse
其中：
● separate表示边框独立（标准HTML样式）。
● collapse表示相邻边框被合并在一起。
border-collapse属性对应的脚本特性为borderCollapse。
示例：
table{border-collapse:separate;}
（6）border-spacing属性。用于设置或检索当表格边框独立（例如当border-collapse属性等于separate时），行和单元格的边框在横向和纵向上的间距，语法如下：
border-spacing:length||length
其中length是由浮点数字和单位标识符组成的长度值。不可为负值。
说明 当只指定一个length值时，这个值将作用于水平和垂直方向上的间距。当指定了全部两个length值时，第一个作用于水平间距，第二个作用于垂直间距。
border-spacing属性对应的脚本特性为borderSpacing。
示例：
table{border-collapse:separate;border-spacing:10px;}
（7）caption-side属性。用于设置或检索表格的标题（caption元素）放在表格的哪一边，与caption元素一起使用。语法如下：
caption-side:bottom|left|right|top
其中：
● bottom表示表格标题在下边。
● left表示表格标题在左边。
● right表示表格标题在右边。
● top表示表格标题在上边。
caption-side属性对应的脚本特性为captionSide。
示例：
table caption{caption-side:top;width:auto;text-align:left;}
（8）empty-cells属性。用于设置或检索当表格的单元格无内容时是否显示该单元格的边框。语法如下：
empty-cells:hide|show
其中：
● hide表示隐藏无内容单元格的边框。
● show表示显示无内容单元格的边框。
只有当表格边框独立时（例如当border-collapse属性等于separate时）此属性才起作用。IE5.5不支持此属性。empty-cells属性对应的脚本特性为emptyCells。
示例：
table{caption-side:top;width:auto;border-collapse:separate;empty-cells:hide;}
（9）table-layout属性。用于设置或检索表格的布局算法，语法如下：
table-layout:auto|fixed
其中：
● auto表示采用默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来，速度很慢。
● fixed表示采用固定布局的算法。在这种算法中，水平布局是仅仅基于表格的宽度、表格边框的宽度、单元格间距、列的宽度，而和表格内容无关。
table-layout属性对应的脚本特性为tableLayout。
示例：
table{table-layout:auto;}
2.利用Dreamweaver CS3设置扩展属性
在Dreamweaver CS3中，可以使用以下两种方式设置CSS扩展属性。
（1）使用CSS规则定义对话框。当创建和编辑CSS样式时，可以在CSS规则定义对话框中选择【扩展】类别，然后对相关属性进行设置，如图3-40所示。
图3-40 利用CSS规则定义对话框设置CSS扩展属性
● 在【之前】列表框中，设置在打印期间在样式所控制的元素之前强行分页的方式（page-break-before）。
● 在【之后】列表框中，设置在打印期间在样式所控制的元素之后强行分页的方式（page-break-after）。
● 在【光标】列表框中，设置当指针位于样式所控制的元素上时如何改变指针形状（cursor）。
● 在【过滤器】列表框中，设置对样式所控制的对象应用特殊滤镜效果。
也可以利用【CSS样式】面板对扩展属性进行编辑，具体操作方法如下：在代码视图或CSS样式面板中，单击要更改的CSS样式规则；单击【显示类别视图】按钮；展开【扩展】或【表、内容、引用】类别，然后对相关属性进行修改，如图3-41和图3-42所示。
图3-41 CSS样式的扩展类别
图3-42 CSS样式的表、内容、引用类别
例3-10 在本例中利用CSS制作了细线表格，并对图像和文字分别应用了Alpha滤镜和阴影滤镜，网页效果如图3-43所示。
图3-43 扩展属性应用示例
1 在Dreamweaver中打开Ajax站点，在chap03文件夹中创建一个HTML网页并保存为page4-10.html，把网页标题设置为“扩展属性应用示例”。
2 在网页首部创建CSS样式表，源代码如下：
<style type="text/css">
<!--
table{
border-collapse:collapse;
text-align:center;
}
td img{
filter:Alpha(Opacity=95,Style=2);
}
td.dsEffect{
font-family:"华文行楷";
font-size:40px;
color:#FFCC00;
filter:DropShadow(Color=#333333,OffX=2,OffY=2,Positive=1);
}
-->
</style>
【代码说明】
在上述CSS样式表中，应用了Alpha和DropShadow滤镜。Alpha滤镜的语法如下：
filter:Alpha(Opacity=value, Style=value)
其中Opacity参数指定开始时的透明度，取值为0（完全透明）～100（完全不透明）；Style参数指定渐变的形状，取值为0（均匀）、1（直线）、2（圆形）、3（矩形）。
DropShadow滤镜的语法如下：
DropShadow(Color=value, OffX=value, OffY=value, Positive=value)
其中Color参数指定阴影颜色；OffX和OffY参数指定阴影在水平方向和垂直方向上的偏移量；Positive参数指定阴影的透明度，取值为0（透明）和1（不透明）。
3 在页面上插入一个2行2列的表格，在单元格内分别输入文字或插入图像。
4 对第一行第二列单元格应用dsEffect类样式。
5 在浏览器中查看网页效果。