第08章节使用CSS样式操纵网页外观.pptVIP

本章将介绍CSS样式的基本知识以及使用CSS样式控制网页外观的基本方法。 类型属性主要用于定义网页中文本的字体、大小、颜色、样式及文本链接的修饰效果等。 背景属性主要用于设置背景颜色或背景图像。 区块属性主要用于控制网页元素的间距、对齐方式等。 CSS将网页中所有的块元素都看作是包含在一个方框中的，这个方框共分为4个部分。 网页元素边框的效果是在【边框】分类面板中进行设置的 。 列表属性用于控制列表内的各项元素 。 定位属性可以使网页元素随处浮动，这对于一些固定元素（如表格）来说，是一种功能的扩展，而对于一些浮动元素（如层）来说，却是有效地、用于精确控制其位置的方法 。 【扩展】分类对话框包含两部分 。 * 第8章　使用CSS样式控制网页外观 学习目标 了解CSS样式的作用及其类型。 掌握创建和设置CSS样式的方法。 掌握附加样式表的方法。 掌握使用CSS样式控制网页外观的基本方法。 8.1 认识CSS样式 　　　CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，用于定义表现形式的CSS规则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，这样将缩短浏览器的加载时间。 8.1 认识CSS样式 　　　在使用了CSS样式的网页文档的源代码中，“style…/style”中间存放的是控制文档外观的CSS代码，位于文档的文件头部分，“body…/body”中间是网页文档的内容。 8.1 认识CSS样式 可以更加灵活地控制网页中文本的字体、颜色、大小、间距、风格及位置。 可以灵活地为网页中的元素设置各种效果的边框。 可以方便地为网页中的元素设置不同的背景颜色、背景图片及平铺方式。 可以更加精确地控制网页中各元素的位置，使元素在网页中浮动。 ?可以为网页中的元素设置各种滤镜，从而产生诸如阴影、辉光、模糊和透明等只有在一些图像处理软件中才能实现的效果。 可以与脚本语言相结合，使网页中的元素产生各种动态效果。 CSS样式可以实现的功能。 8.2 【CSS样式】面板 　　　在Dreamweaver CS3中，【CSS样式】面板是新建、编辑、管理CSS样式的主要工具。在打开文档窗口的情况下，选择【窗口】/【CSS样式】命令可以打开或关闭【CSS样式】面板。 8.3 CSS样式的类型和规则 CSS样式的类型 CSS样式的规则 8.3.1 CSS样式的类型 根据选择器类型的不同，CSS样式通常划分为以下3类。 （1）【类（可应用于任何标签）】 利用该类选择器可创建自定义名称的CSS样式，能够应用在网页中的任何标签上。style type=text/css !-- pstyle { font-size: 12px; line-height: 25px; text-indent: 30px; } -- /style 在网页文档中可以使用class属性引用“pstyle”类。 p class=pstyle…/p 8.3.2 CSS样式的类型 （2）【标签（重新定义特定标签的外观）】 利用该类选择器可对HTML标签进行重新定义、规范或者扩展其属性。 style type=text/css !-- h2 { font-family: 黑体; font-size: 24px; color: #FF0000; text-align: center; } -- /style 8.3.3 CSS样式的类型 （3）【高级（ID、伪类选择器等）】 利用该类选择器会对标签组合（如“td h2”表示所有在表格单元中出现“h2”的标题）或者是含有特定ID属性的标签（如“#myStyle”表示所有属性值中有“ID=myStyle”的标签）应用样式。而“#myStyle1 a:visited,#myStyle2 a:link, #myStyle3…”表示可以一次性定义相同属性的多个CSS样式。其中，ID属性用于定义一个元素的独特的样式，如以下CSS规则 style type=text/css !-- #mytext { font-size: 24 } -- /style 可以通过ID属性应用到HTML中： P ID= mytext …/P 8.3.2 CSS样式的规则 样式表的定义 CSS样式表定义的基本语法： CSS声明方式 样式表是由样式规则组成的，每个CSS样式规则