CSS RESET —— 浏览器样式重置

CSS Reset

1. CSS Reset为什么存在?

只要您的客户存在使用不同浏览器(ie,firefox,chrome等)的可能,那你就不得不从完美的理想状态回到现实,因为不同核心的浏览器对CSS的解析效果呈现各异,导致您所期望的效果跟浏览器的“理解”效果有偏差,今天提到的css reset就是用来重置(复位)元素在不同核心浏览器下的默认值,尽量保证元素在不同浏览器下的同一“起跑线”。 
——引用自关于CSS Reset


2. CSS Reset该怎么写?

CSS reset(css重置)基本上是不需要的,至少可以说80%的的CSS reset都是没有必要的,反而增加了页面CSS 
的重写,尤其像*{margin:0;}的做法更是要不得(反而破坏了很多UI的兼容性,比如说单复选框等)。我不是一概鄙弃CSS 
reset,有些常用标签我也是会简单重置一下的,而且会避免overwrite(样式重写),以保证样式最精简,渲染最高效 
——摘录自张鑫旭的这篇文章我是如何对网站CSS进行架构的



个人理解: 
对于不同的项目的CSS Reset也会有变化。CSS Reset应当是个人积累的经验的总结,重置一些经常使用的,在不断学习中修改。 
那作为初学者该如何写呢? 首先可以参考一些网站的CSS RESET(参考第三点),切不可复制过来直接用。应当像砌墙一样,一块砖一块砖的积累。当你觉得你每次都要写这个重置样式,那就加进你的CSS Reset表吧。


3. CSS Reset 示例

3.1 tmall,淘宝商城

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,
form,fieldset,legend,button,input,textarea,th,td  {margin:0;padding:0;}

body,button,input,select,textarea{font:12px/1.5     tahoma,arial,\5b8b\4f53;}

h1,h2,h3,h4,h5,h6{font-size:100%;}

address,cite,dfn,em,var{font-style:normal;}

code,kbd,pre,samp{font-family:courier new,courier,monospace;}

small{font-size:12px;}

ul,ol{list-style:none;}

a{text-decoration:none;}

a:hover{text-decoration:underline;}

sup{vertical-align:text-top;}

sub{vertical-align:text-bottom;}

legend{color:#000;}

fieldset,img{border:0;}

button,input,select,textarea{font-size:100%;}

table{border-collapse:collapse;border-spacing:0;}

  

3.2 tudou,土豆网

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}

body{color:#000;background:#fff;font-size:12px;line-    height:1.25;font-family:tahoma,arial,\5b8b\4f53,sans-serif}

th,td{text-align:left;vertical-align:top}

h1,h2,h3,h4,h5,h6{font-size:1em;font-weight:normal}

p{margin:0 0 1em 0}

blockquote{margin:0 0 1em 0}

a{color:#14647d;text-decoration:none;font-family:tahoma,arial,\5b8b\4f53,sans-serif;_font-family:arial,sans-serif}

a:hover{text-decoration:underline}

img{display:block;border:0}

li{list-style:none}

ol{padding:0 0 0 2em}

input,label,select,option,textarea,button,fieldset,legend{font-size:1em;font-family:tahoma,arial,\5b8b\4f53,sans-serif;_font-family:Arial,sans-serif}

input[type=text],textarea{-webkit-appearance:none;-webkit-border-radius:0;outline:none}

input.text{color:#444;border-color:#9f9f9f #dcdcdc #dcdcdc #9f9f9f;border-style:solid;border-width:1px;padding:3px 2px;height:14px}

input.radio,input.checkbox{margin-right:2px;vertical-align:-2px}

input.radio,input.checkbox{margin-left:-2px}

label.radio,label.checkbox{margin-right:5px}

textarea{border-color:#9f9f9f #dcdcdc #dcdcdc #9f9f9f;border-style:solid;border-width:1px;padding:1px;resize:none}

  

3.3 sohu,搜狐网

/* 全局CSS定义 */
body{font-family:’宋体‘;text-align:center;margin:0 auto;padding:0;background:#FFF;font-size:12px;color:#333;}

body > div{text-align:center;margin-right:auto;margin-left:auto;}

div,form,ul,ol,li,span,p{margin:0;padding:0;border:0;}

img,a img{border:0;margin:0;padding:0;}

h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:12px;font-weight:normal;}

ul,ol,li{list-style:none}

table,td,input{font-size:12px;padding:0}

/* 默认链接颜色 */
a{outline-style:none;color:#333;text-decoration:none}
a:hover{color:#c00;text-decoration:underline;}

  

时间: 2024-12-26 02:36:33

CSS RESET —— 浏览器样式重置的相关文章

苹果浏览器样式重置submit

大家刚接触写手机页面 或许都会遇到的 修复iPhone的safari浏览器上submit按钮圆角bug 修改前  修改后: 在CSS中加  -webkit-appearance: none; 便可以解决. 苹果浏览器样式重置submit

【学习】苹果iPhone safari浏览器样式重置修复按钮圆角bug

iPhone safari浏览器中,input按钮会按苹果的默认UI来渲染,例如,写的按钮明明是这个样的: 但是实际就会是这个样子: 怎么办呢? 为按钮添加:-webkit-appearance: none; 即可解决!

css reset的重置作用(可取还是不可取,取决于你)

一.重置的理由 当今流行的浏览器中,有些都是以自己的方式去理解css规范,这就会到只有的浏览器对css的解释与设计师的css定义初衷相冲突,使得网页的样子在某些浏览器下能正确按照设计师的想法显示.,但是有些浏览器却没有按照设计师想要的样子显示出来,这就导致浏览器的兼容性问题 所以,通过重置button标签的css属性,然后再将它统一定义,就可以产生相同的显示效果 css reset的作用就是让各个浏览器的css样式有一个统一的基准,而这个基准更多的就是"清零"! 以下是一整段的css

常见网站CSS样式重置

腾讯 1 2 3 4 5 6 7 8 9 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} body{font:12px "宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%} a{color:#172c45;

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

(1)定义:首先css reset指的是重置浏览器的默认样式 (2)作用:因为现在的浏览器很多,并且每个浏览器都有自己的默认样式,这样就会导致一个页面在多个浏览器下展示产生差异,所以我们需要做一些处理使每个浏览器下展示一致,故需要css reset (3)内容:第一个:*{padding:0;margin:0;border:0;}第二个:你所用到的元素{padding:0;margin:0;border:0;},然而第一个虽然写起来简单,但是它却会将所有的标签重置,而我们可能没有必要将那么多的元

关于reset.css的疑问:为什么一定要重置浏览器样式?

自开始做前端算起,我所做过的每一个项目中都会有一个reset.css,也就是重置样式表.我现在想想都不知道第一次是从哪儿弄来的一个重置样式表.快五年了,好像从来都没有质疑过关于重置样式表的内容. 这样一个样式表里往往会有一大段对“浏览器样式”的清除与重置.刚开始做前端的时候一度感觉,能写出来这么一个样式表似乎很酷.很牛:做时间久了,也自己开始针对不同项目写自己的reset.css了,但也不外乎是一大堆重置样式,有时候都不关心浏览器里每个元素有什么样的默认样式,只是唯恐漏掉哪个元素没有把样式重置掉

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

在以前写html代码的时候,一般都会在head里添加重置样式reset.css,其内容如下: @charset "utf-8"; 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

CSS Reset / Normalize 如何进行样式重置

CSS Reset 过于激进,所有样式全部消除没有必要. 关键是保持各种浏览器的兼容,包括Bootstrap的CSS Reset也是走的这个路线. 线面这个就是后面一种思路的成果: http://necolas.github.io/normalize.css/

重置默认样式 css reset

html { overflow-x:auto; overflow-y:scroll; } body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td { font-weight:400; margin:0; padding:0; } h1, h2, h3, h4, h4, h5 { margin:0; padding:0; } body {  color:#666666; font-family: