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

    

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. Java程序设计17——多线程-Part-B

    5 改变线程优先级 每个线程执行都具有一定的优先级,优先级高的线程获得较多的执行机会,而优先级低的线程则获得较少的执行机会. 每个线程默认的优先级都与创建它的父线程具有相同的优先级,在默认情况下,ma ...

  2. C#使用互斥量(Mutex)实现多进程并发操作时多进程间线程同步操作(进程同步)的简单示例代码及使用方法

    本文主要是实现操作系统级别的多进程间线程同步(进程同步)的示例代码及测试结果.代码经过测试,可供参考,也可直接使用. 承接上一篇博客的业务场景[C#使用读写锁三行代码简单解决多线程并发写入文件时线程同 ...

  3. tp5和gateworer集成

    第一步:安装thinkpph程序包 第二步:切换到根目录,使用composer require workerman/gateway-worker 安装Linux版本的gateway.(前提是你服务器安 ...

  4. 用Swift实现一款天气预报APP(二)

    这个系列的目录: 用Swift实现一款天气预报APP(一) 用Swift实现一款天气预报APP(二) 用Swift实现一款天气预报APP(三) 上篇中主要讲了界面的一些内容,这篇主要讨论网络请求,获得 ...

  5. 自我介绍和Github的初次体验

    姓名:袁宇鹏    学号:1413042045    班级:网络工程142    兴趣爱好:篮球,看书 写过的代码:用C++写过,只能算是看看这源程序修改. 没有开发过任何程序 Github使用流程: ...

  6. jenkins修改时区

    查看jenkins目前的时区 访问http://your-jenkins/systemInfo,查看user.timezone变量的值 默认是纽约时间 修改时区 查https://wiki.jenki ...

  7. shell备份文件时加上时间戳

    1.在root目录下新建backup_date文件,写入echo _back_`date '+%Y%m%d%H%M%S'` [root@iZbp10er5cziaoscpe3x0hZ ~]# vi b ...

  8. apache ap 并发测试工具

    可以使用 apache httpd 软件包里的 ab.exe 简单的做些网站的性能测试, ab.exe 是一个命令工具,所以不能双击运行, 在 cmd 下运行: ab.exe -n 1000 -c 5 ...

  9. eFrameWork学习笔记-eOleDB

    eOleDB是eFrameWork框架下基础的数据访问类,用于执行SQL语句,返回DataTable,分页,返回数据库所有库,库的所有表,表的所有列,Json导入.导出等. HTML: <div ...

  10. jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏

    查找标签 选择器: 基本选择器(同css) id选择器 $("#id") 标签选择器 $('tagName') class选择器 $(".className") ...