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

《第十六讲CSS样式和链接的基础知识.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第二十四讲CSS样式和链接的基础知识在上一讲中，我们学习了使用CSS设计页面样式。在本讲中，我们将近一步学习CSS样式和有关链接的基础知识。通过本讲的学习，我们希望达到下面的学习目标：◆CSS样式定义（下）；◆链接的类型和状态。24.1CSS样式定义24.1.1案例24-1定义“区块”类别ü1.用户首先在属性检查器中，从“样式”弹出式菜单中选择“管理样式”。然后在出现的“编辑样式表”对话框中单击“新建”；ü2.在“新建CSS样式”对话框中，用户选择“类”，然后为新建的CSS样式命名“.math2”，并选择“定义在”选项的“仅对该文档”，单击“确定”按钮；ü3.最后，在打开的“CSS样式定义”对

2、话框左侧的分类中选择“区块”类别；ü4.“CSS样式定义”对话框的“区块”类别有下列选项：ü◇“单词间距”设置单词的间距。若要设置特定的值，请在弹出式菜单中选择“值”，然后输入一个数值。在第二个弹出式菜单中，选择度量单位（例如像素等）。可以指定负值，但显示与否取决于浏览器。Dreamweaver不在“文档”窗口中显示该属性；ü◇“字母间距”增加或减小字母或字符的间距。若要减少字符间距，请指定一个负值（例如-4）。字母间距设置覆盖对齐的文本设置。IE4和更高版本以及Navigator6支持“字母间距”属性；ü◇“垂直对齐方式”指定应用它的元素的垂直对齐方式。仅当应用于标签时，Dream

3、weaver才在“文档”窗口中显示该属性；ü◇“文本对齐”设置元素中的文本对齐方式。两种浏览器都支持“文本对齐”属性；ü◇“文本缩进”指定第一行文本缩进的程度。可以使用负值创建凸出，但显示取决于浏览器。仅当标签应用于块级元素时，Dreamweaver才在“文档”窗口中显示该属性。两种浏览器都支持“文本缩进”属性；ü◇“空格”确定如何处理元素中的空白。从下面三个选项中选择：“正常”收缩空白；“保留”的处理方式与文本被括在pre标签中一样（即保留所有空白，包括空格、制表符和回车）；“不换行”指定仅当遇到br标签时文本才换行。Dreamweaver不在“文档”窗口中显示该属性。NetscapeNav

4、igator和IE5.5支持“空格”属性；ü◇“显示”指定是否以及如何显示元素；ü◇单击“确定”按钮，保存设置并关闭对话框。5．单击“完成”，关闭“样式”对话框。然后再单击“完成”，关闭“编辑样式表”对话框。6.选择一段文字，将该CSS样式应用于文字。观察应用样式前后文字的变化。可以导出文档中包含的CSS样式以创建新的CSS样式表，然后附加或链接到外部样式表以应用那里所包含的样式。1.从文档中导出样式以创建新的CSS样式表。选择“文件”>“导出”>“CSS样式”或选择“文本”>“CSS样式”>“导出”。打开“导出样式为CSS文件”对话框；2．在“导出样式为CSS文件”对话框中，输入样式表的名称

5、“math2.css”，再选择正确的文件路径，然后单击“保存”。样式随即保存为CSS样式表。这里将math2.css保存在站点之外的地方；3．新建一个新的页面。通过下面的步骤可以将math2.css链接到新的页面：ü◇打开“CSS样式”面板；ü◇在“CSS样式”面板中，单击“附加样式表”按钮。打开“附加外部样式表”对话框；ü◇在“链接外部样式表”对话框中，可以选择下列操作之一：Øa)单击“浏览”，浏览到外部CSS样式表；Øb)在“文件/URL”框中键入指向该样式表的路径。c)这里，单击“浏览”，选择“math2.css”；ü◇在“添加为”中，选择其中的一个选项：a)如果要创建当前文档和外部样式

6、表之间的链接，请选择“链接”。该选项在HTML代码中创建一个linkhref标签，并引用已发布的样式表所在的URL。Øb)不能使用链接标签添加从一个外部样式表到另一个外部样式表的引用。如果要嵌套样式表，必须使用导入指令。c)某些（但不是所有）浏览器也能识别页面中（而不仅仅在样式表中）的导入命令。当在链接到页面与导入到页面的外部样式表中存在重叠的规则时，解决冲突属性的方式具有细微的差别。如果希望导入而不是链接到外部样式表，请选择“导入”。ü◇单击“预览”按钮确认样式表是否将所需的样式应用于当前页面。如果应用的样式没有达到预期效果，请单击“取消”删除该样式表。页面将回复到原来的外观。ü◇单击“确定

7、”。外部CSS样式表的名称出现在“CSS样式”面板中，自定义类样式前面有一个外部样式表标识符。Dreamweaver提供示例样式表，用户可以将其应用于页面。ü◇在“CSS样式”面板中，单击“附加外部样式表”按钮。打开“链接外部样式表”对话框；ü◇在“附加外部样式表”对话框中，单击“范例样式表”。“范例样式表”对话框。ü◇从列表框中选择一个样式表。在列表框中选择样式表的同时，“预览”窗格将显示所选样