060901商务网站页面设计技术(2pian_1).docVIP

本章内容提要这一章共分为6节，主要对 本章内容提要 这一章共分为6节，主要对CSS样式表进行入门介绍，以便为后续的进一步学习奠定基础。具体内容包括： CSS样式表的概念与发展 CSS样式表的特点 CSS样式表的定义 外部CSS样式表基本操作 CSS样式表的应用 CSS样式表特殊用法 9.1 CSS样式表的概念与发展 网页设计最初是用 \o HTML HTML标记来定义页面文档及格式，例如标题h1、段落p、表格table、链接a等，但这些标记不能满足更多的文档样式需求，为了解决这个问题，在1997年W3C(The World Wide Web Consortium)颁布HTML4标准的同时，公布了有关样式表的第一个标准CSS1。1998年5月12日，CSS2.0成为了W3C的新标准，使样式表得到了更多的充实。现在CSS已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。 CSS的全称是层叠样式表(Cascading Style Sheets)，简称样式表。是近几年才发展起来的一种制作网页的新技术， CSS样式表是一组样式，以往如果想使HTML文档中的多个“标记”具有同一种样式（如使多个段落P中的字体都为红色），则必须各自设定其显示方式，但通过CSS只要定义一个样式就可将它应用到多个使用该样式的标记上。因而大大简化了HTML文档的设计。 CSS是一种设计网页样式的工具。用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。网页内容结构和格式控制相分离，使得网页可以仅由内容构成，而将所有网页的格式控制指向某个CSS样式表文件，大大地方便了网页的查看和修改。用css技术制作主页，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。可以实现一些以前必须通过图片转换才能够实现的功能；从而更快地下载页面；可以使页面的字体变得更漂亮，更容易编排，页面真正赏心悦目；可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件，那么整个站点的所有页面都会随之发生变动，不用再一页一页地更新了。 使用CSS能够简化网页的格式代码，加快下载显示的速度，也减少了需要上传的代码数量，大大减少了重复劳动的工作量。特别是对于有数百个网页的站点时，CSS的优势更加明显。 W3C把DHTML(Dynamic HTML)分为三个部分来实现：脚本语言(包括 \o JavaScript JavaScript、 \o Vbscript Vbscript等)、支持动态效果的浏览器(包括 \o Internet Internet Explorer、 \o Netscape Navigator Netscape Navigator等)和CSS样式表。因而，CSS是制作动态网页必不可少的工具。 9.2 CSS样式表的特点 CSS样式表可以将网页内容结构和格式控制相分离，精确地控制文档中的布局、字体、颜色、背景、图象等效果的显示。其主要特点可概括如下： 只需修改一个.CSS文件，就可以改变所有使用其中样式的页面的外观和格式。 在修改页面数量庞大的站点时，这一点显得格外有用。避免了一个一个网页的修改，大大减少了重复劳动的工作量。 可以随意地控制页面布局和外观。 由于HTML是一种简洁的语言，只是定义了网页的结构（正文、段落等）和各元素的功能，没有过多地控制页面的布局和外观，如行间距、字间距和图象的精确定位等。但CSS样式表使这一切成为可能。 在所有的浏览器和平台之间具有较好的兼容性。 一方面，由于CSS2.0已经成为了W3C的新标准，所以在几乎所有的浏览器上都可以使用。另一方面，由于它只是简单的文本，无图象，不需要执行程序，因而具有较好的兼容性。 精简网页，提高下载速度。 一方面，使用CSS样式表可以精简HTML代码；另一方面，可以减少图象的使用（因为以前用图象的地方，现在大多可以用CSS实现），同时外部的样式表还会被浏览器保存在缓存里，因而提高了网页的下载速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次）。 9.3 CSS样式表的定义 9.3.1内部CSS样式表定义 内部样式表是指CSS样式表的代码是置于HTML文件内部的，而无需以独立于HTML文件的形式单独保存。内部样式表主要包括对HTML标记定义的样式表、用类（Class）属性和ID（标识符）属性定义的样式表。下面我们将分别进行讲述。 一. 为HTML标记定义CSS样式表 为了初步认识和更好地理解CSS样式表的组成，下面我们首先来看一个简单的CSS样式表的例子。 （一）【示例9.1】 本例子的功能是：说明如何为HTML标记定义样式表。有关的代码可参见下面的源程序文件E9_1.htm，在浏览器中的显示效果如图9.1所示。 【源程序清单：E9