什么是Css Reset呢?

在 HTML标签在浏览器里有默认的样式,不同浏览器的默认样式之间也会有差别。在切换页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉!这就是CSS reset。(参考百度百科:Css Reset

常用Css Reset(一):Eric Meyer’s “Reset CSS” 2.0

/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */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:;    padding:;    border:;    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:;}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:;}

常用Css Reset(二):HTML5 Doctor CSS ResetGet

/** * html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/) * Richard Clark (http://richclarkdesign.com) * http://cssreset.com */html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video {    margin:;    padding:;    border:;    outline:;    font-size:100%;    vertical-align:baseline;    background:transparent;}body {    line-height:;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {    display:block;}nav ul {    list-style:none;}blockquote, q {    quotes:none;}blockquote:before, blockquote:after,q:before, q:after {    content:'';    content:none;}a {    margin:;    padding:;    font-size:100%;    vertical-align:baseline;    background:transparent;}/* change colours to suit your needs */ins {    background-color:#ff9;    color:#000;    text-decoration:none;}/* change colours to suit your needs */mark {    background-color:#ff9;    color:#000;    font-style:italic;    font-weight:bold;}del {    text-decoration: line-through;}abbr[title], dfn[title] {    border-bottom:1px dotted;    cursor:help;}table {    border-collapse:collapse;    border-spacing:;}/* change border colour to suit your needs */hr {    display:block;    height:1px;    border:;    border-top:1px solid #cccccc;    margin:1em 0;    padding:;}input, select {    vertical-align:middle;}

常用Css Reset(三):Yahoo! (YUI 3) Reset CSS

/** * YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/) * http://cssreset.com * Copyright 2012 Yahoo! Inc. All rights reserved. * 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:;    padding:;}table {    border-collapse:collapse;    border-spacing:;}fieldset,img {    border:;}/*    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:;    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;}/* YUI CSS Detection Stamp */#yui3-css-stamp.cssreset { display: none; }

常用Css Reset(四):Universal Selector ‘*’ Reset

/* cssreset.com */* {    margin:;    padding:;}

常用Css Reset(五):Normalize.css 1.0

/*! normalize.css v1.0.0 | MIT License | git.io/normalize */ /* ==========================================================================   HTML5 display definitions   ========================================================================== */ /* * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3. */ article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary {    display: block;} /* * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. */ audio,canvas,video {    display: inline-block;    *display: inline;    *zoom:;} /* * Prevents modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) {    display: none;    height:;} /* * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3, * and Safari 4. * Known issue: no IE 6 support. */ [hidden] {    display: none;} /* ==========================================================================   Base   ========================================================================== */ /* * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using *    `em` units. * 2. Prevents iOS text size adjust after orientation change, without disabling *    user zoom. */ html {    font-size: 100%; /* 1 */    -webkit-text-size-adjust: 100%; /* 2 */    -ms-text-size-adjust: 100%; /* 2 */} /* * Addresses `font-family` inconsistency between `textarea` and other form * elements. */ html,button,input,select,textarea {    font-family: sans-serif;} /* * Addresses margins handled incorrectly in IE 6/7. */ body {    margin:;} /* ==========================================================================   Links   ========================================================================== */ /* * Addresses `outline` inconsistency between Chrome and other browsers. */ a:focus {    outline: thin dotted;} /* * Improves readability when focused and also mouse hovered in all browsers. */ a:active,a:hover {    outline:;} /* ==========================================================================   Typography   ========================================================================== */ /* * Addresses font sizes and margins set differently in IE 6/7. * Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5, * and Chrome. */ h1 {    font-size: 2em;    margin: 0.67em 0;} h2 {    font-size: 1.5em;    margin: 0.83em 0;} h3 {    font-size: 1.17em;    margin: 1em 0;} h4 {    font-size: 1em;    margin: 1.33em 0;} h5 {    font-size: 0.83em;    margin: 1.67em 0;} h6 {    font-size: 0.75em;    margin: 2.33em 0;} /* * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome. */ abbr[title] {    border-bottom: 1px dotted;} /* * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. */ b,strong {    font-weight: bold;} blockquote {    margin: 1em 40px;} /* * Addresses styling not present in Safari 5 and Chrome. */ dfn {    font-style: italic;} /* * Addresses styling not present in IE 6/7/8/9. */ mark {    background: #ff0;    color: #000;} /* * Addresses margins set differently in IE 6/7. */ p,pre {    margin: 1em 0;} /* * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome. */ code,kbd,pre,samp {    font-family: monospace, serif;    _font-family: 'courier new', monospace;    font-size: 1em;} /* * Improves readability of pre-formatted text in all browsers. */ pre {    white-space: pre;    white-space: pre-wrap;    word-wrap: break-word;} /* * Addresses CSS quotes not supported in IE 6/7. */ q {    quotes: none;} /* * Addresses `quotes` property not supported in Safari 4. */ q:before,q:after {    content: '';    content: none;} small {    font-size: 75%;} /* * Prevents `sub` and `sup` affecting `line-height` in all browsers. */ sub,sup {    font-size: 75%;    line-height:;    position: relative;    vertical-align: baseline;} sup {    top: -0.5em;} sub {    bottom: -0.25em;} /* ==========================================================================   Lists   ========================================================================== */ /* * Addresses margins set differently in IE 6/7. */ dl,menu,ol,ul {    margin: 1em 0;} dd {    margin: 0 0 0 40px;} /* * Addresses paddings set differently in IE 6/7. */ menu,ol,ul {    padding: 0 0 0 40px;} /* * Corrects list images handled incorrectly in IE 7. */ nav ul,nav ol {    list-style: none;    list-style-image: none;} /* ==========================================================================   Embedded content   ========================================================================== */ /* * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3. * 2. Improves image quality when scaled in IE 7. */ img {    border:; /* 1 */    -ms-interpolation-mode: bicubic; /* 2 */} /* * Corrects overflow displayed oddly in IE 9. */ svg:not(:root) {    overflow: hidden;} /* ==========================================================================   Figures   ========================================================================== */ /* * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11. */ figure {    margin:;} /* ==========================================================================   Forms   ========================================================================== */ /* * Corrects margin displayed oddly in IE 6/7. */ form {    margin:;} /* * Define consistent border, margin, and padding. */ fieldset {    border: 1px solid #c0c0c0;    margin: 0 2px;    padding: 0.35em 0.625em 0.75em;} /* * 1. Corrects color not being inherited in IE 6/7/8/9. * 2. Corrects text not wrapping in Firefox 3. * 3. Corrects alignment displayed oddly in IE 6/7. */ legend {    border:; /* 1 */    padding:;    white-space: normal; /* 2 */    *margin-left: -7px; /* 3 */} /* * 1. Corrects font size not being inherited in all browsers. * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5, *    and Chrome. * 3. Improves appearance and consistency in all browsers. */ button,input,select,textarea {    font-size: 100%; /* 1 */    margin:; /* 2 */    vertical-align: baseline; /* 3 */    *vertical-align: middle; /* 3 */} /* * Addresses Firefox 3+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ button,input {    line-height: normal;} /* * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` *    and `video` controls. * 2. Corrects inability to style clickable `input` types in iOS. * 3. Improves usability and consistency of cursor style between image-type *    `input` and others. * 4. Removes inner spacing in IE 7 without affecting normal text inputs. *    Known issue: inner spacing remains in IE 6. */ button,html input[type="button"], /* 1 */input[type="reset"],input[type="submit"] {    -webkit-appearance: button; /* 2 */    cursor: pointer; /* 3 */    *overflow: visible;  /* 4 */} /* * Re-set default cursor for disabled elements. */ button[disabled],input[disabled] {    cursor: default;} /* * 1. Addresses box sizing set to content-box in IE 8/9. * 2. Removes excess padding in IE 8/9. * 3. Removes excess padding in IE 7. *    Known issue: excess padding remains in IE 6. */ input[type="checkbox"],input[type="radio"] {    box-sizing: border-box; /* 1 */    padding:; /* 2 */    *height: 13px; /* 3 */    *width: 13px; /* 3 */} /* * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome *    (include `-moz` to future-proof). */ input[type="search"] {    -webkit-appearance: textfield; /* 1 */    -moz-box-sizing: content-box;    -webkit-box-sizing: content-box; /* 2 */    box-sizing: content-box;} /* * Removes inner padding and search cancel button in Safari 5 and Chrome * on OS X. */ input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {    -webkit-appearance: none;} /* * Removes inner padding and border in Firefox 3+. */ button::-moz-focus-inner,input::-moz-focus-inner {    border:;    padding:;} /* * 1. Removes default vertical scrollbar in IE 6/7/8/9. * 2. Improves readability and alignment in all browsers. */ textarea {    overflow: auto; /* 1 */    vertical-align: top; /* 2 */} /* ==========================================================================   Tables   ========================================================================== */ /* * Remove most spacing between table cells. */ table {    border-collapse: collapse;    border-spacing:;}

注:本文大部分内容来自http://www.cssreset.com/

常用CSS Reset汇总的更多相关文章

  1. HTML常用命名和CSS reset代码【收集总结】

    CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:l ...

  2. 网站常用css必备css reset

    在我们写前端代码页面的时候,很多常用的CSS类都是固定的!但没有一个标准或者大家都按自己的方式去随意的写,这样就每次都重复写一些固定的类! 为此HTML5 Doctor(HTML5医生)为我们总结了一 ...

  3. 现代 CSS 解决方案:Modern CSS Reset

    在早年间(其实也不是很早),写过几篇关于 CSS Reset 的文章 - reset.css 知多少. 详细描述了当时业界比较常用的,两个 CSS reset 方案:reset.css 与 Norma ...

  4. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  5. 常用CSS优化总结——网络性能与语法性能建议

    在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时多少会用到一些,但突然问我,很难把自己知道的都说出来.页面优化明显不是一两句能够说完的,这两天总结了一下 ...

  6. 常见标签的默认属性值及相互作用——关于CSS reset的思考

    在现在的网站设计中使用reset.css用重置整个站点的标签的CSS属性的做法很常见,但有时候我们已经为了reset而reset,我们经常看到这样的reset代码 div{ padding:0px; ...

  7. 关于CSS reset

    关于CSS resetCSS reset(css重置)基本上是不需要的,至少可以说80%的的CSS reset都是没有必要的,反而增加了页面CSS 的overwrite,尤其像开心网*{margin: ...

  8. css reset重置样式有那么重要吗?

    在以前写html代码的时候,一般都会在head里添加重置样式reset.css,其内容如下: @charset "utf-8"; html, body, div, span, ap ...

  9. (转)常用CSS优化总结——网络性能与语法性能建议

    原文地址:http://www.cnblogs.com/dolphinX/p/3508657.html 在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时 ...

随机推荐

  1. SQLite数据库增删改查操作

    一.使用嵌入式关系型SQLite数据库存储数据 在Android平台上,集成了一个嵌入式关系型数据库——SQLite,SQLite3支持NULL.INTEGER.REAL(浮点数字).TEXT(字符串 ...

  2. 如何处理Android SDK无法更新问题?

    在Android开发中,最痛苦的事情就是相关库升级后,Android SDK太低,跑步起来,最最痛苦的事情就是,想更新,却因大天朝的一墙之隔,愣是没法更新.遇到这种情况怎么办呢?小编和大家分享一个解决 ...

  3. ASP 中 Cookies 的 Expires 属性的设置(JS版本)

    直接上代码,代码中有注释 <%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%> <% var numVisi ...

  4. 集群: 如何在spring 任务中 获得集群中的一个web 容器的端口号?

    系统是两台机器, 跑四个 web 容器, 每台机器两个容器 . nginx+memcached+quartz集群,web容器为 tomcat . web 应用中 用到spring 跑多个任务,任务只能 ...

  5. 防止ViewPager中的Fragment被销毁的方法,更加流畅

    在使用ViewPager与Fragment的时候,ViewPager会自动缓存1页内的数据,如下图: 当我们当前处在页面2的时候,页面1和页面3的View实际上已经创建好了,所以在我们拖动的时候是可以 ...

  6. TextView使用SpannableString设置复合文本(转)

    TextView通常用来显示普通文本,但是有时候需要对其中某些文本进行样式.事件方面的设置.Android系统通过SpannableString类来对指定文本进行相关处理,具体有以下功能: 1.Bac ...

  7. mysql性能监控工具:mycheckpoint的使用方法

    mycheckpoint 是针对mysql的一个性能监控.指标采集的python写成的工具. 工作原理说明: mycheckpoint是一段脚本,通过将其设置为crontab定时任务,每几分钟采集一次 ...

  8. Linux 求文件交集 差集等

    使用comm命令 假设两个文件FILE1和FILE2用集合A和B表示,FILE1内容如下: a b c e d a FILE2内容如下: c d a c 基本上有两个方法,一个是comm命令,一个是g ...

  9. React-Native入门指导之iOS篇 —— 一、准备工作

    React-Native 入门指导系列教程目录 一.准备工作 (已完成) 二.项目介绍与调试 三.CSS样式与Flex布局 四.常用UI控件的使用 五.JSX在React-Native中的应用 六.事 ...

  10. MySQL中导入 导出CSV

    来自:http://blog.csdn.net/sara_yhl/article/details/6850107 导出 select * from test_info into outfile '/t ...