第5章CSS样式表学习目标:CSS样式表是Dreamweaver中的重点和难点,通过本章的学习,大家要理解CSS样式表的作用。掌握如何建立CSS样式表,如何运用CSS样式表,如何设置CSS样式表的各项属性。5.1CSS样式表5.1.1CSS样式表简介5.1.2【CSS】样式表5.2链接和创建样式表5.2.1链接外部样式表文件5.2.2创建新的CSS样式5.2.3应用类样式5.2.4编辑样式5.3CSS样式的属性设置5.3.1设置类型属性5.3.2设置背景属性5.3.3设置区块属性5.3.4设置方框属性5.3.5设置边框属性5.3.6设置列表属性5.3.7设置定位属性5.3.8设置扩展属性5.4CSS样式中的过滤器5.5样式表的运用举例第5章CSS样式表5.1CSS样式表5.1.1CSS样式表简介5.1.2【CSS】样式表5.1.1CSS样式表简介什么是CSS样式表?CSS是“CascadingStyleSheet”缩写,通常译为“层叠样式表”或“级联样式表”。1998年5月12日,CSS2成为了W3C(国际互联网联盟)的新标准。同时W3CCoreStyles(国际互联网联盟核心样式)、CSS2ValidationService(样式表校验服务)以及CSSTestSuite(样式表测试组件)宣布成立。我们使用HTML语言设计网页,但设计的页面在浏览器中显示时和预期的效果往往有所差异,而且使用不同的浏览器、不同的分辨率,效果又有不同。例如用MicrosoftInternetExplorer浏览器打开第七章创建的文件“index.htm”,在IE菜单中选择【查看】/【文字大小】/【最大】命令,页面的布局就完成混乱了。所以单纯用HTML标签来描述网页元素是不够的,因为HTML标签本身有一定的局限性。5.1.1CSS样式表简介5.1.1CSS样式表简介CSS样式表可以解决这些问题,使页面完全按照设计者的构想显示。使用样式表可以对网页元素精确定位,轻易地控制文字、图片、表格等各种对象,对于不同的浏览器,不同的分辨率,网页的整体效果都不会改变。我们以前在设计制作网页时,网页的内容与格式控制是交错在一起的,这样做的缺点是不方便网页的修改,不利于整个站点的风格的统一,网站的维护工作量很大。解决这个问题的方法是,把网页的内容与格式控制分开处理。使得网页可以光由内容构成,而格式控制工作由CSS样式表来完成。这样做的好处在于:简化网页的格式代码,外部的样式表还会被浏览器保存在缓存里,加快了下载显示的速度,也减少了需要上传的代码数量。只要修改CSS样式表文件,就可以改变整个站点的风格特色。这对于维护、修改大型网站显得格外重要。避免了一个个地修改网页,大大减少了重复劳动。5.1.1CSS样式表简介可以重新定义HTML语言中的标签,弥补HTML语言中规格的不足,可以储存成独立文件,不仅可以应用于HTML语言,还可应用于XML语言与JAVAscript中,且大多数浏览器都支持,CSS作为网页内容格式技术,已成为网页学习者必备的技术之一。5.1.1CSS样式表简介CSS样式表的功能非常强大,一般可以归纳为以下几点:可以精确地控制网页中各种元素的位置。尽量使它们不受浏览器类型、分辨率的影响。可以保证网站整体风格的统一,方便网站的修改和维护。减少网页代码的冗余,加快网站上传和下载的速度。可以为网页中的各种元素设置一些特殊的风格,例如;虚线的边框,文本块的缩进,不同的背景等。可以为网页中的元素设置各种过滤器,从而产生诸如阴影、辉光、模糊和透明等效果,而这些效果以前只有在一些图像处理软件中才能实现。5.1.2【CSS】样式表选择DreamweaverMX2004主菜单中的【窗口】/【CSS样式】命令,打开【CSS样式】面板,如图5-1所示。在【设计】面板中有两个选项,一个是CSS样式,另一个是层。【CSS样式】面板窗口分左右两栏,左边是已定义的样式,右边是该样式的具体设置。在窗口的底部排列有几个快捷按钮,它们分别是:附加样式表新建样式表编辑样式表删除样式表5.2链接和创建样式表5.2.1创建新的CSS样式5.2.2链接外部样式表文件5.2.3应用类样式5.2.4编辑样式5.2.1创建新的CSS样式除了可以使用现成的样式文件外,我们也可以自己创建样式文件。DreamweaverMX2004会根椐设计者的选择,自动编辑生成样式文件,操作非常简单。具体步骤如下:打开【CSS样式】面板,单击【CSS样式】面板底部的按钮,打开【新建CSS样...