网页制作基础教程_第2版 教学ppt课件 邓振杰 第10章.pptVIP

本章目录 装备一个铸造车间，需要熔炼设备、造型及制芯设备、砂处理设备、铸件清洗设备以及各种运输机械，通风除尘设备等。只有设备配套，才能形成生产能力。 在线教务辅导网： 教材其余课件及动画素材请查阅在线教务辅导网 QQ:349134187 或者直接输入下面地址： 本章学习目标 10.1 CSS样式的分类及应用方式 10.2　使用CSS样式表面板 10.3　新建CSS样式 10.4　设置“CSS规则定义”对话框参数 10.5　自定义CSS样式 10.6　链接外部CSS样式 10.7　编辑CSS样式 10.8　复制CSS样式 10.9　导出CSS样式 10.10　CSS样式转化为HTML标签 第10章　在网页中使用CSS样式　 本章学习目标 ● CSS样式的分类及应用方式。 ● 使用CSS样式表面板。 ● 建立CSS样式表。 ● 自定义CSS样式。 ● 链接外部CSS样式。 ● 复制CSS样式和导出CSS样式。 第10章　在网页中使用CSS样式　 10.1 CSS样式的分类及应用方式 10.1.1 CSS样式表概述 使用CSS定义的网页风格可以控制HTML语言标志的一些诸如字体、边框、颜色、背景等属性，也可以通过定义外部风格文件实现整个网站页面风格的统一。 CSS样式为一组样式，它的属性在HTML标签中依次出现，并不显示在浏览器中。CSS样式可以定义在HTML文档的标记里，也可以在外部附加文档中作为外加文件。此外，一个样式表可以作用多个页面，乃至整个站点，因此具有更好的易用性和扩展性。 使用CSS技术除了可以在单独网页中应用一致的格式以外，对于大网站的格式设置和维护更具有重要意义。 10.1 CSS样式的分类及应用方式 10.1.2 CSS样式的分类 Dreamweaver CS3可以定义几种不同类型的CSS样式，并且可以使用不同的方法将其应用在网页文档中。通常有以下3种CSS样式。 （1）自定义CSS样式（Custom CSS styles）：也称为“类样式”，可以应用于任何文本。 （2）重定义HTML标签（HTML tag styles）：HTML标签样式为HTML标识符重新定义格式化 。 （3）CSS选择器规则（CSS selector styles）：CSS选择器样式重新定义了特殊的标记组以及包含特殊序列号（ID）属性标记。 10.1 CSS样式的分类及应用方式 10.1.3 CSS样式的应用方式 使用CSS的样式有以下几种方式。 （1）局部套用：使用CSS语法定义HTML标签，这种方式应用的CSS样式只能影响该HTML标签。 （2）内联式：将CSS语法写在文档头部的STYLE和/STYLE标签中，这种方式应用的CSS样式将影响整个页面。 （3）外联式：将创建好的CSS样式保存为.css文件，在多个文档中链接此.css文件，而在文档中不会出现CSS语法。当.css文件被修改时，所有链接此.css文件的页面将同时被更新 10.1 CSS样式的分类及应用方式 10.1.4 CSS样式的冲突 在同一个文本中应用两种或两种以上的CSS样式，这些样式会相互冲突产生不可预料的效果。浏览器根据以下规则显示样式属性。 （1）如果在同一个文本中应用两种CSS样式，浏览器显示出两种样式中除冲突的属性之外的所有属性。 （2）如果在同一个文本中应用两种CSS样式相互冲突，浏览器显示出最里面的样式属性。 （3）如果存在直接冲突，自定义CSS样式的属性（应用CLASS属性的样式）将覆盖HTML标记样式的属性。 10.2 使用CSS样式表面板  使用CSS样式设置面板可以创建和管理CSS样式。通过下面的操作方法可以启用CSS样式表面板。 ● 执行主菜单中的“窗口”→“CSS样式”命令。 ● 按组合键“Shift＋F11”键。 ● 单击网页属性面板中的“CSS”按钮。 10.2 使用CSS样式表面板 在CSS样式面板中可以进行下面的操作。 （1）在列表中显示当前网页文档中的CSS样式。 （2）单击该面板底部工具栏上的“附加样式表”按钮，将打开“链接外部样式表”对话框，链接或导入外部的CSS样式表。 （3）单击该面板底部工具栏上的“新建CSS规则”按钮，将打开“新建CSS规则”对话框，设置新建CSS样式表的规则。 （4）单击该面板底部工具栏上的“编辑样式”按钮，将打开一个对话框，在该对话框中可以编辑当前文档或外部样式表中的样式。 （5）单击该面板底部工具栏上的“