温馨提示

reset 的目的不是清除浏览器的默认样式, 这仅是部分工作. 清除和重置是紧密不可分的.
reset 的目的不是让默认样式在所有浏览器下一致, 而是减少默认样式有可能带来的问题.
reset 期望提供一套普适通用的基础样式. 但没有影响, 推荐根据具体需求, 裁剪和修改后再使用.

一.设置及注释

  1. /** 清除内外边距 **/
  2. body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
  3. dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
  4. pre, /* text formatting elements 文本格式元素 */
  5. form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
  6. th, td /* table elements 表格元素 */ {
  7. margin: 0;
  8. padding: 0;
  9. }
  10. /** 设置默认字体 **/
  11. body,
  12. button, input, select, textarea /* for ie */ {
  13. font: 14px/1.5 tahoma, \5b8b\4f53, sans-serif;
  14. }
  15. h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal;}
  16. address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
  17. code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一<a href="https://www.baidu.com/s?wd=%E7%AD%89%E5%AE%BD%E5%AD%97%E4%BD%93&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YLPjcvPvmkPW9WPWRLPj-b0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3En16srjm1rjcL" target="_blank" class="baidu-highlight">等宽字体</a> */
  18. small { font-size: 12px; } /* 小于 12px 的中文很难阅读, 让 small 正常化 */
  19. /** 重置列表元素 **/
  20. ul, ol { list-style: none; }
  21. /** 重置文本格式元素 **/
  22. a { text-decoration: none; }
  23. a:hover { text-decoration: underline; }
  24. sup { vertical-align: text-top; } /* 重置, 减少对行高的影响 */
  25. sub { vertical-align: text-bottom; }
  26. /** 重置表单元素 **/
  27. legend { color: #000; } /* for ie6 */
  28. fieldset, img { border: 0; } /* img 搭车:让链接里的 img 无边框 */
  29. button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
  30. /* 注:optgroup 无法扶正 */
  31. /** 重置表格元素 **/
  32. table { border-collapse: collapse; border-spacing: 0; }
  33. /* 重置 HTML5 元素 */
  34. article, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section,
  35. summary, time, mark, audio, video {
  36. display: block;
  37. margin: 0;
  38. padding: 0;
  39. }
  40. mark { background: #ff0; }

二.实际应用代码

建议做网站的时候,设置个reset.css样式表清除各个浏览器的默认样式,已达到做的网页在各个浏览器中达到统一,下面把YUI Reset CSS代码贴出

    1. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
    2. margin:0;
    3. padding:0;
    4. }
    5. table {
    6. border-collapse:collapse;
    7. border-spacing:0;
    8. }
    9. fieldset,img {
    10. border:0;
    11. }
    12. address,caption,cite,code,dfn,em,strong,th,var {
    13. font-style:normal;
    14. font-weight:normal;
    15. }
    16. ol,ul {
    17. list-style:none;
    18. }
    19. caption,th {
    20. text-align:left;
    21. }
    22. h1,h2,h3,h4,h5,h6 {
    23. font-size:100%;
    24. font-weight:normal;
    25. }
    26. q:before,q:after {
    27. content:'';
    28. }
    29. abbr,acronym {
    30. border:0;
    31. }

reset清除所有浏览器默认样式的更多相关文章

  1. reset.css(重置浏览器默认样式)

    @charset "utf-8";html{background-color:#fff;color:#000;font-size:12px} body,ul,ol,dl,dd,h1 ...

  2. css清除浏览器默认样式

    css清除浏览器默认样式(代替 *{}) 将代码放入 css 文件,使用 link 引入. /* v2.0 | 20110126 http://meyerweb.com/eric/tools/css/ ...

  3. 浏览器默认样式及reset

    写在前面 首先纠正一个易错概念.div并非生来就是块元素,而是每个浏览器都有一套默认的css样式(优先级最低),默认样式里会把div设置成display: block;还有margin,padding ...

  4. 浏览器默认样式(user agent stylesheet)+cssreset

    每种浏览器都有一套默认的样式表,即user agent stylesheet,在写网页时,没有指定的样式,按浏览器内置的样式表来渲染.这是合理的,像word中也有一些预留样式,可以让我们的排版更美观整 ...

  5. 浏览器默认样式(User Agent Stylesheet)

    原文:http://www.zjgsq.com/898.html 不同浏览器对于相同元素的默认样式并不一致,这也是为什么我们在CSS的最开始要写 * {padding:0;marging:0}: 不过 ...

  6. css 框架——base.css,作用是重设浏览器默认样式和提供通用原子类。自己留存

    今天发下我自己的 css 框架——base.css,作用是重设浏览器默认样式和提供通用原子类. @charset "utf-8"; /*! * @名称:base.css * @功能 ...

  7. __x__(23)0907第四天__浏览器默认样式

    浏览器默认样式:         为了美观,浏览器为了在页面没有样式时,也可以有一个较好的显示效果,默认设置若干 margin,padding. 作为开发人员,在CSS编写最初,一般都会清除默认样式, ...

  8. CSS系列——浏览器默认样式

    了解HTML标签在各浏览器当中的默认样式,可以让我们了解,为什么会要写Reset.css,Reset.css当中要怎么写样式最合理.试着思考下面的问题: 为什么会有默认样式? 每个浏览器的默认样式有什 ...

  9. css知多少(4)——解读浏览器默认样式

    上一节<css知多少(3)——样式来源与层叠规则>介绍了样式的五种来源,咱们再通过一张图回顾一下. 对于上面的三层,咱们大概都比较熟悉了.下面的两层中,用户自定义样式一般也就是改一改字号大 ...

随机推荐

  1. Android实战简易教程-第四十一枪(显示倒计时的Button-适用于获取验证码)

    近期在做获取验证码的功能.考虑到优良的用户体验,决定制作一个拥有倒计时提示的Button按钮,在网上查了一些资料,非常是简单的就能实现.我写了一个小Demo,大家能够应用到自己的项目中. 一.代码 1 ...

  2. 【Discuz】去除版权信息,标题栏与底部改动

    这篇文章尽管是介绍怎么把Discuz!的版权信息怎么搞得无影无踪,可是还是建议在不影响论坛视觉效果的情况下,保留Discuz的版权信息,毕竟它为我奉献了一个这么出色的开源论坛的phpproject.主 ...

  3. WPF学习笔记——设置ListBox选中项的背景颜色

    ListBox的选中项,在我这个WIN7里面,是亮蓝色,颜色是如此之浓厚,差不多遮盖了前景的字体! 太不协调了.可是怎么设置呢?设置触发器,又是IsMouseOver,又是IsFocused,在谷歌里 ...

  4. LA4788

    贪心 这个贪心不太懂啊 dfs返回子树需要的最小值,然后按需要减消耗排序,然后贪心选取即可. #include<bits/stdc++.h> using namespace std; ty ...

  5. iOS手势识别

    一.手势识别与触摸事件 1.如果想监听一个view上面的触摸事件,可选的做法是: (1)自定义一个view (2)实现view的touches方法,在方法内部实现具体处理代码 2.通过touches方 ...

  6. hdu1429胜利大逃亡(bfs)

    胜利大逃亡(续) Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Su ...

  7. 微信公众号开发之文本消息自动回复,以及系统关注自动回复,php代码

    以tshop为例 直接上代码: 企业 cc_wx_sys表为自建,存储系统消息的配置的 字段: id type key status <?php /** * tpshop * ========= ...

  8. wps 2016 个人版 重新开始编号

    wps文档重新开始编号,继续编号,自定义编号 首先选中这一行 鼠标右键选中项目符号和编号 单击项目符号和编号,你可以重新开始编号为1,继续前一列表,还可自定义,单击确定按钮就可以实现你想要的结果 效果 ...

  9. [编码]ASCII、GBK、Unicode(万国码) 和 UTF-8

    American ASCII编码 (American Standard Code for Information Interchange,美国信息互换标准代码)  China    gbk编码     ...

  10. Linux之tar.gz file

    A tarball (tar.gz file) is compressed tar archive. The tar program provides the ability to create ta ...