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

第二十四讲 CSS样式和链接的基础知识 在上一讲中，我们学习了使用CSS设计页面样式。在本讲中，我们将近一步学习CSS样式和有关链接的基础知识。通过本讲的学习，我们希望达到下面的学习目标： ◆ CSS 样式定义（下）； ◆ 链接的类型和状态。 24.1 CSS 样式定义 24.1.1 案例24-1定义“区块”类别 ? 1.用户首先在属性检查器中，从“样式”弹出式菜单中选择“管理样式”。然后在出现的“编辑样式表”对话框中单击“新建”； ? 2. 在“新建 CSS 样式”对话框中，用户选择“类”，然后为新建的CSS样式命名“.math2”，并选择“定义在”选项的“仅对该文档”，单击“确定”按钮； ? 3. 最后，在打开的“CSS 样式定义”对话框左侧的分类中选择“区块”类别； ? 4.“CSS 样式定义”对话框的“区块”类别有下列选项： ? ◇“单词间距”设置单词的间距。若要设置特定的值，请在弹出式菜单中选择 “值”，然后输入一个数值。在第二个弹出式菜单中，选择度量单位（例如 像素等）。可以指定负值，但显示与否取决于浏览器。Dreamweaver 不在 “文档”窗口中显示该属性； ? ◇“字母间距”增加或减小字母或字符的间距。若要减少字符间距，请指定一 个负值（例如 -4）。字母间距设置覆盖对齐的文本设置。IE4 和更高版本以 及Navigator 6 支持“字母间距”属性； ? ◇“垂直对齐方式”指定应用它的元素的垂直对齐方式。仅当应用于 img 标 签时，Dreamweaver 才在“文档”窗口中显示该属性； ? ◇“文本对齐”设置元素中的文本对齐方式。两种浏览器都支持“文本对齐” 属性； ? ◇“文本缩进”指定第一行文本缩进的程度。可以使用负值创建凸出，但显示 取决于浏览器。仅当标签应用于块级元素时，Dreamweaver 才在“文档”窗 口中显示该属性。两种浏览器都支持“文本缩进”属性； ? ◇“空格”确定如何处理元素中的空白。从下面三个选项中选择：“正常”收 缩空白；“保留”的处理方式与文本被括在 pre 标签中一样（即保留所有空 白，包括空格、制表符和回车）；“不换行”指定仅当遇到 br 标签时文本 才换行。Dreamweaver 不在“文档”窗口中显示该属性。Netscape Navigator 和 IE5.5 支持“空格”属性； ? ◇“显示”指定是否以及如何显示元素； ? ◇单击“确定”按钮，保存设置并关闭对话框。 5．单击“完成”，关闭“样式”对话框。然后再单击“完成”，关闭“编辑样式表”对话框。 6.选择一段文字，将该CSS样式应用于文字。观察应用样式前后文字的变化。 可以导出文档中包含的 CSS 样式以创建新的 CSS 样式表，然后附加或链接到外部样式表以应用那里所包含的样式。 1. 从文档中导出样式以创建新的 CSS 样式表。选择“文件”“导出”“CSS 样式”或选择“文本”“CSS 样式”“导出”。打开“导出样式为 CSS 文件”对话框； 2．在“导出样式为 CSS 文件”对话框中，输入样式表的名称“math2.css”，再选择正确的文件路径，然后单击“保存”。 样式随即保存为 CSS 样式表。这里将math2.css保存在站点之外的地方； 3．新建一个新的页面。通过下面的步骤可以将math2.css链接到新的页面： ? ◇打开“CSS 样式”面板； ? ◇在“CSS 样式”面板中，单击“附加样式表”按钮。打开“附加外部样 式表”对话框； ? ◇在“链接外部样式表”对话框中，可以选择下列操作之一： ? a) 单击“浏览”，浏览到外部 CSS 样式表； ? b) 在“文件/URL”框中键入指向该样式表的路径。 c) 这里，单击“浏览”，选择“math2.css”； ? ◇在“添加为”中，选择其中的一个选项： a) 如果要创建当前文档和外部样式表之间的链接，请选择“链接”。该 选项在 HTML 代码中创建一个 link href 标签，并引用已发布的样式 表所在的 URL。 ? b) 不能使用链接标签添加从一个外部样式表到另一个外部样式表的引 用。如果要嵌套样式表，必须使用导入指令。 c) 某些（但不是所有）浏览器也能识别页面中（而不仅仅在样式表中） 的导入命令。当在链接到页面与导入到页面的外部样式表中存