第十六讲css样式和链接的基础知识(精品）

《第十六讲css样式和链接的基础知识(精品）》由会员分享，可在线阅读，更多相关《第十六讲css样式和链接的基础知识(精品）（6页珍藏版）》请在金锄头文库上搜索。

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

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

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

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

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

6、择“math2.css”； 在“添加为”中，选择其中的一个选项： a) 如果要创建当前文档和外部样式表之间的链接，请选择“链接”。该 选项在 HTML 代码中创建一个 link href 标签，并引用已发布的样式 表所在的 URL。 b) 不能使用链接标签添加从一个外部样式表到另一个外部样式表的引 用。如果要嵌套样式表，必须使用导入指令。 c) 某些（但不是所有）浏览器也能识别页面中（而不仅仅在样式表中） 的导入命令。当在链接到页面与导入到页面的外部样式表中存在重叠 的规则时，解决冲突属性的方式具有细微的差别。如果希望导入而不 是链接到外部样式表，请选择“导入”。 单击“预览”按钮确认样式表是

7、否将所需的样式应用于当前页面。如果应用 的样式没有达到预期效果，请单击“取消”删除该样式表。页面将回复到原 来的外观。 单击“确定”。外部 CSS 样式表的名称出现在“CSS 样式”面板中，自 定义类样式前面有一个外部样式表标识符。 Dreamweaver 提供示例样式表，用户可以将其应用于页面。 在“CSS 样式”面板中，单击“附加外部样式表”按钮。打开“链接外 部样式表”对话框； 在“附加外部样式表”对话框中，单击“范例样式表”。“范例样式表”对 话框。 从列表框中选择一个样式表。在列表框中选择样式表的同时，“预览”窗格 将显示所选样式表的文本和颜色格式； 单击“预览”按钮应用样式表，并确

8、认是否将所需的样式应用到当前页面 中。 如果应用的样式没有达到预期效果，请从列表中选择其他样式表，然后 单击“预览”以查看这些样式； 默认情况下，Dreamweaver 将样式表保存在为页面定义的站点根下的名为 “CSS”的文件夹中。如果该文件夹不存在，Dreamweaver 将创建一个。用户 可以单击“浏览”并浏览到其他文件夹，从而将文件保存在其他位置； 找到其格式规则满足用户的设计标准的样式表后，请单击“确定”。24.1.2 案例24-2 定义“方框”类别 1依照前面案例的方法打开“CSS样式定义”，设置“方框”类别的选项； 2.“CSS 样式定义”对话框的“方框”类别有下列选项： “宽和

9、高”设置元素的宽度和高度； “浮动”设置其他元素（如文本、层、表格等）在哪个边围绕元素浮动。其 它元素按通常的方式环绕在浮动元素的周围； “清除”定义不允许层的边。如果清除边上出现层，则带清除设置的元素移 到该层的下方； “填充”指定元素内容与元素边框（如果没有边框，则为边距）之间的间 距。取消选择“全部相同”选项可设置元素各个边的填充； “全部相同”将相同的填充属性设置为它应用于的元素的“上”、“右”、 “下”和“左”侧； “边界”指定一个元素的边框（如果没有边框，则为填充）与另一个元素之 间的间距。仅当应用于块级元素（段落、标题、列表等）时，Dreamweaver 才在“文档”窗口中显示该

10、属性。取消选择“全部相同”可设置元素各个边 的边距； 全部相同将相同的边距属性设置为它应用于的元素的“上”、“右”、 “下”和“左”侧。 单击“确定”保存设置。 3在“文档”窗口中，对一段文字应用样式。比较应用CSS前后，文字外观的不同。当鼠标移动到下方单元格的第二行文字时，该行文字周围出现一个红色的方框。但是，该方框在浏览器里是不可见的。 24.1.3 案例24-3 定义“边框”类别 1依照前面案例的方法打开“CSS样式定义”，设置“边框”类别的选项； 2.“CSS 样式定义”对话框的“边框”类别有下列选项： “样式”设置边框的样式外观。样式的显示方式取决于浏览器。Dreamweaver 在

11、“文档”窗口中将所有样式呈现为实线。 “宽度”设置元素边框的粗细。取消选择“全部相同”可设置元素各个边的 边框宽度。 “颜色”设置边框的颜色。可以分别设置每个边的颜色，但显示取决于浏览 器。取消选择“全部相同”可设置元素各个边的边框颜色。 3单击“确定”保存设置，并将定义好的样式应用于选定的内容； 4同时按下“Ctrls”键，保存页面更改。然后，按下F12键，在浏览器窗口中预览该页面。比较应用CSS前后，单元格外观的不同。24.1.4 案例24-4 定义“列表”类别 1依照前面案例的方法打开“CSS样式定义”，设置“边框”类别的选项； 2.“CSS 样式定义”对话框的“列表”类别有下列选项：

12、“类型”设置项目符号或编号的外观。 “项目符号图像”可以为项目符号指定自定义图像。 “位置”设置列表项文本是否换行和缩进（外部）以及文本是否换行到左边 距（内部）。 3单击“确定”保存设置，并将定义好的样式应用于选定的内容； 4在“文档”窗口中，比较应用CSS前后，单元格外观的不同。 24.1.5 案例24-5 定义“定位”类别 1先在页面中新建一个层，并向层中添加文本。然后依照前面案例的方法打开“CSS样式定义”，设置“定位”类别的选项； 2. “CSS 样式定义”对话框的“定位”类别有下列选项： “类型”确定浏览器应如何来定位层，如下所示： “绝对”使用“定位”框中输入的坐标（相对于页面左

13、上角）来放置层； “相对”使用“定位”框中输入的坐标（相对于对象在文档的文本中的位 置）来放置层。该选项不显示在“文档”窗口中； “静态”将层放在它在文本中的位置； “显示”确定层的初始显示条件。如果不指定可见性属性，则默认情况下大 多数浏览器都继承父级的值。选择以下可见性选项之一： a)“继承”继承层父级的可见性属性。如果层没有父级，则它将是可见 的； b)“可见”显示该层的内容，而不管父级的值是什么； c)“隐藏”隐藏这些层的内容，而不管父级的值是什么。 “Z 轴”确定层的堆叠顺序。编号较高的层显示在编号较低的层的上面。值 可以为正，也可以为负。 “溢出（仅限于 CSS 层）”确定在层的内容超出它的大小时将发生的情况。 这些属性控制如何处理此扩展，如下所示： a)“可见”增加层的大小，使它的所有内容均可见。层向右下方扩展。 b)“隐藏”保持层的大小并剪辑任何超出的内容。不提供任何滚动条。 c)“滚动”在层中添加滚动条，不论内容是否超出层的大小。专门提供滚 动条可避免滚动条在动态环境中出现和消失所引起的混乱。该选项不显 示在“文档”窗口中，并且仅适用于支持滚动条的浏览器。 d)“自动”使滚动条仅在层的内容超出它的边界时才出现。该选项不显示 在“文档”窗