CSS复位-CSS Reset代码举例

最新推荐文章于 2024-05-06 16:38:25 发布

转载最新推荐文章于 2024-05-06 16:38:25 发布 · 707 阅读

网页设计专栏收录该内容

6 篇文章

订阅专栏

本文介绍了CSS重置的基本概念，并提供了一种广泛使用的CSS重置方法，这种方法由Yahoo提出，通过将多个常用元素的内边距、外边距及边框设为0来消除浏览器默认样式的影响。

做为wefb前端设计人员，你用过CSS Rese（css样式重置）t吗？在实际工作中，你可能经常用到这行代码：

* { padding: 0; margin: 0; border: 0; }

这也是一款CSS Rese（css样式重置）t的方法，让所有的选择器的padding、margin和border都设置成0。这是一种强大的方法，也是最简单，最安全的方法，不过，也是最占用浏览器渲染的电脑资源。

对于小型的网站来说，用这个并不会带来大的资源浪费，但如果是像Yahoo这种架构非常大的网站，则需要有选择地进行CSS重设，以减少资源浪费。

下面是Yahoo的CSS重设代码，也是受最多人喜爱的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;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
ol,ul {
list-style: none;
}
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;
}文章来源：http://write.blog.youkuaiyun.com/postedit