zoukankan      html  css  js  c++  java
  • CSS Reset(CSS重置)

      CSS Reset是指重设浏览器的样式。在各种浏览器中,都会对CSS的选择器默认一些数值,譬如当h1没有被设置数值时,显示一定大小。

      但并不是所有的浏览器都使用一样的数值,所以有了CSS Reset,以让网页的样式在各浏览器中表现一致。

      下面介绍几个主流的CSS Reset代码:

      1、Eric Meyer

    html, body, div, span, applet, object, iframe,
    
      h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    
      a, abbr, acronym, address, big, cite, code,
    
      del, dfn, em, img, ins, kbd, q, s, samp,
    
      small, strike, strong, sub, sup, tt, var,
    
      b, u, i, center,
    
      dl, dt, dd, ol, ul, li,
    
      fieldset, form, label, legend,
    
      table, caption, tbody, tfoot, thead, tr, th, td,
    
      article, aside, canvas, details, embed,
    
      figure, figcaption, footer, header, hgroup,
    
      menu, nav, output, ruby, section, summary,
    
      time, mark, audio, video {
    
      margin: 0;
    
      padding: 0;
    
      border: 0;
    
      font-size: 100%;
    
      font: inherit;
    
      vertical-align: baseline;
    
      }
    
      /* HTML5 display-role reset for older browsers */
    
      article, aside, details, figcaption, figure,
    
      footer, header, hgroup, menu, nav, section {
    
      display: block;
    
      }
    
      body {
    
      line-height: 1;
    
      }
    
      ol, ul {
    
      list-style: none;
    
      }
    
      blockquote, q {
    
      quotes: none;
    
      }
    
      blockquote:before, blockquote:after,
    
      q:before, q:after {
    
      content: '';
    
      content: none;
    
      }
    
      table {
    
      border-collapse: collapse;
    
      border-spacing: 0;
    
      }

      2、YUI

      

    /*
    
      YUI 3.4.1 (build 4118)
    
      Copyright 2011 Yahoo! Inc. All rights reserved.
    
      Licensed under the BSD License.
    
      http://yuilibrary.com/license/
    
      */
    
      /*
    
      TODO will need to remove settings on HTML since we can’t namespace it.
    
      TODO with the prefix,should I group by selector or property for weight savings?
    
      */
    
      html {
    
      color:#000;
    
      background:#FFF;
    
      }
    
      /*
    
      TODO remove settings on BODY since we can’t namespace it.
    
      */
    
      /*
    
      TODO test putting a class on HEAD.
    
      - Fails on FF.
    
      */
    
      body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {
    
      margin:0;
    
      padding:0;
    
      }
    
      table {
    
      border-collapse:collapse;
    
      border-spacing:0;
    
      }
    
      fieldset,img {
    
      border:0;
    
      }
    
      /*
    
      TODO think about hanlding inheritence differently,maybe letting IE6 fail a bit…
    
      */
    
      address,caption,cite,code,dfn,em,strong,th,var {
    
      font-style:normal;
    
      font-weight:normal;
    
      }
    
      ol,ul {
    
      list-style:none;
    
      }
    
      caption,th {
    
      text-align:left;
    
      }
    
      h1,h2,h3,h4,h5,h6 {
    
      font-size:100%;
    
      font-weight:normal;
    
      }
    
      q:before,q:after {
    
      content:'';
    
      }
    
      abbr,acronym {
    
      border:0;
    
      font-variant:normal;
    
      }
    
      /* to preserve line-height and selector appearance */
    
      sup {
    
      vertical-align:text-top;
    
      }
    
      sub {
    
      vertical-align:text-bottom;
    
      }
    
      input,textarea,select {
    
      font-family:inherit;
    
      font-size:inherit;
    
      font-weight:inherit;
    
      }
    
      /*to enable resizing for IE*/
    
      input,textarea,select {
    
      *font-size:100%;
    
      }
    
      /*because legend doesn’t inherit in IE */
    
      legend {
    
      color:#000;
    
      }

      3、csslab

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
    
      article, aside, dialog, figure, header, footer, hgroup, menu, nav, section, time, mark, audio, video {
    
      margin: 0;
    
      padding: 0;
    
      border: 0;
    
      outline: 0;
    
      font-weight: inherit;
    
      font-style: inherit;
    
      font-size: 100%;
    
      }
    
      article, aside, nav, section, dialog, figure, header, footer, hgroup {
    
      display:block;
    
      }
    
      legend {
    
      display:none;
    
      }
    
      :focus {
    
      outline: 0;
    
      }
    
      table {
    
      border-collapse: collapse;
    
      border-spacing: 0;
    
      }
    
      caption, th, td {
    
      text-align: left;
    
      font-weight: normal;
    
      }
    
      a img, iframe {
    
      border: none;
    
      }
    
      ul {
    
      list-style: none;
    
      }
    
      input, textarea, select, button {
    
      font-size: 100%;
    
      font-family: inherit;
    
      }
    
      input, select {
    
      vertical-align:middle;
    
      }
    
      select {
    
      margin: inherit;
    
      }
    
      button {
    
      border: 0;
    
      padding: 0;
    
      background: transparent;
    
      cursor: pointer;
    
      }
    
      /* Fixes incorrect placement of numbers in ol’s in IE6/7 */
    
      ol { margin-left:2em; }
    
      /* ========================================= clearfix == */
    
      .clearfix:after {
    
      content: ".";
    
      display: block;
    
      height: 0;
    
      clear: both;
    
      visibility: hidden;
    
      }
    
      .clearfix {display: inline-block;}
    
      * html .clearfix {height: 1%;}
    
      .clearfix {display: block;}
  • 相关阅读:
    Auto-Test 要点纪录(一)
    终端应用变身文件 MD5/SHA1 校验工具
    MD5 algorithm in Objective C
    iphone开发-SQLite数据库使用
    【React】354- 一文吃透 React 事件机制原理
    【Web技术】353- CDN 科普
    【CSS】352- 有趣的CSS弹跳动画
    【Vuejs】351- 带你解析vue2.0的diff算法
    【每周小回顾】7- 一起回顾上周精彩内容
    【Vuejs】350- 学习 Vue 源码的必要知识储备
  • 原文地址:https://www.cnblogs.com/aobingyan/p/3849967.html
Copyright © 2011-2022 走看看