网页制作背景音乐.ppt

第4章 使用CSS样式表,本章要点内容：CSS样式表的概念、类型和基本写法。利用CSS样式表面板创建和应用各种样式表。详细设置样式表内容。,本章学习目标 了解CSS样式表的概念、特点和分类。学会创建CSS样式表和应用CSS样式表。能够定制个性化的CSS样式表。本章学前要求 能够创建基本的网页。已经掌握文本和图片的操作和设置。,4.1 CSS样式表简介,4.1.1 什么是CSS HTML语言一直以来有一个缺陷，那就是将显示的效果描述与文件结构混合在一起。但是，XML语言却做到了显示效果描述与文件结构的分离，这样一方面适合各种平台上的正常显示，另一方面也极大的方便了网页制作者，因为对于相同显示效果的页面，制作者只需要设定一种统一的显示效果，所有页面都可以调用这种效果。为了让HTML适应这一形势的新规范，W3C（World Wide Web Consortium）标准化组织就开始为HTML定制样式表机制，也就是今天我们所熟悉的CSS（cascading style sheets）样式表。并且在1996年推出了CSS1，1998年推出了CSS2。目前，两大主流浏览器Netscape 的Navigator 4.0和Microsoft的Internet Explorer 4.0及以后版本都支持CSS样式。,CSS（层叠样式表）其实是一系列格式规则，这些规则由两部分组成：选择符和声明。选择符通常是指样式表的名称或特定的标签，而声明则用于定义样式元素。声明由两部分组成：属性和值。要注意的是，单一选择符的复合样式声明应该用分号隔开。术语“层叠”是指同一个网页应用多个样式表的能力，例如创建两个样式表分别用来设置字体和行距，它们同样用于一个网页。这些规则组合在一起，就可以告诉浏览器怎样去呈现一个文档。CSS样式表起初或许只为了控制文本的属性，如字体、字号、颜色等，但是随着CSS更高版本的推出，弥补了HTML对传统的文本属性控制的不足，如段落间距、行距等。除了对传统文本的控制，CSS还加入了对其他网页元素属性甚至网页布局的控制，比如图片的显示效果、网页元素的位置、表单元素的边框粗细、鼠标指针的形状、排版定位等，并且这些设置都可以随着CSS样式表文件的更新而动态更新。,4.1.2 CSS的类型,从CSS样式标签的形式来看，在Dreamweaver中主要有三种CSS样式，分别如下：1.自定义CSS样式 设计者可以在HTML文件的任何位置自定义一个CSS样式表并命名，页面中的任何元素都可以使用自定义的样式。例如定义了一个名称为“red”的样式表，目的是显示文本的颜色为红色，那么一段文字调用的时候代码如下：.redfont-color:red;定义CSS 正文 整段调用CSS 正文 部分文字调用CSS,2.重定义特定标签格式 使用这种CSS样式可以改变HTML标记的原意，从而使所有应用了这些标记的HTML文本按照CSS的定义格式显示，例如为和标签定义了CSS，那么所有包含在和标签内的内容都要按照此CSS样式进行显示，代码如下：Bodyfont-size:10pt;本例将和标签内的所有文本字体都设置为10像素大小。3.CSS选择器 CSS选择器重定义具体某个标签组合的格式，或重定义包含特定属性的所有标签的格式。最典型的实例就是定义超级链接的各种状态，如鼠标靠近、单击时、单击后等等，代码如下：a:linkcolor:#FF0000;定义正常状态颜色 a:hovercolor:#666666;定义鼠标靠近时的颜色 a:visitedcolor:#999999;定义访问过的链接的颜色 a:activecolor:#333333;定义鼠标单击时链接的颜色,4.1.3 CSS基本写法,CSS的写法主要有三种，具体如下：1.在HEAD标签内实现 在HEAD内使用HTML的style组件实现也是CSS最基本的写法，通常是将样式表的规则放置在文件头区域，位于中，代码如下：样式表开始.redcolor:FFFF00；样式表的内容 样式表结束 type一项表示使用的是text中CSS书写的代码，的前面部分是样式的类型和名称，中的是样式的属性和值。,2.在BODY标签内实现 在BODY中实现的方法主要是将CSS的规则直接写在HTML的标记中直接引用，如要设置一段文字的大小为“10pt”，代码如下：单元格内容 这样的写法可以用于针对页面中某一个特定的标签对象使用，但是需要大量修改标签样式的时候，这种办法是不适用的，也体现不出CSS的优点。3.调用外部文件调用外部的CSS文件是最明智的做法，网站的统一风格正是通过此种写法来实现的，比如有一个CSS文件名称为Style.css，此文件中按照本章稍后介绍的办法定义了一些规则，那么任何一个HTML文档想调用这个CSS文件，只需要在该HTML文档的头部加入以下代码：其中，href的值就是外部CSS文件的路径。,4.2 使用“CSS样式”面板,在Dreamweaver 中，“CSS样式”面板用来创建CSS样式、查看CSS样式属性以及将CSS样式属性附加到文档中的元素。可以通过下面任意一种方式打开“CSS样式”面板：1）通过选择“窗口”菜单“CSS样式”命令。2）同时按下键盘Shift键和F11键。打开“CSS样式”面板如图4.1所示。,图4.1“CSS样式”面板,位于“CSS样式”面板底部的四个按钮的作用分别如下所述。“附加样式表”按钮：用于打开如图4.2所示的“链接外部样式表”对话框，选择要链接到或导入到当前文档中的外部样式表。“新建CSS样式”按钮：打开如图4.3所示的“新建CSS样式”对话框，选择要创建的样式类型。,图4.2“链接外部样式表”对话框,图4.3“新建CSS样式”对话框,“编辑样式表”按钮：打开如图4.4所示的“编辑样式表”对话框，编辑当前文档或外部样式表中的任何样式。“删除CSS样式”按钮：删除“CSS样式”面板中的所选CSS样式，并删除该样式应用于任何元素中的格式设置。本书将以第4章的“本章实例”目录下的“样本原文.html”为例，对以上几个操作进行讲解。,图4.4“编辑样式表”对话框,4.2.1 新建样式表,用户可以通过创建一个新的CSS样式自动完成HTML标签的格式设置或CLASS属性所标识文本范围的格式设置，在本章实例目录下已经创建了一个“实例样本.html”文件，其中包含了实例所需要的CSS样式表，“样本原文.html”文件是实例所涉及到的文本。创建新的CSS样式的步骤如下。步骤1：打开本章实例目录下的“样本原文.html”，将光标定位到Dreamweaver的文档中。步骤2：打开“CSS样式面板”，单击“新建CSS样式”按钮，或通过选择“文本”菜单“CSS样式/新建”命令，弹出“新建CSS样式”对话框，如图4.5所示。,图4.5“新建CSS样式”对话框,步骤3：定义所要创建的CSS样式的“选择器类型”，三个选项解释如下：1）若要创建可作为CLASS属性应用于文本范围或文本块的自定义样式，请选择“类（可用于任何标签）”的单选按钮，然后在“名称”下拉列表框中输入样式名称。本实例首先选择“类”单选框，创建了一个名称为“.test1”的CSS样式表。提示：1.自定义样式（CLASS）名称必须以句点开头，并且可以包含任何字母和数字组合，例如定义一个设置文本为红色的CSS样式可以命名为“.red”。如果您没有输入开头的句点，Dreamweaver 将自动输入。2.一个良好的习惯是在命名类的时候，根据它们的功能而不是根据它们的外观，比如要将所有的用于标题的文本设置成为同一个类，可命名为“.title“。如本书创建第一个样式表名为test1。2）若要重定义特定HTML标签的默认格式，请选择“标签（重定义特定标签的外观）”单选框，然后在“标签”域中输入或从下拉菜单中选择一个HTML标签，如图4.6所示。当设置完毕后，所有被设置的HTML标签就都遵循这个样式了，“实例样本.html”中设置了一个“body”标签，在其中设置背景色为“#CCCCCC”，目的是让网页主体的部分背景色为设定的“#CCCCCC”。,3）若要为具体某个标签组合或所有包含特定ID属性的标签定义格式，请选择“高级（ID、上下文选择器等）”单选框，然后在“选择器”域中输入或从下拉菜单中一个或多个HTML标签，如图4.7所示。下拉菜单中提供的选择器包括a:active、a:hover、a:link、a:visited，这些标签主要是用来设置超级链接的样式，“实例样本.html”中对超链接的样式进行了定义。若要为包含特定ID属性的标签定义样式，“选择器”的命名就需要在前面增加“#”，后面跟数字和字母的组合，例如“实例样本.html”创建了一个名称为“#test2”的样式表。,图4.6“标签”选择器类型 图4.7“高级”选择器,步骤4：在“定义在”功能区选择定义样式的位置，本实例选择“仅对该文档”，两个选项的解释如下：1）若要创建外部样式表，请选择“新建样式表文件”单选框，通常情况下整个网站的外观定义可以使用这种办法创建CSS样式表，“实例样本.html”创建了一个名为“style.css”的外部样式表文件。2）若创建的CSS样式表只在文档中使用，也就是在当前文档中嵌入样式表，请选择“仅对该文档”单选框，例如“实例样本.html”中的test1、test2样式表。步骤5：若在步骤4中选择“新建样式表文件”单选框，单击“确定”按钮，Dreamweaver 弹出如图4.8所示的“保存样式表文件为”对话框，选择样式表的保存位置并指定文件名，然后单击“保存”按钮，弹出如图4.9所示的“CSS样式定义”对话框，在此填写“style”，在单击“保存”按钮（如本章实例下的“style.css”文件）。若在步骤4中选择“仅对该文档”，单击“确定”按钮，则直接弹出“CSS样式定义”对话框。,步骤6：对“CSS样式定义”对话框中的参数进行设置，如字体、大小、行高、修饰等等，分类当中可以选择对不同类别的对象进行设置，在本书4.3中将具体说明。本实例新建的样式表tes1、test2以及style.css都是将文本的字体颜色设置为红色，所以此处将字体颜色设置为红色，十六进制的值是“#FF0000”，针对特定标签“body”在“背景”分类中设置背景颜色为“#CCCCCC”。,图4.8“保存样式表文件为”对话框 图4.9“CSS样式定义”对话框,提示：浏览器默认的超级链接的颜色是蓝色，有下划线。如果在第3步中选择了为超级链接设置样式，则可以设置用于链接的文本的字体颜色、效果等，这就是为什么我们浏览网站的时候，鼠标靠近或点击各文本的超级链接的时候效果不一样的原因了。步骤7：设置完样式属性后，单击“确定”按钮即可。,4.2.2 应用样式表,1.附加样式表 如果一个网页需要引用外部的CSS文件，则需要单击“附加样式表”按钮，弹出如图4.10所示的“链接外部CSS样式表文件”对话框，单击“浏览”按钮，弹出“选择样式表文件”对话框，如图4.11所示，选择外部文件。如果外部CSS样式表文件是当前网页创建的不需要进行此操作，如“实例样本.html”中创建的“style.css”外部CSS文件。如果创建CSS样式表的时候选择的位置是“仅对该文档”，那么不需要链接操作，如“实例样本.html”中的test1、test2和body样式。,图4.10“链接外部样式表”对话框 图4.11“选择样式表文件”对话框,2.使用自定义样式 无论是内嵌的样式表还是外部样式表文件，这些与当前文档关联的所有自定义样式（CLASS）都显示在“CSS样式”面板的“样式”列表中以及文本“属性”面板的“样式”下拉列表中，如图4.12和图4.13所示。应用自定义CSS样式的操作步骤如下。步骤1：选择文本，主要有两种办法：1）如果要将CSS样式用于部分文本，则需要选择应用CSS样式的文本。2）如果要将CSS样式用于整段文本，则需要将光标定位在段落中或选中整段。,图4.12“CSS样式”面板 图4.13 文本“属性”面板样式列表,步骤2：应用CSS样式，需要执行下列操作之一。1）在“CSS样式”面板的“样式”列表中用鼠标右键单击要应用的样式的名称，如图4.14所示，本例单击“CSS样式”面板上的样式表名称，如test1，在弹出的上下文菜单中选择“套用”命令。2）在文本“属性”面板中，单击“样式”下拉列表，选择“red”，如图4.15所示。,图4.14“CSS样式”面板 图4.15 文本“属性”面板样式列表,3）在“文档”窗口中，右键单击所选文本，在上下文菜单中选择“CSS样式”，然后选择要应用的样式，如图4.16所示。步骤3：图4.17所示的是“实例样本.html”各种方式创建的CSS样式表应用的可视化效果和代码的对比，其中自定义类样式效果就是自定义样式的应用。,图4.16 鼠标右键的“CSS样式”菜单 图4.17 设置CSS后的效果,提示：细心的读者一定会发现，如果本段文本设置成段落格式，则CSS样式应用于整个段落，代码为。若只选中部分文字应用样式，会出现的形式，如图4.18所示。,图4.18 部分文本应用CSS样式,3.取消自定义样式 将自定义样式从选定内容中删除的操作步骤如下。步骤1：在文本“属性”面板中，根据需要单击“样式”右侧的下拉列表框，选择“无”，则取消了当前的CSS样式应用。步骤2：在“文档”窗口中，右键单击所选文本，在上下文菜单中选择“CSS样式”，然后选择“无”即可。4.使用其他CSS样式 如果我们创建的CSS样式是重定义特定HTML标签的默认格式，那么不需要额外说明，浏览器会自动将特定的HTML标签格式显示为定义的CSS样式，如图4.17所示的网页主体的颜色，就是定义了标签“body”的背景色为“#CCCCCC”。如果我们创建的CSS样式是为具体某个标签组合或所有包含特定ID属性的标签定义格式，那么使用分两种情况。（1）定义超级链接的样式,超级链接样式包括默认链接（a:link）、活动连接（a:active）、鼠标靠近链接（a:hover）、已访问的链接（a:visited）四种状态样式，“实例样本.html”文件中也对链接的状态定义了CSS样式，如图4.17所示，一旦我们使用超链接就会遵循定义的CSS样式显示。当然，也可以单独设置超级链接的样式，如超级链接文本即该超级链接使用了test1样式表定义的样式。（2）定义所有包含特定ID属性的标签格式 应用定义所有包含特定ID属性的标签格式方法和应用自定义CSS样式类似，步骤如下。步骤1：在“实例样本.html”文件中定义了一个名位“#test2”的样式表，显示在“CSS样式”面板上，如图4.19所示。步骤2：选中要设置的文字段落，鼠标右键单击“CSS样式”面板上的“#test2”，在弹出的菜单中选择“套用”命令，效果如图4.20所示。,提示：在Dreamweaver MX 2004之前的版本，当设置文本的属性的时候，HTML代码中都使用和标签，这是传统HTML样式设置的方法。而现在所有对文本的设置Dreamweaver MX 2004都为其创建了一个CSS样式表，可以供本页面上所有需要同样设置的文本调用。,图4.19“#test2”样式 图4.20 段落文字应用了CSS样式后,4.2.3 编辑样式表,对CSS样式表进行修改最简单的办法就是在“CSS样式表”面板上单击要编辑的样式名称，如本章实例的“.test1”,然后单击“编辑样式”按钮，弹出“.red的CSS样式定义”对话框，如图4.21所示。如果设计者比较熟悉HTML，当单击“.test1”样式的名称时，Dreamweaver中右侧原来的“标签”面板组就会变成“规则”面板组，“规则”面板组下会出现“CSS属性”浮动面板，在“CSS属性”面板中显示了所有可以用来设置的CSS属性，如图4.22所示。,图4.21“.red的CSS样式定义”对话框 图4.22“CSS属性”面板,提示：如果是外部CSS文件，则在“CSS样式”面板上显示外部样式表文件的名称和样式列表，如图4.23所示，编辑方法同内部CSS样式表。如果双击外部CSS样式表文件名称，则打开该文件，如图4.24所示。,图4.23 外部CSS样式列表 图4.24 打开外部样式表文件,4.2.4 CSS的冲突,CSS样式与HTML样式之间或者CSS样式之间也会产生矛盾，此时网页的效果就会受到影响。但是，设计者应该知道浏览器对于显示CSS样式遵循3个规则，分别是：1）当多个不同的CSS样式应用于同一段文本的时候，浏览器将显示所有的属性设置，除非属性之间本身就矛盾，如字体大小既是10pt又是12pt，浏览器是按照下文所描述的就近原则显示的。2）当不同的CSS应用到同一个对象而产生冲突时，浏览器根据CSS与文本的远近来决定显示，比如有两个CSS，一个设置名称为“green”，是将字体设置为绿色，一个名称是“red”，是将字体设置为红色，设置情况如图4.25所示。,图4.25 CSS的就近原则,因为标签离文字最近，所以即使整段的文字设置为红色，“叠样式表文本”应用了“green”样式也会显示绿色。3）当与HTML中设置的属性产生冲突时，浏览器优先显示CSS设置的属性。比如图4.26所示，将整行文本的通过标签设置HTML样式为绿色，但是“叠样式表文本”应用了名为“red”CSS样式，由于CSS样式的优先权比HTML高，所以这段文字依然显示为绿色。,图4.26 CSS样式的优先权高于HTML样式,4.3 CSS的具体样式设置,CSS样式的设置是很丰富的，本小节在本章实例目录下创建了一系列的实例，比较详细的向读者介绍CSS的样式设置，内容包括文本、背景、区块、方框、列表等。其间，会出现读者还没有学过的知识，我们会给出知识链接，指明将在哪里用到，因为在后面的学习中会经常用到CSS样式设置。另外，本小节的内容也可以作为后面章节样式设置的参考。,4.3.1 文本样式设置,在本章实例目录下已经创建了一个名为“文本样式设置”的HTML文件，显示的是应用文本样式设置的效果。在“文本样式设置”文件中，定义了名为“.test”的CSS样式表，如图4.27所示。,图4.27 文本样式设置,在“分类”列表中，默认的“类型”就是文本，主要设置如下。字体：选择文本的字体，如果找不到系统中安装的别的字体，可在“字体”下拉列表中选择“编辑字体列表”来增加字体。大小：字体的字号，如图4.28所示，有系统设置好的相对效果，也可以设置固定的数值，常用的单位是“点数（pt）”，这种字体可以跟随显示器分辨率变化。一般的网站正文习惯使用10pt，标题使用14pt。样式：将“正常”、“斜体”或“偏斜体”指定为字体样式，默认设置是“正常”，如图4.29所示。对于字体本身就设置了斜体的应采用斜体，本身没有设置斜体的采用偏斜体。,图4.28 字体大小设置 图4.29 字体样式,行高：类似于Word中的行距的概念，选项包括“自动”和“（值）”，“自动”是计算机自动调整行高，“（值）”是设计者用数值和单位进行具体设置，比较直观的写法是用百分比，例如180%是指行高等于文字大小的1.8倍。如字体为14pt，要设置行距为2倍行距，则行高的值应该是28pt，对比图如4.30所示，上面两行是设置了行距的CSS样式应用效果，下面两行是没有设置CSS样式。修饰：文字的修饰效果，包括“下划线”、“上划线”、“删除线”、“闪烁”和“无”。粗细：设置字体的粗细，有设定的相对粗细，也可以设置具体的数值。,图4.30 设置行高效果,变量：包括“正常”和“小型大写字母”，因为英文中的大写字母比较大，采用“小型大写字母”设置可以缩小大写字母，Netscape Navigator不支持此样式。变量：包括“正常”和“小型大写字母”，因为英文中的大写字母比较大，采用“小型大写字母”设置可以缩小大写字母，Netscape Navigator不支持此样式。大小写：包括“首字母大写”、“大写”、“小写”和“无”，主要是设置字母大小写规则，IE不支持此样式效果。颜色：设置字体的颜色。,4.3.2 背景样式设置,与HTML设置背景相比，CSS样式更加灵活多变，比如可以对网页中文本、表格、页面等任何元素应用背景属性。在“背景样式设置”的网页文件中本书同样创建了名为“test”的样式表来定义背景样式，在“CSS样式定义“对话框“分类”列表中选择“背景”分类，如图4.31所示。图4.32中部分使用了“test”样式，背景样式设置正如图4.31所示，其中背景图片不会随着网页的滚动而滚动，而会保持相对固定的位置。主要设置如下。,图4.31 背景样式设置 图4.32 固定背景样式应用,背景颜色：通过选色器选择一种颜色作为背景色。背景图像：通过浏览按钮选择作为背景的图像。重复：包括“不重复”、“重复”、“横向重复”、“纵向重复”，定义是否重复以及如何重复背景图像。附件：包括“固定”和“滚动”，用来设置背景图像跟不跟随网页一起滚动，因此，设计者可以设计一张足够大的图片来作为网页背景。但是，Netscape不支持这种效果。水平位置和垂直位置：设置背景图像相对于元素的初始位置，这里的元素包括网页、表格、文本等。“水平位置”设置如图4.33所示，“垂直位置”，如图4.34所示。如果附件属性为“固定”，则位置相对于“文档”窗口而不是元素。Netscape Navigator 不支持此属性。,图4.33 水平位置 图4.34 垂直位置,4.3.3 区块样式设置,“区块”设置可以定义标签和属性的间距和对齐，通常适用于整段的文本和表格的单元格。在“背景样式设置”的网页文件中本书创建了名为“.test”的样式表用来设置区块样式，在“CSS样式定义”对话框“分类”列表中选择“区块”，如图4.35所示。具体设置如下。单词间距：包括“正常”和“（值）”两个设定，一般值的单位是像素，用来设置英文单词之间的距离。数值为正数则增加间距，负数则减小间距。,图4.35 区块样式设置,提示：间距可以指定负值，数值为正数则增加间距，负数则减小间距。但显示情况也要取决于浏览器，Dreamweaver 不在“文档”窗口中显示该属性，需要在浏览器中才能显示效果。字母间距：包括“正常”和“（值）”两个设定，一般值的单位是像素，用来设置英文字母或中文之间的距离。数值为正数则增加间距，负数则减小间距。垂直对齐：用来设置对象的垂直对齐方式（不仅包括文本，还有图像等）包括“基线”、“下标”、“上标”、“顶部”、“文本顶对齐”、“中线对齐”、“底部”、“文本底对齐”，或者使用数值来设定，数值的单位是百分比。提示：垂直对齐的设置在今后设置表格内单元格内容的时候尤其适用。,文本对齐：设置文本的水平对齐方式。文字缩进：设置文本的首行缩进，类似于Word的缩进功能，方法是结合数值和单位。如果中文要缩进两个字符，习惯使用与字体同样的单位，数值是字体大小的两倍，如字体设置为12pt，那么缩进量就应该是24pt，如图4.36所示，第一段设置了缩进，第二段没有设置。,图4.36 设置缩进,空格：控制源代码中的文字空格，如图4.37所示，“正常”选项将忽略源代码中文字之间的所有空格；“保留”选项则保留源代码中所有的空格形式，包括空格、制表符和回车；“不换行”选项设置文字不自动换行，仅当遇到HTML的换行标签时文本才换行。如图4.38所示，同样内容的文字，第一段设置了“不换行”，第二段没有设置。显示：指定是否显示元素以及如何显示元素，如果选择“无”则关闭CSS样式被指定给的元素的显示。,图4.37 设置空格 图4.38 设置“不换行”效果对比,4.3.4 方框样式设置,“方框”（又称“盒子”）类别可以为控制元素在页面上的放置方式的标签和属性定义设置。在本章实例目录下的“方框样式设置”网页文件中本书创建了名为“.test”的样式表用来设置方框样式，在“分类”列表中选择“方框”，如图4.39所示。具体设置如下。宽和高：设置元素的宽度和高度。宽和高定义的对象多为图片、表格、层等，本实例设置如图4.39种所示，“层叠样式表文本实例”文本应用效果如图4.40所示，右侧的空白就是设置方块宽200像素多出来的。,图4.39 方框设置,浮动：设置元素浮动方式（如文本、层、表格等），功能类似于Word的图片文字环绕功能。若定义浮动为“左对齐”，环绕的文本自动排列在应用了该样式元素的右侧，若定义为“右对齐”，环绕的文本自动排列在应用了该样式元素的左侧，图4.40所示的是“方框样式设置”网页文件中设置的左对齐效果。IE和Netscape都支持这种设置。清除：不允许元素的浮动。“左对齐”：表示不允许左边有浮动对象，“右对齐”表示不允许右边有浮动对象，“两者”表示允许两边都可以有浮动对象，“无”表示不允许有浮动对象。填充：指定元素内容与元素边框（如果没有边框，则为边距）之间的间距，比较适合表格的设置。,图4.40 应用方框样式效果,全部相同：将相同的填充属性设置为元素的“上”、“右”、“下”和“左”侧，取消选择“全部相同”选项可设置元素各个边的填充。边界：指定一个元素的边框（如果没有边框，则为填充）与另一个元素之间的间距。仅当应用于块级元素（段落、标题、列表等）时，Dreamweaver MX 2004才在“文档”窗口中显示该属性设置的效果。全部相同：将相同的边距属性设置为元素的“上”、“右”、“下”和“左”侧，取消选择“全部相同”可设置元素各个边的边距。,4.3.5 边框样式设置,“边框”类别可以定义元素周围的边框的设置，如宽度、颜色和样式，它的设置对象包括段落、表单对象、表格、列表等等。在本章实例目录下的“边框样式设置”网页文件中本书创建了名为“.test”的样式表用来设置边框样式，在“分类”列表中选择“边框”，如图4.41所示。样式：设置边框的样式外观，选项有“点划线”、“虚线”、“实线”、“双线”、“槽状”、“脊状”、“凹陷”、“突出”等，但显示的效果取决于浏览器，Dreamweaver MX 2004在“文档”窗口中将所有样式呈现为实线。,图4.41 边框设置,全部相同：将相同的边框样式属性设置“上”、“右”、“下”和“左”侧，取消选择“全部相同”可设置元素各个边的边框样式。宽度：设置元素四个方向边框的粗细，预设值有“粗”、“中”、“细”，也可以手工设置值。设置后的效果如图4.42所示。两种浏览器都支持“宽度”属性。全部相同：将相同的边框宽度设置的“上”、“右”、“下”和“左”侧，取消选择“全部相同”可设置元素各个边的边框宽度。颜色：设置边框的颜色。可以分别设置每个边的颜色，但显示取决于浏览器。全部相同：将相同的边框颜色设置元素的“上”、“右”、“下”和“左”侧，取消选择“全部相同”可设置元素各个边的边框颜色。图4.42是对文本设置了“层叠样式表文本实例”这段文本使用了边框样式后的效果。,图4.42 设置边框效果,4.3.6 列表样式设置,“列表”样式设置主要是为列表标签定义属性，如项目符号大小和类型等。在本章实例目录下的“列表样式设置”网页文件中本书创建了名为“.test”的样式表用来设置列表样式，在“分类”列表中选择“列表”，可以打开的列表设置如图4.43所示。类型：设置项目符号或编号的外观，设置内容如图4.44所示。两种浏览器都支持“类型”。,图4.43 列表样式设置 图4.44 项目编号类型设置,项目符号图像：可以为项目符号指定自定义图像，方法就是单击“浏览”选择图像或直接键入图像的路径。位置：设置列表项目缩进的程度，选择“外”，列表贴近左侧边框；选择“内”，列表缩进，效果如图4.45所示，本实例为第二大段的文本创建了一个名为“test2”的样式，列表样式中的“位置”设置为“内”。,图4.45 列表位置设置效果,4.3.7 定位样式设置,“定位”样式主要用来对层进行设置，但在Dreamweaver中，层是可视化操作的，因此，此样式设置并不常用。一般也就是将标签或所选文本块转化为层的内容。在本章实例目录下的“定位样式设置”网页文件创建了名为“.test1”和“test2”的两个样式表用来对比不同定位样式的效果。在“分类”中选择“定位”，如图4.46所示。,图4.46 定位样式设置,类型：确定浏览器应如何来定位层。绝对：使用“定位”框中输入的坐标（相对于页面窗口的左上角顶点）来放置层，无论鼠标怎么拖都不会改变位置。相对：使用“定位”功能区的设置框中输入坐标（相对于对象在文档的文本中的位置）来放置层，该选项不显示在“文档”窗口中。静态：将层放在它在文本中的位置，跟随文本的插入点保持静态。本章实例设置中test1样式设置为绝对定位，test2设置为相对定位，其余设置一样。图4.47显示了绝对和相对效果，第一段文本为绝对定位，不受前面分段符的影响，第二段文本是相对定位，受分段符的影响，浏览器效果如图4.48所示。,图4.47 类型设置对比 图4.48 浏览器中的对比效果,显示：确定层的初始显示条件。如果不指定可见性属性，则默认情况下大多数浏览器都继承父级的值。可供选择的可见性选项如下。继承：继承层父级的可见性属性，如果层没有父级，则它将是可见的。可见：显示该层的内容，而不管父级的值是什么。隐藏：隐藏这些层的内容，而不管父级的值是什么。Z轴：确定层的堆叠顺序，编号较高的层显示在编号较低的层的上面。值可以为正，也可以为负。提示：使用“层”面板更改层的堆叠顺序更容易。溢出（仅限于CSS层）：确定在层的内容超出它的大小时将发生的情况，这些属性控制如何处理此扩展，选项如下。可见：增加层的大小，使它的所有内容均可见，层向右下方扩展。隐藏：保持层的大小并剪辑任何超出的内容，不提供任何滚动条。滚动：在层中添加滚动条，不论内容是否超出层的大小。专门提供滚动条可避免滚动条在动态环境中出现和消失所引起的混乱。该选项不显示在“文档”窗口中，并且仅适用于支持滚动条的浏览器。Internet Explorer 和 Netscape Navigator 6支持此属性。,自动：使滚动条仅在层的内容超出它的边界时才出现，该选项不显示在“文档”窗口中。定位：指定层的位置和大小。浏览器如何显示位置取决于“类型”设置。如果层的内容超出指定的大小，则大小值不起作用。位置和大小的默认单位是像素。对于 CSS 层，还可以指定下列单位：pc（十二点活字）、pt（点）、in（英寸）、mm（毫米）、cm（厘米）、（ems）、（exs）或%（父级值的百分比）。缩写必须紧跟在值之后，中间不留空格，例如，3mm。剪辑：定义层的可见部分，这个部分是一个矩形区域，由坐标来描述。坐标的相对圆点是层的左上角的顶点，对应的值是“左”和“上”，右下角的顶点对应的值是“右”和“下”。如果指定了剪辑区域，可以通过脚本语言（如JavaScript）访问它，并操作属性以创建像“擦除”这样的特殊效果。通过使用“改变属性”行为可以设置这些效果。,4.3.8 扩展样式设置,“扩展”样式属性包括过滤器、分页和光标选项，它们中的大部分效果仅受Internet Explorer 4.0和更高版本的支持。在本章实例目录下的“定位样式设置”网页文件中创建了若干个样式表，主要来设置体现过滤器的效果。在样式定义对话框的“分类”列表中选择“扩展”，如图4.49所示。分页：当需要打印网页的时候，可以在样式所控制的对象之前或者之后强行插入一个分页符，选择的内容包括“之前”和“之后”，它们的候选项都一样的，包括“自动”、“总是”、“左对齐”、“右对齐”。目前的浏览器不支持该选项，但未来的浏览器可能支持。,图4.49 扩展样式设置,自动：仅当打印的页面没有空间的时候，在当前元素前面或后面插入分页符，实现分页。总是：不管当前页面有没有空间，强行在当前元素前面或后面插入分页符。左对齐：会在一个元素的前面或后面放入一个或两个分页符，直至达到一个空白的左页。右对齐：会在一个元素的前面或后面放入一个或两个分页符，直至达到一个空白的左页。提示：“左对齐”和“右对齐”只有在文件进行双面打印的时候才会应用到。光标：位于“视觉效果”选项区的“光标”选项用来设置光标显示属性，如图4.50所示，当指针位于样式所控制的对象上时改变指针图像，具体属性说明如图4.51所示。,过滤器：又称CSS滤镜，如图4.52所示，对样式所控制的对象应用特殊效果。正是有了滤镜属性，页面才变得更加漂亮。具体的设置说明如图4.53所示。,图4.50 光标设置 图4.51 光标属性设置说明,图4.52 过滤器设置 图4.53 过滤器设置说明,Alpha：在Flash和Photoshop中经常见到“Alpha”，就是把一个目标元素与背景混合，设计者可以指定数值来控制混合的程度，通俗地说就是一个元素的透明度。Opacity代表透明度的值，范围是0到100，0表示完全透明，100表示不透明；FinishOpacity 设置渐变透明效果时指定结束的透明度值；Style指定渐变的显示形状，取值0表示没有渐变，1表示线性渐变，2表示圆形渐变，3表示矩形辐射；StartX和StartY渐变开始的 X与Y坐标值；FinishX和FinishY表示渐变结束的X与Y坐标值。图4.54是“本章实例”目录下的图片设置Alpha后的效果。BlendTrans：它的功能也比较单一，就是产生一种精细的淡入淡出的效果，参数也只有一个Duration，用来设置变换持续的时间。Blur：模糊效果滤镜，把它加载到文字上，产生风吹模糊的效果，类似立体字。也可以把Blur滤镜加载到图片上，能达到用图象处理软件制作的效果。Add指定是否产生印象派的模糊效果，值为true和false；Direction指明模糊产生的方向，单位是角度；Strength指定模糊效果的半径，默认的是5像素。如图4.55所示，是使用Blur后的效果。,Chroma：将指定的颜色设置为透明。Color为指定透明的颜色，值是用十六进制来表示。,图4.54 Alpha滤镜效果 图4.55Blur滤镜效果,DropShadow：添加对象的投影阴影效果。Color代表投影的颜色，为十六进制值；OffX和OffY代表投影的X，Y方向上的偏移量；Positive用来选择为透明像素建立阴影还是为不透明像素建立阴影，值为true和false。设置效果如图4.56所示。Shadow：设置阴影效果。Color指明阴影的颜色，用十六进制的RGB值来描述；Direction指明阴影的方向，值的单位是角度。Shadow效果与Dropshadow的不同在于他可以在对象的任意方向上产生阴影。设置效果如图4.57所示。,图4.56投影阴影效果 图4.57阴影效果,FlipH和FlipV：翻转效果，FlipH为水平翻转，FlipV为垂直翻转。Glow：设置发光效果。Color指明发光的颜色，Strength指明发光的强度，值为1到255之间的整数。Gray：产生灰度效果。Invert：设置翻转底片效果，类似于相片底片。Light：能产生一个模拟光源的效果，配合使用一些简单的Javascrpt，使对象产生奇特光照的效果。Mask：设置遮罩效果，产生的是矩形遮罩，参数Color用来指定遮罩的颜色。RevealTrans动态滤镜：动态滤镜，它能产生24种动态效果，还能在这些动态效果中随机抽用其中的一种。用它来进行网页之间的动态切换，非常方便。,Wave：设置水平与垂直波动效果，作用是把对象按照垂直的波形样式扭曲。Add指定是否加入原图像，值是true和false；Freq指明波形的数量；Lightsrength指明波长，取值范围是0到100；Phase指明正弦波的起始偏移量，取值范围是0到100；Strength指明波的振幅。效果如图4.58所示。Xray：设置X光照效果。效果如图4.59所示。,图4.58Wave效果 图4.59Xray滤镜效果,4.3.9 时间样式表,在Dreamweaver MX 2004中时间样式表并不是一种样式，而是一种辅助设计功能，使得在设计制作网页的时候隐藏或显示一些外部样式表，在浏览网页的时候又会显示或隐藏这些样式表的效果。打开方法是在“CSS”样式表面板上单击鼠标右键，如图4.60所示，在弹出的上下文菜单中选择“设计时