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

    

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:;
}
ul,ol{
padding:;
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:;
}
a{
text-decoration: none;
}
a:hover{
text-decoration: underline;
}

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

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

css的reset和常用的html标签的默认样式整理的更多相关文章

  1. html标签默认样式整理

    引:http://www.jb51.net/web/94964.html 文为大家整理了html标签默认样式属性及浏览器默认样式等等,喜欢css布局的朋友们可以学下,希望对大家有所帮助 html, a ...

  2. CSS消除button标签的默认样式

    button{ /*消除button的默认样式*/ /*这种写法是对所有的button标签同时生效*/ margin: 0px; padding: 0px; /*自定义边框*/ border: 0px ...

  3. 使用 CSS 去掉 iPhone 网页上按钮的超大圆角默认样式

    使用 iPhone 上的浏览器去浏览网页的时候,按钮总是显示超大圆角的样式,显得超级恶心,但是我们自己定义 border-radius 为 0 也无法去除这个圆角,经过搜索发现这是 webikt 内核 ...

  4. 教你小三角,适用移动端等,解决移动端a标签的默认样式

    1.小三角,通过给一个div设置足够大的边框,让它的上边框,右边框,左边框,的背景颜色设置成透明的,来实现,如下: <!DOCTYPE html> <html> <hea ...

  5. HTML标签的默认样式

    body    有默认的内外边距(margin:0;padding:0); p         有默认的外边距(margin:0;)

  6. a标签去掉默认样式并自定义样式

    a { text-decoration: none;//去掉下划线 color: inherit; -webkit-user-select: none; -moz-user-select: none; ...

  7. HTML的各个标签的默认样式

    head{ display: none } body{ margin: 8px;line-height: 1.12 } button, textarea,input, object,select { ...

  8. 【input】标签去除默认样式

    input{-webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none;}

  9. Normalize.css 与 reset.css

    Normalize.css 与 reset.css都是初始化页面样式 不同点在于 reset.css更加粗暴,直接把所有的样式全部初始化了: Normalize.css还剩点良心,还保留了一些浏览器默 ...

随机推荐

  1. mongo学习- mapReduce操作事例

    源数据: { "_id" : 1.0, "name" : "abc", "age" : 43.0, "type ...

  2. 前端福利之jQuery文字轮播特效(转)

    闲谈:离开学校那座象牙塔已经也有大半年的事件了,生活中不再充满了茫然只有忙碌.连续加班加点大半个月,做的活动项目终于算是告一段落了,而今天也将是考验其真正价值的时候,现在将这次开发中遇到的问题做一下总 ...

  3. Web数据挖掘综述

     

  4. cenos 安装nginx并添加到service

    系统平台:CentOS release 6.6 (Final) 64位. 一.安装编译工具及库文件 yum -y install make zlib zlib-devel gcc-c++ libtoo ...

  5. Android Camera的使用(一) 读书笔记

    原文地址 https://blog.csdn.net/junzia/article/details/52301199 拍照步骤1.添加权限2.开启相机时check一下是否有摄像头3.对预览大小.照片大 ...

  6. 转:Entity FrameWork利用Database.SqlQuery<T>执行存储过程并返回参数

    public IEnumerable<Statistic> GetStatistics(IEnumerable<Guid> itemIds) { var ctx = new D ...

  7. 转载:爬虫技术浅析(Python)

    http://drops.wooyun.org/tips/3915 0x00 前言 网络爬虫(Web crawler),是一种“自动化浏览网络”的程序,或者说是一种网络机器人.它们被广泛用于互联网搜索 ...

  8. [Oracle]Oracle数据库CPU利用率很高解决方案

    Oracle数据库经常会遇到CPU利用率很高的情况,这种时候大都是数据库中存在着严重性能低下的SQL语句,这种SQL语句大大的消耗了CPU资源,导致整个系统性能低下.当然,引起严重性能低下的SQL语句 ...

  9. NPOI 设置excel 边框

    https://blog.csdn.net/xxs77ch/article/details/50232343

  10. C# print pos winform

    先将pos机设置为默认 控制面板->打印机和传真->右键->服务器属性 首先创建 ClassPrint 对象 using System; using System.Drawing; ...