第十六讲CSS样式和链接的基础知识

1第二十四讲CSS样式和链接的基础知识在上一讲中，我们学习了使用CSS设计页面样式。在本讲中，我们将近一步学习CSS样式和有关链接的基础知识。通过本讲的学习，我们希望达到下面的学习目标：◆CSS样式定义（下）；◆链接的类型和状态。24.1CSS样式定义24.1.1案例24-1定义“区块”类别用户首先在属性检查器中，从“样式”弹出式菜单中选择“管理样式”。然后在出现的“编辑样式表”对话框中单击“新建”；在“新建CSS样式”对话框中，用户选择“类”，然后为新建的CSS样式命名“.math2”，并选择“定义在”选项的“仅对该文档”，单击“确定”按钮；最后，在打开的“CSS样式定义”对话框左侧的分类中选择“区块”类别；样式定义”对话框的“区块”类别有下列选项：◇“单词间距”设置单词的间距。若要设置特定的值，请在弹出式菜单中选择“值”，然后输入一个数值。在第二个弹出式菜单中，选择度量单位（例如像素等）。可以指定负值，但显示与否取决于浏览器。Dreamweaver不在“文档”窗口中显示该属性；◇“字母间距”增加或减小字母或字符的间距。若要减少字符间距，请指定一个负值（例如-4）。字母间距设置覆盖对齐的文本设置。IE4和更高版本以及Navigator6支持“字母间距”属性；◇“垂直对齐方式”指定应用它的元素的垂直对齐方式。仅当应用于img标签时，Dreamweaver才在“文档”窗口中显示该属性；◇“文本对齐”设置元素中的文本对齐方式。两种浏览器都支持“文本对齐”属性；◇“文本缩进”指定第一行文本缩进的程度。可以使用负值创建凸出，但显示取决于浏览器。仅当标签应用于块级元素时，Dreamweaver才在“文档”窗口中显示该属性。两种浏览器都支持“文本缩进”属性；◇“空格”确定如何处理元素中的空白。从下面三个选项中选择：“正常”收缩空白；“保留”的处理方式与文本被括在pre标签中一样（即保留所有空白，包括空格、制表符和回车）；“不换行”指定仅当遇到br标签时文本才换行。Dreamweaver不在“文档”窗口中显示该属性。NetscapeNavigator和IE5.5支持“空格”属性；◇“显示”指定是否以及如何显示元素；◇单击“确定”按钮，保存设置并关闭对话框。5．单击“完成”，关闭“样式”对话框。然后再单击“完成”，关闭“编辑样式表”对话框。6.选择一段文字，将该CSS样式应用于文字。观察应用样式前后文字的变化。可以导出文档中包含的CSS样式以创建新的CSS样式表，然后附加或链接到外部样式表以应用那里所包含的样式。1.从文档中导出样式以创建新的CSS样式表。选择“文件”“导出”“CSS样式”或选择“文本”“CSS样式”“导出”。打开“导出样式为CSS文件”对话框；22．在“导出样式为CSS文件”对话框中，输入样式表的名称“math2.css”，再选择正确的文件路径，然后单击“保存”。样式随即保存为CSS样式表。这里将math2.css保存在站点之外的地方；3．新建一个新的页面。通过下面的步骤可以将math2.css链接到新的页面：◇打开“CSS样式”面板；◇在“CSS样式”面板中，单击“附加样式表”按钮。打开“附加外部样式表”对话框；◇在“链接外部样式表”对话框中，可以选择下列操作之一：单击“浏览”，浏览到外部CSS样式表；在“文件/URL”框中键入指向该样式表的路径。c)这里，单击“浏览”，选择“math2.css”；◇在“添加为”中，选择其中的一个选项：a)如果要创建当前文档和外部样式表之间的链接，请选择“链接”。该选项在HTML代码中创建一个linkhref标签，并引用已发布的样式表所在的URL。不能使用链接标签添加从一个外部样式表到另一个外部样式表的引用。如果要嵌套样式表，必须使用导入指令。c)某些（但不是所有）浏览器也能识别页面中（而不仅仅在样式表中）的导入命令。当在链接到页面与导入到页面的外部样式表中存在重叠的规则时，解决冲突属性的方式具有细微的差别。如果希望导入而不是链接到外部样式表，请选择“导入”。◇单击“预览”按钮确认样式表是否将所需的样式应用于当前页面。如果应用的样式没有达到预期效果，请单击“取消”删除该样式表。页面将回复到原来的外观。◇单击“确定”。外部CSS样式表的名称出现在“CSS样式”面板中，自定义类样式前面有一个外部样式表标识符。Dreamweaver提供示例样式表，用户可以将其应用于页面。◇在“CSS样式”面板中，单击“附加外部样式表”按钮。打开“链接外部样式表”对话框；◇在“附加外部样式表”对话框中，单击“范例样式表”。“范例样式表”对话框。◇从列表框中选择一个样式表。在列表框中选择样式表的同时，“预览”窗格将显示所选样式表的文本和颜色格式；◇单击“预览”按钮应用样式表，并确认是否将所需的样式应用到当前页面中。如果应用的样式没有达到预期效果，请从列表中选择其他样式表，然后单击“预览”以查看这些样式；◇默认情况下，Dreamweaver将样式表保存在为页面定义的站点根下的名为“CSS”的文件夹中。如果该文件夹不存在，Dreamweaver将创建一个。用户可以单击“浏览”并浏览到其他文件夹，从而将文件保存在其他位置；◇找到其格式规则满足用户的设计标准的样式表后，请单击“确定”。24.1.2案例24-2定义“方框”类别1．依照前面案例的方法打开“CSS样式定义”，设置“方框”类别的选项；2.“CSS样式定义”对话框的“方框”类别有下列选项：◇“宽和高”设置元素的宽度和高度；3◇“浮动”设置其他元素（如文本、层、表格等）在哪个边围绕元素浮动。其它元素按通常的方式环绕在浮动元素的周围；◇“清除”定义不允许层的边。如果清除边上出现层，则带清除设置的元素移到该层的下方；◇“填充”指定元素内容与元素边框（如果没有边框，则为边距）之间的间距。取消选择“全部相同”选项可设置元素各个边的填充；◇“全部相同”将相同的填充属性设置为它应用于的元素的“上”、“右”、“下”和“左”侧；◇“边界”指定一个元素的边框（如果没有边框，则为填充）与另一个元素之间的间距。仅当应用于块级元素（段落、标题、列表等）时，Dreamweaver才在“文档”窗口中显示该属性。取消选择“全部相同”可设置元素各个边的边距；◇全部相同将相同的边距属性设置为它应用于的元素的“上”、“右”、“下”和“左”侧。◇单击“确定”保存设置。3．在“文档”窗口中，对一段文字应用样式。比较应用CSS前后，文字外观的不同。当鼠标移动到下方单元格的第二行文字时，该行文字周围出现一个红色的方框。但是，该方框在浏览器里是不可见的。24.1.3案例24-3定义“边框”类别1．依照前面案例的方法打开“CSS样式定义”，设置“边框”类别的选项；2.“CSS样式定义”对话框的“边框”类别有下列选项：◇“样式”设置边框的样式外观。样式的显示方式取决于浏览器。Dreamweaver在“文档”窗口中将所有样式呈现为实线。◇“宽度”设置元素边框的粗细。取消选择“全部相同”可设置元素各个边的边框宽度。◇“颜色”设置边框的颜色。可以分别设置每个边的颜色，但显示取决于浏览器。取消选择“全部相同”可设置元素各个边的边框颜色。3．单击“确定”保存设置，并将定义好的样式应用于选定的内容；4．同时按下“Ctrl＋s”键，保存页面更改。然后，按下F12键，在浏览器窗口中预览该页面。比较应用CSS前后，单元格外观的不同。24.1.4案例24-4定义“列表”类别1．依照前面案例的方法打开“CSS样式定义”，设置“边框”类别的选项；2.“CSS样式定义”对话框的“列表”类别有下列选项：◇“类型”设置项目符号或编号的外观。◇“项目符号图像”可以为项目符号指定自定义图像。◇“位置”设置列表项文本是否换行和缩进（外部）以及文本是否换行到左边距（内部）。3．单击“确定”保存设置，并将定义好的样式应用于选定的内容；4．在“文档”窗口中，比较应用CSS前后，单元格外观的不同。24.1.5案例24-5定义“定位”类别1．先在页面中新建一个层，并向层中添加文本。然后依照前面案例的方法打开“CSS样式定义”，设置“定位”类别的选项；2.“CSS样式定义”对话框的“定位”类别有下列选项：4◇“类型”确定浏览器应如何来定位层，如下所示：◇“绝对”使用“定位”框中输入的坐标（相对于页面左上角）来放置层；◇“相对”使用“定位”框中输入的坐标（相对于对象在文档的文本中的位置）来放置层。该选项不显示在“文档”窗口中；◇“静态”将层放在它在文本中的位置；◇“显示”确定层的初始显示条件。如果不指定可见性属性，则默认情况下大多数浏览器都继承父级的值。选择以下可见性选项之一：继承”继承层父级的可见性属性。如果层没有父级，则它将是可见的；可见”显示该层的内容，而不管父级的值是什么；隐藏”隐藏这些层的内容，而不管父级的值是什么。◇“Z轴”确定层的堆叠顺序。编号较高的层显示在编号较低的层的上面。值可以为正，也可以为负。◇“溢出（仅限于CSS层）”确定在层的内容超出它的大小时将发生的情况。这些属性控制如何处理此扩展，如下所示：a)“可见”增加层的大小，使它的所有内容均可见。层向右下方扩展。隐藏”保持层的大小并剪辑任何超出的内容。不提供任何滚动条。滚动”在层中添加滚动条，不论内容是否超出层的大小。专门提供滚动条可避免滚动条在动态环境中出现和消失所引起的混乱。该选项不显示在“文档”窗口中，并且仅适用于支持滚动条的浏览器。自动”使滚动条仅在层的内容超出它的边界时才出现。该选项不显示在“文档”窗口中。◇“定位”指定层的位置和大小。浏览器如何解释位置取决于“类型”设置。如果层的内容超出指定的大小，则大小值被覆盖。位置和大小的默认单位是像素。对于CSS层，还可以指定下列单位：pc（十二点活字）、pt（点）、in（英寸）、mm（毫米）、cm（厘米）、(ems)、(exs)或%（父级值的百分比）。缩写必须紧跟在值之后，中间不留空格：例如，5mm。◇“剪辑”定义层的可见部分。如果指定了剪辑区域，可以通过脚本语言（如JavaScript）访问它，并操作属性以创建像擦除这样的特殊效果。通过使用“改变属性”行为可以设置这些擦除效果。2．单击“确定”保存设置，并将定义好的样式应用于一个层；3．同时按下“Ctrl＋s”键，保存页面更改。然后，按下F12键，在浏览器窗口中预览该页面。在浏览器中，观察该层的外观的特点。24.1.6案例24-6定义“扩展”类别1．依照前面案例的方法打开“CSS样式定义”，设置“扩展”类别的选项；2.“CSS样式定义”对话框的“扩展”类别有下列选项：◇“分页”在打印期间在样式所控制的对象之前或者之后强行分页。选择要在弹出式菜单中设置的选项。此选项不受任何4.0版本浏览器的支持，但可能受未来的浏览器的支持；◇“光标”当指针位于样式所控制的对象上时改变指针图像。选择要在弹出式菜单中设置的选项；◇“过滤器”对样式所控制的对象应用特殊效果（包括模糊和反转）。从弹出式菜单中选择一种效果。这里选择反转。52．单击“确定”保存设置，并将定义好的样式应用于右边的图片；3．同时按下“Ctrl＋s”键，保存页面更改。然后，按下F12键，在浏览器窗口中预览该页面。下表给出了各种过滤器效果的描述，用户可以自己动手设置这些过滤器，察看其丰富的效果。过滤器效果描述Alpha设定一定的透明度Blur创造高速运动的模糊效果Chroma制造特殊色彩的透明效果DropShadow创造阴影效果FlipH创造水平镜像的效果FlipV创造垂直镜像的效果Glow在物体边缘整加发光效果Gray去掉图像的色彩效果Invert反转图片效果Light放置光源的效果Mask创造透明的遮罩效果Shadow创造偏移的阴影效果Wave创造沿X轴波形扭曲效果XRay仅显示物体的边缘效果表24-1过滤器的效果描述24.2链接与导航在设置了存储Web站点文档的MacromediaDreamweaverMX2004站点和创建了HTML页之后，用户需要创建从用户的文档到其它文档的连接。MacromediaD