几个感觉比较好的CSS初始化方法
2009年10月30日 星期五 18:05
1.
charset ”utf-8″; html {background:url(/www/pic/head_back.gif) repeat-x top #FFF} body {width:920px;font:12px Arial;margin:0 auto;padding:0;color:#000;} a{color:#000; text-decoration:none} a:hover {color:#f00; text-decoration:underline} ul,ol,p,dl{margin:0;padding:0} ul,ol,dl{height:100%;overflow:hidden} li{list-style:none} img {border:none} h1,h2,h3,h4{font:12px Verdana;margin:0;padding:0} input {font:12px Verdana} 2. /*为背景定义了颜色*/ /*html { color:#000; background:#FFF; }*/ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin:0; padding:0; } /*合并边线,边线空间至零.*/ table { border-collapse:collapse; border-spacing:0; } /*清除边线*/ fieldset, img { border:0; } address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal; } li { list-style:none; } caption, th { text-align:left; } h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal; } /*添加空字符清除融合*/ q:before, q:after { content:”; } abbr, acronym { border:0; font-variant:normal; } /* to preserve line-height and selector appearance */ sup { vertical-align:text-top; } sub { vertical-align:text-bottom; } input, textarea, select { font-family:inherit; font-size:inherit; font-weight:inherit; } /*to enable resizing for IE*/ /*在ie下重定义*/ input, textarea, select { *font-size:100%; } /*because legend doesn’t inherit in IE */ /*IE下legend不继承 */ legend { color:#000; 前段时间在一个群里大家讨论CSS样式的初始化问题,有的人刚开始还有疑问,为什么要初始化CSS?我也不知道他们为什么会提出这么一个问题,也许他们平 时做页面时根本就没考虑过浏览器兼容的问题。其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异。最后,大 家都把自己的在设计中对CSS的初始化代码拿出来比较了以下,我自己以前最爱用的是自己认为写法简单而且实用的: * { padding: 0; margin: 0; } 这确实很简单,而且也有很多人是这么写的,认为这最简单。但是有人有疑问了。这样用个*通用符是快,但是如果网站很大,CSS文件很大,这样回减慢页面的加载速度。仔细想想也有可能。因为这样写的话他会把所以标签给初始化,如果标签很多是会影响速度。 最后不知道谁给出了Erik Meyer的Css Reset,给人感觉确实不错,着也应该是大家使用最多的: ![]() html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, dl, dt, dd, ol, ul, li, fieldset, form, label, legend { vertical-align: baseline; font-family: inherit; font-weight: inherit; font-style: inherit; font-size: 100%; outline: 0; padding: 0; margin: 0; border: 0; } /* remember to define focus styles! */ :focus { outline: 0; } body { background: white; line-height: 1; color: black; } ol, ul { list-style: none; } /* tables still need cellspacing="0" in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { font-weight: normal; text-align: left; } /* remove possible quote marks (") from <q> & <blockquote> */ blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } 最后经过大家对Erik Meyer的Css Reset的讨论,认为还可以修改,最后得出了下面的结果感觉是不是又简洁了点,不过效果都一样哦: ![]() body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td { padding: 0; margin: 0; } fieldset, img { border: 0; } table { border-collapse: collapse; border-spacing: 0; } ol, ul { list-style: none; } address, caption, cite, code, dfn, em, strong, th, var { font-weight: normal; font-style: normal; } caption, th { text-align: left; } h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size: 100%; } q:before, q:after { content: ''; } abbr, acronym { border: 0; } } |