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

1、Dreamweaver CS5网页制作基础教程 本章将介绍CSS样式的基本知识和在Dreamweaver CS5中设置CSS样式的基本方法。 第4章旅游网站CSS样式设置学习目标了解CSS速记规则与普通规则的区别。了解设置CSS样式首选参数的方法。了解CSS类型等属性的基本涵义的设置技巧。掌握创建、编辑、管理和应用CSS样式的方法。4.1设计思路本章将重点放在如何创建和设置CSS样式上，即通过Dreamweaver CS5如何创建、编辑、管理和应用CSS样式。实际上，在第3章已或多或少地涉及了CSS样式的使用，如设置页面属性和通过【属性（CSS）】面板设置文本字体、大小和颜色等。本章将介绍通过

2、【CSS样式】面板创建和设置CSS样式的方法，例子仍然使用第3章制作的4个网页“jianjie.htm”、“yanbian.htm”、“qihou.htm”和“zhibei.htm”。通过本章的操作，这些网页将变得更加美观。 4.2 关于CSS样式CSS产生背景 CSS层叠次序 CSS速记格式 HTML的初衷是用于定义网页内容，即通过使用、等标签来表达“这是标题”、“这是段落”、“这是表格”等信息。至于网页布局由浏览器来完成，而不使用任何的格式化标签。由于当时盛行的两种浏览器Netscape和Internet Explorer不断将新的HTML标签和属性（如字体标签和颜色属性）添加到HTML规

3、范中，致使创建网页内容清晰地独立于网页表现层的站点变得越来越困难。 为了解决这个问题，非营利的标准化联盟W3C（万维网联盟）肩负起了HTML标准化的使命，并在HTML 4.0之外创造出了样式（Style）。现在，所有的主流浏览器均支持CSS层叠样式表。 4.2.1 CSS产生背景内联样式（在HTML元素内部）拥有最高的优先权，然后依次是内部样式表（位于标签内部）、外部样式表、浏览器默认设置。 4.2.2 CSS层叠次序CSS规范支持使用速记CSS的简略语法格式创建CSS样式，可以用一个声明指定多个属性的值。h1 font-weight: bold;font-size: 16pt;line-he

4、ight: 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样式

5、。 如果对创建的样式不满意，可以进行修改。除了直接在【CSS样式】面板中修改属性值外，还可以直接双击样式名称打开规则定义对话框重新设置属性，包括添加属性、修改属性或删除属性，不需要的属性设置直接保留空白即可 。4.3.3 编辑CSS样式4.4 应用CSS样式应用CSS样式 附加外部样式表在Dreamweaver CS5中，可以通过多种途径来应用已经创建好的CSS样式。1、应用类样式：在【属性（HTML）】面板的【类】下拉列表中选择类样式名称，也可在【属性（CSS）】面板的【目标规则】下拉列表中选择类样式名称。 4.4.1 应用CSS样式 在给文本应用CSS类样式时，在文档中首先要选择要应用CS

6、S样式的文本。可以将插入点放在段落中，这样可以将样式应用于整个段落。如果要指定要应用CSS样式的确切HTML标签，可在文档窗口左下角的HTML标签选择器中选择相应的标签。如果在单个段落中选择了一个文本范围，则CSS样式只影响所选范围。如果要对多个段落同时应用一个类样式，可以同时选中多个段落。除了通过【属性】面板应用类样式外，还可以在【文本】/【CSS样式】菜单命令中选择类样式名称将其应用到所选的内容上，也可在文档窗口中单击右键，在弹出的快捷菜单中选择【CSS样式】命令，然后选择要应用的样式。在【CSS样式】面板的【全部】模式下，用鼠标右键单击要应用的样式名称，然后从快捷菜单选择【套用】命令也可

7、。如果要在文本或其他对象中删除已应用的类样式，首先要选择从中删除样式的文本或对象，在【属性（HTML）】面板的【类】下拉列表中选择“无”即可。 应用ID名称样式：选中对象，然后将其ID名称设置为创建的ID名称样式中的ID。在【CSS样式】面板中单击【附加样式表】按钮，链接外部样式表。网页文档附加了外部样式表并加以引用后，当编辑外部样式表时，链接到该样式表的所有网页文档全部更新以反映所做的编辑。 4.4.2 附加外部样式表4.5 管理CSS样式将内联CSS转换为规则 移动CSS规则 选择包含要转换的内联CSS的整个标签，在选中的标签上单击鼠标右键，在弹出的快捷菜单中选择【CSS样式】/【将内联C

8、SS转换为规则】命令，打开【转换内联CSS】对话框，进行相应的设置即可。 4.5.1 将内联CSS转换为规则在【CSS样式】面板中，按住Ctrl键依次选择要移动的规则，用鼠标右键单击选定的规则，在弹出的快捷菜单中选择【移动CSS规则】命令，在【移至外部样式表】对话框中根据需要设置即可。4.5.2 移动CSS规则4.6 设置CSS的属性类型属性背景属性区块属性方框属性边框属性列表属性定位属性扩展属性4.6.1 类型属性类型属性主要用于定义网页中文本的字体、大小、颜色、样式、行高及文本链接的修饰效果等。可以对网页中的任何元素应用背景属性。4.6.2 背景属性区块属性主要用于控制网页元素的间距、对齐方式等。4.6.3 区块属性4.6.4 方框属性CSS将网页中所有的块元素都看作是包含在一个方框中的，使用【方框】属性可以定义方框的相关设置。网页元素边框的效果是在【边框】属性中进行设置。4.6.5 边框属性4.6.6 列表属性列表属性用于控制列表内的各项元素，列表属性不仅可以修改列表符号的类型，还可以使用自定义的图像来代替项目列表符号，这就使得文档中的列表格式有了更多的外观。定位属性可以使网页元素随处浮动，这对于一些固定元素（如表格）来说，是一种功能的扩展，而对于一些浮动元素（如AP Div）来说，却是有