|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
你可以轻松地控制页面的布局。
网页制造poluoluo文章简介:但从2004年到如今,已一晃眼5年了。已经的一些思索,好比针对ie5.5的代码,今朝已能够勇敢舍弃了。抄的过程当中,勉力往做到务实求证,勉力求一份本人的了解,很难很难。但只需废寝忘食,毕竟会有所获,有所得,有所悟。
工夫过得真快,离ResetCSS研讨(八卦篇)已3个多月了。空话少说,赶忙将手艺篇写完吧。
回忆与深思
第一份resetcss是Tantek的undohtml.css,很复杂的代码,Tantek依据本人的必要,对扫瞄器的默许款式举行了一些重置。
Eric的也是云云。
YUI除cssreset,还配套有cssfonts和cssbase.cssreset扫除默许款式,cssfonts和cssbase则将一些元素的默许款式重设返来。
很长一段工夫,*{margin:0;padding:0;}和YUIcssreset含混了我对reset的了解,让我以为reset就应当扫除失落一切款式,将统统回零。
厥后浏览Eric的博客,发明Eric其实不希冀人人下载他的reset.css后间接拿往用。而是等候能依据详细需求,过量裁剪和修正后再利用。
人间的事总会有些戏剧化,Eric的等候没有快意。人人都想失掉通用办理计划,等候银弹。在这类渴求下,YUIcssreset很完全很洁净,广为传播。
更戏剧化的是,因为YUI的cssfonts和cssbase只思索了西欧笔墨,对汉字的思索未几。这招致国际用户年夜部分只会用cssreset.比方成武林秘笈的话,我们一向在用残卷。
调治显现器,有一个“重置为出厂设置”的选项。这有两重寄义:一是往失落以后的设置,二是复原为出厂时的设置。CSSReset也一样,第一步是扫除扫瞄器的默许款式,第二步是重设扫瞄器的默许款式。很分明,*{margin:0;padding:0;}和YUIcssreset倾向于第一步。
这两步并非截然分隔的。reset的初始企图,是想削减各类扫瞄器下默许款式的差别。关于没有差别的默许款式,则能够依据情形,选择性重置或不重置。好比strong,默许都是粗体,这切合预期,就能够不重置。又好比a,如今的支流扫瞄器下默许款式无不同,但为了某些要素,好比可读性,也会思索将下划线重置为无。
以上,是回忆,是深思,是接上去手艺完成的引导头脑。
手艺完成
世界一年夜抄,抄来抄往,各种reset代码,长得都差不离。这没甚么欠好,不但办理了成绩,还增进了手艺传布。
但从2004年到如今,已一晃眼5年了。已经的一些思索,好比针对ie5.5的代码,今朝已能够勇敢舍弃了。抄的过程当中,勉力往做到务实求证,勉力求一份本人的了解,很难很难。但只需废寝忘食,毕竟会有所获,有所得,有所悟。
这是我亲睦友正淳一同收拾的一份reset.css:- /*KISSYCSSReset理念:扫除和重置是严密不成分的特征:1.顺应中文2.基于最新支流扫瞄器*//*扫除表里边距*/body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,/*structuralelements布局元素*/dl,dt,dd,ul,ol,li,/*listelements列表元素*/pre,/*textformattingelements文本格局元素*/fieldset,lengend,button,input,textarea,/*formelements表单位素*/th,td{/*tableelements表格元素*/margin:0;padding:0;}/*设置默许字体*/body,button,input,select,textarea{/*forie*//*font:12px/1Tahoma,Helvetica,Arial,"宋体",sans-serif;*/font:12px/1Tahoma,Helvetica,Arial,"5b8b4f53",sans-serif;/*用ascii字符暗示,使得在任何编码下都无成绩*/}h1{font-size:18px;/*18px/12px=1.5*/}h2{font-size:16px;}h3{font-size:14px;}h4,h5,h6{font-size:100%;}address,cite,dfn,em,var{font-style:normal;}/*将斜体扶正*/code,kbd,pre,samp,tt{font-family:"CourierNew",Courier,monospace;}/*一致等宽字体*/small{font-size:12px;}/*小于12px的中文很难浏览,让small一般化*//*重置列表元素*/ul,ol{list-style:none;}/*重置文本格局元素*/a{text-decoration:none;}a:hover{text-decoration:underline;}abbr[title],acronym[title]{/*注:1.ie6不撑持abbr;2.这里用了属性选择符,ie6下有效果*/border-bottom:1pxdotted;cursor:help;}q:before,q:after{content:;}/*重置表单位素*/legend{color:#000;}/*forie6*/fieldset,img{border:none;}/*img乘车:让链接里的img无边框*//*注:optgroup没法扶正*/button,input,select,textarea{font-size:100%;/*使得表单位素在ie下能承继字体巨细*/}/*重置表格元素*/table{border-collapse:collapse;border-spacing:0;}/*重置hr*/hr{border:none;height:1px;}/*让非ie扫瞄器默许也显现垂直转动条,避免因转动条引发的闪灼*/html{overflow-y:scroll;}
复制代码 用处在正文里都标了然,就未几注释。测试页面在这里:CSSResetTest.这份测试页面花了我们很年夜血汗,假如转载,请说明下出处,呵呵。
先申明下测试过的扫瞄器:IE6+,Firefox3.5+,Safari4+,Chrome2+,Opera10+
上面注释一些和YUIcssreset的差别点:
- 扫除表里边距的元素,往失落了div,code(在测试扫瞄器中,没发明有边距),增添了button(感到是YUI漏掉了).
- 往失落了YUI里对html色彩和背景致的设置。在测试扫瞄器中,没有发明差别。(要设的话,保举background:transparent)
- 关于address,caption,…,em,strong等文本格局元素,做了调剂。保存了strong和th的粗体。
- 对abbr和acronym做了调剂,使得在非ie6下可视性更好。
- 往失落了sup和sub的款式,间接用扫瞄器默许的便可。
- 关于input,select,textarea表单位素,往失落了针对ie的inherit,只保存了font-size的inherithack.由于别的hack经测试已生效。
- 增添了一些元素的默许款式。
别的,对全体代码的构造情势做了调剂,依照元素的种别将代码举行了分组。
怎样利用
请记着:永久不存在全能办理计划,永久没有银弹。
因而我的倡议和Eric是一样的:请依据详细需求,过量裁剪和修正后再利用。
好比针对淘宝,能够在reset.css的基本上,修正为reset-taobao.css.
假如是团体博客,我团体喜好的一个计划是:reset-blog.css.
相干测试页面请检察:cssresetsvn.
实在利用时,请用紧缩后的版本:reset-min.css.
关于reset.css自己,我们等候它能只管多的合用于各类场景,但不等候它能办理一切成绩。今朝而言,reset.css里的默许款式,是我和正淳等列位同事和伴侣们理论履历的总结,算是“精挑细选”,但不等候能办理一切成绩。
最初,等候你的介入和倡议。假如这份reset.css能有幸在你的项目中失掉利用,则十分等候你的反应。
</p>
Table中布局中,垃圾代码会很多,一些修饰的样式及布局的代码混合一起,很不利于直观。而Div更能体现样式和结构相分离,结构的重构性强。 |
|