第5单元css样式.pptVIP

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