css的reset和常用的html标签的默认样式整理

更新日期: 2019-03-07 阅读: 2.5k 标签: Reset

先看下常用的这些标签浏览器的默认样式有哪些:

body{ margin: 8px;}
hr{ border:1px inset; margin-top:.5em;margin-bottom:.5em;}
blockquote{margin: 16px 1em;}
ul{list-style-type: disc;padding-left:40px;margin: 1em 0;}
ol{list-style-type: decimal; padding-left:40px; margin:1em 0;}
dl{ margin: 1em 0;}
dd{ margin-left:40px;}

pre{ margin: 1em 0;}

fieldset{margin: 0 2px; border: 2px groove threedface;border-image: initial;padding:.35em .75em .625em;}
input,textarea,select,button{font: 400 13.333px Arial;}
button{padding:1px 6px;border:2px outset buttonface; background-color:buttonface;color:buttontext;}
input{ padding:1px 0;border:2px inset initial;}
textarea{padding:2px; border:1px solid rgb(169,169,169); resize:auto;}
th,td{padding:1px;}

h1,h2,h3,h4,h5,h6{font-weight:bold;}
h1{ font-size:2em;margin:.67em 0;}
h2{ font-size:1.5em; margin:.83em 0;}
h3{ font-size:1.17em; margin: 1em 0;}
h4{ margin: 1.33em 0;}
h5{ font-size:.83em; margin: 1.67em 0;}
h6{ font-size:.67em; margin: 2.33em 0;}


当然这里列举的都是常用的标签,那些不常用的或者是已经快被淘汰的就没列出来。根据上面的默认样式,我们就可以有目标的去写reset里面需要重置哪些样式:

1,body的margin
2,ul,ol 的margin和padding
3,dl, dd 的margin
4,pre的margin ,这里pre还有一点要注意,就是它的font-size默认是13px,也可以重置下
5,fieldset的margin
6,input,textarea,select,button的font, border ,    textarea的resize, 
7,th,td的padding
8, h1-h6我觉得不用重写,默认的font-weight和font-size设定的很好,margin上面可写可不写,我觉得设定的也没问题。

 

由此 ,我便生成了自己的 reset.css,很简洁,没有使用通配符 *  。

body,ul,ol,dl,dd,pre,fieldset{
    margin:0;
}
ul,ol{
    padding:0;
    list-style:none;
}
input,textarea,select,button{
    font-family:‘Helvetica Neue‘,Tahoma,Arial,PingFangSC-Regular,‘Hiragino Sans GB‘,‘Microsoft Yahei‘,sans-serif;
    font-size:100%;
    box-sizing:border-box;
}
pre{
    font-size:1em;
}
table{
    border-collapse: collapse;
    border-spacing: 0;
}
a{
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}


当然,这只是我自己习惯用的reset,比如有些人就是喜欢把 box-sizing设置为border-box, 觉得那样计算起来很方便,我这里就没有使用通配符给所有元素都设置, 只给了几个表单元素。

这就是萝卜白菜各有所爱了,当时间长后,你肯定会生成自己的reset。 


本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!

链接: https://fly63.com/article/detial/2261

normalize.css介绍和使用,与CSS Reset的区别

Normalize.css只是一个很小的css文件,相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。也就是说,Normalize.css是一种CSS reset的替代方案。创造normalize.css的目的:

CSS Reset浏览器样式重置

只要您的客户存在使用不同浏览器(ie,firefox,chrome等)的可能,那你就不得不从完美的理想状态回到现实,因为不同核心的浏览器对CSS的解析效果呈现各异,导致您所期望的效果跟浏览器的“理解”效果有偏差

CSS重置默认样式reset.css代码模板

由于各大浏览器存在兼容性问题,同一个CSS属性在不同浏览器下的表现不一定相同,有经验的前端设计者都会自定义一个重置浏览器样式的CSS文件,在这个文件中定义一些针对不同的浏览器最终表现出一致的代码

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!