实用CSS使用经验总结
本文作者(陈柳海),请您在阅读本文时尊重作者版权。
摘要 本文总结了近两年来我校学生在从事网页美工工作中,遇到的常见CSS布局问题及解决方案,条理性的归纳各公司实际应用CSS布局中的一些规范和建议,为学生在以后的就业和工作中起到指导性的作用。
关键词 CSS;DIV;布局随着互联网的高速发展,越来越多人从事网页美工的工作,在我校这几年该专业学生就业的调查中发现,应聘网页美工除要求精通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,通常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布局时(比如说通常一个页面都是由一个页眉,一个报头
归纳成一句话就是: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问题
例如:
浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline;
3) 解决火狐浏览器下文本无法撑开容器的高度问题
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:
div { height:auto!important; height:200px; min-height:200px; }
4) 如何定义1px左右高度的容器
IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px