第09章 CSS样式表演示文稿.PPTVIP

前面章节介绍了文本、图像、表格等基本网页元素及其对应的HTML标签的语法。对于网页设计者来说，仅学会这些是不够的。在Web 2.0标准中，HTML语言只用于定义网页的结构。要制作出漂亮且符合规范的网页，还需要使用CSS样式来设置网页元素的属性。由CSS样式设计的网页，具有条理规范、布局统一、容易维护等优点。 类型属性主要用于定义网页中文本的字体、大小、颜色、样式及文本链接的修饰效果等。 背景属性主要用于设置背景颜色或背景图像。 区块属性主要用于控制网页元素的间距、对齐方式等。 CSS将网页中所有的块元素都看作是包含在一个方框中的，这个方框共分为4个部分。 网页元素边框的效果是在【边框】分类面板中进行设置的 。 列表属性用于控制列表内的各项元素 。 定位属性可以使网页元素随处浮动，这对于一些固定元素（如表格）来说，是一种功能的扩展，而对于一些浮动元素（如层）来说，却是有效地、用于精确控制其位置的方法 。 【扩展】分类对话框包含两部分 。 1．行内样式 2．内嵌式 内嵌样式表是把CSS样式定义直接放在style…/style标签之间，然后插入到网页的头部，如图9-2所示。使用内嵌式CSS，可以对样式表作用的对象进行整体修改。 行内样式的格式通常为： style type=text/css !-- selector{ property:value; … } -- /style 3．链接式 链接式样式表就是把外部的样式表文件链接到网页内部，从而在网页中使用样式表。此方法通过link标签实现。将link标签加入到head标签之间，如图所示。 链接式的格式通常为： link rel=stylesheet href=style.css type=text/css 内嵌式CSS的使用 链接式CSS的使用 4．导入样式 导入样式表与链接式样式表相似，也是将外部定义好的CSS文件引入到网页中，从而在网页中进行应用。但是导入的CSS使用@import在内嵌样式表中导入，导入方式可以与其他方式进行结合，如图9-4所示。 导入式的格式通常为： style type=”text/css” !-- @import url(stylesheet); -- /style 导入式CSS的使用 * 第9章　CSS样式表 学习目标 了解CSS样式的作用及其类型。 掌握创建和设置CSS样式的方法。 掌握附加样式表的方法。 掌握使用CSS样式控制网页外观的基本方法。 9.1 认识CSS样式 　　　CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，用于定义表现形式的CSS规则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，这样将缩短浏览器的加载时间。 9.1 认识CSS样式 　　　在使用了CSS样式的网页文档的源代码中，“style…/style”中间存放的是控制文档外观的CSS代码，位于文档的文件头部分，“body…/body”中间是网页文档的内容。 9.1 认识CSS样式 可以更加灵活地控制网页中文本的字体、颜色、大小、间距、风格及位置。 可以灵活地为网页中的元素设置各种效果的边框。 可以方便地为网页中的元素设置不同的背景颜色、背景图片及平铺方式。 可以更加精确地控制网页中各元素的位置，使元素在网页中浮动。 ?可以为网页中的元素设置各种滤镜，从而产生诸如阴影、辉光、模糊和透明等只有在一些图像处理软件中才能实现的效果。 可以与脚本语言相结合，使网页中的元素产生各种动态效果。 CSS样式可以实现的功能。 9.2 【CSS样式】面板 　　　在Dreamweaver CS3中，【CSS样式】面板是新建、编辑、管理CSS样式的主要工具。在打开文档窗口的情况下，选择【窗口】/【CSS样式】命令可以打开或关闭【CSS样式】面板。 9.3 CSS样式的类型和规则 CSS样式的类型 CSS样式的规则 9.3.1 CSS样式的类型 根据选择器类型的不同，CSS样式通常划分为以下3类。 （1）【类（可应用于任何标签）】 利用该类选择器可创建自定义名称的CSS样式，能够应用在网页中的任何标签上。style type=text/css !-- pstyle { font-size: 12px; line-height: 25px; text-indent: 30px; } -- /sty