CSS:认识 css reset


什么是css reset.?

reset,重置。顾名思义,css reset就是重置样式。


为什么需要css reset?

众所周知,现在所使用的主流浏览器对一些标签的默认属性上并没有做到统一,所以我们偶尔会发现,某个页面在chrome浏览器上很正常,到了firefox上面却有意想不到的偏差。当然编程人员不喜欢这样的兼容性问题的,而reset.css就是解决默认样式不兼容问题的办法之一。


css reset发展历程

第一份css reset:Tantek 的undohtml.css

风靡一时的reset书写方式:*{ margin:0; padding:0; }
(很简单有木有,但是很遗憾的是这种方式加载极慢,所以后来遭到编程人员的摒弃)

现在常用的reset书写方式:

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, 
blockquote, pre, a, abbr, acronym, address, big, 
cite, code, del, dfn, em, font, img, 
ins, kbd, q, s, samp, small, strike, 
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
center, u, b, i { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-weight: normal; 
    font-style: normal; 
    font-size: 100%; 
    font-family: inherit; 
    vertical-align: baseline 
} 
body { 
    line-height: 1 
} 
:focus { 
    outline: 0 
} 
ol, ul { 
    list-style: none 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0 
} 
blockquote:before, blockquote:after, q:before, q:after { 
    content: “” 
} 
blockquote, q { 
    quotes: “” “” 
} 
input, textarea { 
    margin: 0; 
    padding: 0 
} 
hr { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    color: #000; 
    background-color: #000; 
    height: 1px 
}}

以上css reset代码载自网络,一个很全面的reset.css


对css reset的思考

看到了比较完整的reset.css不知道朋友们在想些什么,是在想"每一个项目中都导入一个这样的reset.css,妈妈再也不用担心浏览器默认样式影响到我啦"或则是在想"什么鬼...",先不管这些,我说说自己的看法。

CSS reset的作用是让各个浏览器的CSS样式有一个统一的基准,而这个基准一般认为就是“清零”,但是我们真的需要对这么多标签进行设置吗?显然不是。这样虽然全面,却没有考虑到代码的冗余,毕竟不是每一个项目都需要重置怎么多的标签。所以最好不要想也不想,把全面的reset复制粘贴到自己的style目录下,应该仔仔细细选择一翻,留下有用的,没用的和不必要的就不要让它们白白增加css的大小了!

最后引用张鑫旭的一句话:

  • 武侠的最高境界是什么? – 无招胜有招
  • 设计的最高境界是什么? – 减少设计
  • 最少的CSS代码,最少的渲染,最少的重置就是最好的CSS样式代码,这反应了您的CSS层次。说句不好听的话,CSS reset是用来让那些CSS菜鸟,对CSS不太了解的人准备的。

你可能感兴趣的:(CSS:认识 css reset)