第5章CSS样式VIP专享VIP免费

第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样...