第讲样式表和模板.pptVIP

广东金融学院 LOGO 广东金融学院 广东金融学院 第10讲 样式表和模板 参考资源： 3/kcpt/jkx.html 《大学计算机Ⅱ》 * * 广东金融学院 本次课内容 1．样式表概述； 2．使用样式表格式化网页； 3．模板概述； 4．创建和编辑模板； 5．使用模板创建网页； 6．总结和作业。 * 广东金融学院 * 1．样式表概述 问题的引出 1) 问题一：通常情况下，网页中有很多元素格式（如文本格式、超链接格式等）都采用相同的格式，对于这些相同格式，我们需要不厌其烦地对每个元素进行重复设置，其工作量很大，而且也非常枯燥。 2) 问题二：在网页编辑或网页维护过程中，我们可能需要对网页中的某些格式进行修改，但由于该格式在网页中多次重复使用（如超链接格式），因此修改操作也同样极其烦锁，而且还很可能出现错改和漏改的问题。 * 广东金融学院 * 1．样式表概述 样式表的概念 样式表（英文为Cascading Style Sheets，简称为CSS）是为了方便设置网页元素的格式而制定的一系列规则，是对HTML标记语言功能的补充。 在网页文档中使用CSS技术，可以有效地扩充HTML语言的功能，对页面的布局、字体、颜色、背景和其他效果实现更加精确的格式控制。此外，CSS技术在简化网页的格式代码、保持网站页面风格一致和减少重复性格式设置等方面，也发挥着重要的作用。 * 广东金融学院 * 1．样式表概述 按保存方式不同，样式表可分为： 内联样式表 嵌入式样式表 外部样式表 按样式表的作用规则不同，样式表可分为： 类样式 标签样式 高级样式 * 广东金融学院 * 1．样式表概述 内联样式表 使用style属性，直接把样式表的内容放在标记里面，从而把特殊的样式加入到由标记控制的信息中。由于内联样式表和某一标记混在一起，不能被网页中的其他元素引用，因此内联样式表只适用于为单个标记定义样式表的情况。 如：table … bordercolor=#0066FF style=border-collapse:collapse * 广东金融学院 * 1．样式表概述 嵌入式样式表 使用style标记将样式表嵌入在HTML文件的头部位置。嵌入式样式表，可以在当前网页的任何位置引用。因此，如果要求定义的样式表只能应用于当前网页，可以选择这种类型的样式表。 * 广东金融学院 * head … … style type=text/css .table_frame { border: thin solid #0066FF; } /style /head 1．样式表概述 外部样式表 将样式表保存在一个单独的样式表文件中，文件的扩展名为“*.CSS”。由于外部样式表以文件的方式单独存储，故整个站点中的网页都可以引用到。 类样式 该类样式均以句点“.”开头，并且可以被网页文件中的任何文本块或其他元素引用。 例如，可以创建名称为“.red”的类样式，设置“color”属性为红色，然后将该样式应用到一部分已定义样式的段落文本中。 * 广东金融学院 * 1．样式表概述 标签样式 使用标签样式可以重定义特定标记（如P或H1标记等）的格式。例如，为H1标记创建标签样式，便可以重新定制标记H1的格式，网页文档中所有用H1标记设置了格式的文本都会立即更新为新的格式。 高级样式 用于重定义特定标记组合的格式或者所有包含特定ID属性的标记定义格式。 * 广东金融学院 * 2．使用样式表格式化网页 新建“.title_text”样式表 * 广东金融学院 * 2．使用样式表格式化网页 新建“.general_text”样式表 * 广东金融学院 * 2．使用样式表格式化网页 新建“textarea”样式表 * 广东金融学院 * 2．使用样式表格式化网页 新建链接样式 * 广东金融学院 * 2．使用样式表格式化网页 几个问题 1) 在a:link、a:visited、a:hover及a:active样式表新建前和新建后，分别预览网页查看超链接的样式有什么不同？ 2) 在textarea样式表新建前、新建后和编辑后，对网页中的文本域表单对象有什么影响？ 3) 在.title_text、.general_text样式表新建前后，网页中的文本格式有什么变化？ * 广东金融学院 * 2．使用样式表格式化网页 引用样式表 附加样式表 引用类样式 选择网页元素 在“属性”面板中的“样式”下拉列表或“类”下拉列表中选择一个样式 一个元素可引用多个样式，样式采用叠加原则 一个样式可同时被多个网页元素引用 * 广东金融学院 * 2．使用样式表格式化网页 问题： 如果重新编辑上述创建的4个样式，网页中被格式化的元素会自动同步变化吗？为什么？ * 广东金融学院 * 3．模板概述 模板的概念 模板是一个特殊的网页，在Dr