zoukankan      html  css  js  c++  java
  • reset清除所有浏览器默认样式

    温馨提示

    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, 5b8b4f53, 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. }
  • 相关阅读:
    placeholder在ie浏览器里不显示的问题解决
    条件注释判断浏览器版本<!--[if lt IE 9]>
    在CSS中,BOX的Padding属性的数值赋予顺序为
    PhpStorm的注册码、Key
    关于【bootstrap modal 模态框弹出瞬间消失的问题】
    python 常见算法
    scrapy 爬虫基础
    python中的小知识点
    python 数据结构简介
    前端插件定制--表头和表内容
  • 原文地址:https://www.cnblogs.com/zhaowy/p/8400274.html
Copyright © 2011-2022 走看看