实用CSS使用的经验总结.docVIP

实用CSS使用的经验总结 　　摘要 本文总结了近两年来我校学生在从事网页美工工作中,遇到的常见CSS布局问题及解决方案,条理性的归纳各公司实际应用CSS布局中的一些规范和建议,为学生在以后的就业和工作中起到指导性的作用。 　　关键词 CSS;DIV;布局 　　中图分类号TP393 文献标识码A文章编号 1674-6708(2010)21-0219-02 　　 　　随着互联网的高速发展,越来越多人从事网页美工的工作,在我校这几年该专业学生就业的调查中发现,应聘网页美工除要求精通PHOTOSHOP等主流平面设计软件,熟练使用FLASH,DREAMWEAVER等网页制作工具外,熟练应用HTML和CSS进行网页布局也是一个重要的考核指标,随着网站制作技术的发展,多种阅读器的产生,网页制作要求朝着规范、标准的方向发展,Table的时代已经过去,目前,大部分设计公司要求该职位要掌握CSS+DIV技术。 　　CSS布局是Web标准中的一个核心技术内容,CSS即层叠样式表是在网页制作过程中普遍用到的技术。采用了CSS技术控制的网页,设计时会更轻松、有效地对页面的整体布局、颜色、字体、链接、背景以及同一页面的不同部分、不同页面的外观和格式等效果实现更加精确地控制。 　　在此,对我校学生在实际就业工作中,使用CSS布局制作网站时碰到的一些常见问题及解决方案,和公司较为普遍的CSS使用规范作下总结归纳。 　　1 Class和ID的使用区别 　　Class是用来根据用户定义的标准对一个或多个元素进行定义的。打个比较恰当的比方就是剧本:一个Class可以定义剧本中每个人物的故事线,你可以通过CSS,Javascript等来使用这个类。因此,你可以在一个页面上使用class=Frodo ,class=Gandalf, class=Aragorn来区分不同的故事线。还有一点非常重要的是你可以在一个文档中使用任意次数的Class。 　　至于ID,通常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布局时(比如说通常一个页面都是由一个页眉,一个报头,一个内容区域和一个页脚等组成),一般使用ID比较理想,因为一个ID在一个文档中只能被使用一次。而这些元素在同一页面中很少会出现大于一次的情况。 　　归纳成一句话就是:Class可以反复使用而ID在一个页面中仅能被使用一次。有可能在很大部分浏览器中反复使用同一个ID不会出现问题,但在标准上这绝对是错误的使用,而且很可能导致某些浏览器的现实问题。 　　在实际应用的时候,Class对文字的排版等比较有用,而ID则对宏观布局和设计放置各种元素较有用。另外ID在程序上还用于给某个字段动态传送参数,为避免排版和程序上的命名冲突,造成网站的错误,公司大多主张尽量使用Class进行网页排版。 　　2 浏览器兼容与解析问题 　　本文就主要以:IE6+IE7+IE8和Firefox为主要研究对象。 　　使用Web标准最头疼的问题就是不同浏览器的表现,例如现在普遍使用的主流浏览器IE与Firefox,二者由两家公司独立开发,在浏览器的核心架构上有着明显的区别,二者虽然都以Web标准为开发基础,但由于各自的架构及开发方式的不同,最终对Web标准的展现上,难免会有部分区别,这就导致部份CSS设计在两款浏览器上的表现有所不同,在此,引出一种解决浏览器兼容与解析Bug的技术――CSS hack. 　　CSS hack 可以理解为CSS黑客程序,指的是一种改善CSS在不同浏览器下的表现形式的技巧与方法。HACK原理:不同浏览器对各中字符的识别不同,通过一些浏览器特殊支持或者不支持的语句,使一个CSS样式能够被浏览器解析或者不能被浏览器解析。 　　在CSS中常用特殊字符识别表: 　　1)IE6+IE7都能识别而标准浏览器FF+IE8是不能识别的; 　　2)important:除IE6不能识别important外,FF+IE8+IE7都能识别important; 　　3)_:除IE6支持_外,FF+IE8+IE7都不支持; 　　微软在IE8提供三种解析页面的模式,如果你的页面对IE7兼容没有问题,又不想大量修改现有代码,同时又能在IE8中正常使用,微软声称,开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题。在内加入如下代码: 　　 　　只要IE8读到这个标签,它就会自动启动IE7兼容模式,保证页面完整展示。 　　在此总结几种常见的CSS hack使用方法: 　　1) 超链接点击过后hover样式就不出现的问题 　　被点击访问过的超链接样式不再具有hover和active样式了,解决方法是改变CSS属性的排列顺序:L-V-H-A 　　2) IE6的margin双倍边距bug问