第4章 旅游网站CSS样式设置(免费下载).pptVIP

　　本章将介绍CSS样式的基本知识和在Dreamweaver CS5中设置CSS样式的基本方法。 * Dreamweaver CS5 网页制作基础教程 第4章　旅游网站CSS样式设置 学习目标 了解CSS速记规则与普通规则的区别。 了解设置CSS样式首选参数的方法。 了解CSS类型等属性的基本涵义的设置技巧。 掌握创建、编辑、管理和应用CSS样式的方法。 4.1　设计思路 本章将重点放在如何创建和设置CSS样式上，即通过Dreamweaver CS5如何创建、编辑、管理和应用CSS样式。实际上，在第3章已或多或少地涉及了CSS样式的使用，如设置页面属性和通过【属性（CSS）】面板设置文本字体、大小和颜色等。本章将介绍通过【CSS样式】面板创建和设置CSS样式的方法，例子仍然使用第3章制作的4个网页“jianjie.htm”、“yanbian.htm”、“qihou.htm”和“zhibei.htm”。通过本章的操作，这些网页将变得更加美观。 4.2 关于CSS样式 CSS产生背景 CSS层叠次序 CSS速记格式 　HTML的初衷是用于定义网页内容，即通过使用h1、p、table等标签来表达“这是标题”、“这是段落”、“这是表格”等信息。至于网页布局由浏览器来完成，而不使用任何的格式化标签。由于当时盛行的两种浏览器Netscape和Internet Explorer不断将新的HTML标签和属性（如字体标签和颜色属性）添加到HTML规范中，致使创建网页内容清晰地独立于网页表现层的站点变得越来越困难。 为了解决这个问题，非营利的标准化联盟W3C（万维网联盟）肩负起了HTML标准化的使命，并在HTML 4.0之外创造出了样式（Style）。现在，所有的主流浏览器均支持CSS层叠样式表。 4.2.1 CSS产生背景 　内联样式（在HTML元素内部）拥有最高的优先权，然后依次是内部样式表（位于head标签内部）、外部样式表、浏览器默认设置。 4.2.2 CSS层叠次序 　CSS规范支持使用速记CSS的简略语法格式创建CSS样式，可以用一个声明指定多个属性的值。 h1 { font-weight: bold; font-size: 16pt; line-height: 18pt; font-family: Arial; font-variant: normal; font-style: normal; font-stretch: normal; font-size-adjust: none } 下面使用一个速记属性重写这一规则，可能的形式为 h1 { font: bold 16pt/18pt Arial } 4.2.3 CSS速记格式 4.3 创建CSS样式 使用【CSS样式】面板 创建CSS样式 编辑CSS样式 　使用【CSS样式】面板可以查看、创建、编辑和删除CSS样式。 4.3.1 使用【CSS样式】面板 4.3.2 创建CSS样式 在【CSS样式】面板中，可以创建CSS样式。 如果对创建的样式不满意，可以进行修改。除了直接在【CSS样式】面板中修改属性值外，还可以直接双击样式名称打开规则定义对话框重新设置属性，包括添加属性、修改属性或删除属性，不需要的属性设置直接保留空白即可 。 4.3.3 编辑CSS样式 4.4 应用CSS样式 应用CSS样式 附加外部样式表 在Dreamweaver CS5中，可以通过多种途径来应用已经创建好的CSS样式。 1、应用类样式：在【属性（HTML）】面板的【类】下拉列表中选择类样式名称，也可在【属性（CSS）】面板的【目标规则】下拉列表中选择类样式名称。 4.4.1 应用CSS样式 在给文本应用CSS类样式时，在文档中首先要选择要应用CSS样式的文本。可以将插入点放在段落中，这样可以将样式应用于整个段落。如果要指定要应用CSS样式的确切HTML标签，可在文档窗口左下角的HTML标签选择器中选择相应的标签。如果在单个段落中选择了一个文本范围，则CSS样式只影响所选范围。如果要对多个段落同时应用一个类样式，可以同时选中多个段落。 除了通过【属性】面板应用类样式外，还可以在【文本】/【CSS样式】菜单命令中选择类样式名称将其应用到所选的内容上，也可在文档窗口中单击右键，在弹出的快捷菜单中选择【CSS样式】命令，然后选择要应用的样式。在【CSS样式】面板的【全部】模式下，用鼠标右键单击要应用的样式名称，然后从快捷菜单选择【套用】命令也可。 如果要在文本或其他对象中删除已应用的类样式，首先要选择从中删除样式的文本或对象，在【属性（HTML）】面板的【类】下拉列表中选择“无”即可。 应用ID名称样式：选中对象，然后将其ID名称设置为创建的ID名称样式中的I