`
yeya86787888
  • 浏览: 8447 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

浏览器CSS Reset方法十例

阅读更多

  在各种浏览器中,都会对CSS的选择器默认一些数值,譬如当h1没有被设置数值时,显示一定大小。但并不是所有的浏览器都使用一样的数值,所以有了CSS Reset,以让网页的样式在各浏览器中表现一致。

一、Generic Reset CSS

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
* { 
padding: 0; 
margin: 0; 
border: 0; 
}


   这也是一款CSS Reset的方法,让所有的选择器的padding、margin和border都设置成0。这是一种强大的方法,也是最简单,最安 全的方法,不过,也是最占用资源的方法。对于小型的网站来说,用这个并不会带来大的资源浪费,但如果是像Yahoo这种架构非常大的网站,刚需要有选择地 进行CSS重设,以减少资源浪费。

二、Ateneu Popular CSS Reset

div css xhtml xml Example Source Code Example Source Code [www.52css.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, font, img, ins, 
kbd, q, s, samp, small, strike, strong, sub, sup, tt, 
var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td { 
margin: 0; 
padding: 0; 
border: 0; 
outline: 0; 
font-weight: inherit; 
font-style: inherit; 
font-size: 100%; 
font-family: inherit; 
vertical-align: baseline; 

:focus { outline: 0;} 
a, a:link, a:visited, a:hover, a:active{text-decoration:none} 
table { border-collapse: separate;border-spacing: 0;} 
th, td {text-align: left; font-weight: normal;} 
img, iframe {border: none; text-decoration:none;} 
ol, ul {list-style: none;} 
input, textarea, select, button {font-size: 100%;font-family: inherit;} 
select {margin: inherit;} 
hr {margin: 0;padding: 0;border: 0;color: #000;background-color: #000;height: 1px}


三、Chris Poteet’s Reset CSS

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
* { 
vertical-align: baseline; 
font-family: inherit; 
font-style: inherit; 
font-size: 100%; 
border: none; 
padding: 0; 
margin: 0; 

body { 
padding: 5px; 

h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl { 
margin: 20px 0; 

li, dd, blockquote { 
margin-left: 40px; 

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

 
四、Yahoo’s CSS Reset

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,   
form,fieldset,input,textarea,p,blockquote,th,td {   
    padding: 0;   
    margin: 0;   
}   
table {   
    border-collapse: collapse;   
    border-spacing: 0;   
}   
fieldset,img {   
    border: 0;   
}   
address,caption,cite,code,dfn,em,strong,th,var {   
    font-weight: normal;   
    font-style: normal;   
}   
ol,ul {   
    list-style: none;   
}   
caption,th {   
    text-align: left;   
}   
h1,h2,h3,h4,h5,h6 {   
    font-weight: normal;   
    font-size: 100%;   
}   
q:before,q:after {   
    content:'';   
}   
abbr,acronym { border: 0;   
}  


五、Eric Meyer Reset CSS

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
html, body, div, span, applet, object, iframe, table, caption, 
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins, 
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, 
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend { 
vertical-align: baseline; 
font-family: inherit; 
font-weight: inherit; 
font-style: inherit; 
font-size: 100%; 
outline: 0; 
padding: 0; 
margin: 0; 
border: 0; 

:focus { 
outline: 0; 

body { 
background: white; 
line-height: 1; 
color: black; 

ol, ul { 
list-style: none; 

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

caption, th, td { 
font-weight: normal; 
text-align: left; 

blockquote:before, blockquote:after, q:before, q:after { 
content: ""; 

blockquote, q { 
quotes: "" ""; 
}


六、Tantek Celik Reset CSS

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
:link,:visited { text-decoration:none } 
ul,ol { list-style:none } 
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; } 
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input 
{ margin:0; padding:0 } 
a img,:link img,:visited img { border:none } 
address { font-style:normal }


七、Christian Montoya Reset CSS

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
html, body, form, fieldset { 
margin: 0; 
padding: 0; 
font: 100%/120% Verdana, Arial, Helvetica, sans-serif; 

h1, h2, h3, h4, h5, h6, p, pre, 
blockquote, ul, ol, dl, address { 
margin: 1em 0; 
padding: 0; 

li, dd, blockquote { 
margin-left: 1em; 

form label { 
cursor: pointer; 

fieldset { 
border: none; 

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


八、Rudeworks Reset CSS

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
* { 
margin: 0; 
padding: 0; 
border: none; 

html { 
font: 62.5% "Lucida Grande", Lucida, Verdana, sans-serif; 
text-shadow: #000 0px 0px 0px; 

ul { 
list-style: none; 
list-style-type: none; 

h1, h2, h3, h4, h5, h6, p, pre, 
blockquote, ul, ol, dl, address { 
font-weight: normal; 
margin: 0 0 1em 0; 

cite, em, dfn { 
font-style: italic; 

sup { 
position: relative; 
bottom: 0.3em; 
vertical-align: baseline; 

sub { 
position: relative; 
bottom: -0.2em; 
vertical-align: baseline; 

li, dd, blockquote { 
margin-left: 1em; 

code, kbd, samp, pre, tt, var, input[type='text'], textarea { 
font-size: 100%; 
font-family: monaco, "Lucida Console", courier, mono-space; 

del { 
text-decoration: line-through; 

ins, dfn { 
border-bottom: 1px solid #ccc; 

small, sup, sub { 
font-size: 85%; 

abbr, acronym { 
text-transform: uppercase; 
font-size: 85%; 
letter-spacing: .1em; 
border-bottom-style: dotted; 
border-bottom-width: 1px; 

a abbr, a acronym { 
border: none; 

sup { 
vertical-align: super; 

sub { 
vertical-align: sub; 

h1 { 
font-size: 2em; 

h2 { 
font-size: 1.8em; 

h3 { 
font-size: 1.6em; 

h4 { 
font-size: 1.4em; 

h5 { 
font-size: 1.2em; 

h6 { 
font-size: 1em; 

a, a:link, a:visited, a:hover, a:active { 
outline: 0; 
text-decoration: none; 

a img { 
border: none; 
text-decoration: none; 

img { 
border: none; 
text-decoration: none; 

label, button { 
cursor: pointer; 

input:focus, select:focus, textarea:focus { 
background-color: #FFF; 

fieldset { 
border: none; 

.clear { 
clear: both; 

.float-left { 
float: left; 

.float-right { 
float: right; 

body { 
text-align: center; 

#wrapper { 
margin: 0 auto; 
text-align: left; 
}


九、Anieto2K Reset CSS

div css xhtml xml Example Source Code Example Source Code [www.52css.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, font, img, 
ins, kbd, q, s, samp, small, strike, 
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
center, u, b, i { 
margin: 0; 
padding: 0; 
border: 0; 
outline: 0; 
font-weight: normal; 
font-style: normal; 
font-size: 100%; 
font-family: inherit; 
vertical-align: baseline 

body { 
line-height: 1 

:focus { 
outline: 0 

ol, ul { 
list-style: none 

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

blockquote:before, blockquote:after, q:before, q:after { 
content: "" 

blockquote, q { 
quotes: "" "" 

input, textarea { 
margin: 0; 
padding: 0 

hr { 
margin: 0; 
padding: 0; 
border: 0; 
color: #000; 
background-color: #000; 
height: 1px 
}


十、CSSLab CSS Reset

div css xhtml xml Example Source Code Example Source Code [www.52css.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, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, table, caption, tbody, tfoot, 
thead, tr, th, td { 
margin: 0; 
padding: 0; 
border: 0; 
outline: 0; 
font-weight: inherit; 
font-style: inherit; 
font-size: 100%; 
font-family: inherit; 
vertical-align: baseline; 

:focus { 
outline: 0; 

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

caption, th, td { 
text-align: left; 
font-weight: normal; 

a img, iframe { 
border: none; 

ol, ul { 
list-style: none; 

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

select { 
margin: inherit; 

/* 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;}
分享到:
评论

相关推荐

    浏览器CSS Reset的十种方法

    但并不是所有的浏览器都使 用一样的数值,所以,有了CSS Reset,以让网页的样式在各浏览器中表现一致。 正在使用CSS的你,用过CSS Reset吗?当然,或许你用了,却不知道正在用,比如你可能用到: * { padding: 0;...

    Reset_CSS css样式重置文件

    CSS Reset即是对浏览器的默认CSS规则进行初始化,保证不同浏览器下CSS的一致性。CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同,导致设计师在没有定义某个CSS属性时,不同的浏览器会按照自己的默认值来为...

    cssreset-min.css

    做过前端的朋友都知道,目前众多的浏览器,对于HTML的解析并不是完全一样。...<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">

    css reset默认设置

    css reset,导入该css文件,给一些标签添加相同的默认设置,防止在不同的浏览器中出现差异

    reset.css 重置浏览器标签的样式表

    所以解决的方法就是一开始就将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉!这就是CSS reset。

    CSS重置(CSS Reset) 让网页样式在各浏览器中表现一致

    CSS Reset是指重设浏览器的样式,在各种浏览器中,都会对CSS的选择器默认一些数值,譬如当h1没有被设置数值时,显示一定大小;有了CSS Reset,让网页的样式在各浏览器中表现一致,需要的朋友可以了解下

    CSSreset文件

    对css属性初始化,减少部分的浏览器效果不同引起的问题

    css 浏览器默认样式清除

    默认样式: -通常情况下,浏览器会给元素设置一些默认样式 -默认样式的存在会影响页面的...reset:直接取消了浏览器的默认样式 normalize :对默认样式进行了统一 引用样式表: <link rel="stylesheet" href="">

    reset css 2.0 浏览器 跨手机样式统一 VUE教程配套文件

    reset css 2.0 浏览器\跨手机样式统一必备, 慕课VUE教程配套文件 ,官方网站国内访问缓慢, 特共享给群友使用.

    CSS重置样式清除浏览器默认样式

    CSS重置样式,清除浏览器默认样式,并配置适合设计的基础样式(强调文本是否大多是粗体、主文字色,主链接色,主字体等)。

    reset.css下载

    亲测 可用 在HTML标签在浏览器里有默认的样式,例如 p 标签有...但是不同浏览器的默认样式之间也会有差别,例如ul默认带有缩进的样式,在IE下,它的缩进是通过margin实现的,而Firefox下,它的缩进是由padding实现的

    reset.css Vue

    不同浏览器对相同标签的显示效果,有时候往往不同,那么在做项目的时候就需要对基本的样式进行设置,以达到在不同浏览器下显示效果是相同的,reset.css的作用就在于此。所有,大家很有必要收藏一下,在做项目的时候...

    css Reset 重置代码

    主要用于css文件的重置,把各个浏览器放在同一起跑线上。绝对的非常有用

    浏览器样式重置列表reset.css

    这个是比较网站的pc样式重置列表!经过过个项目实践说明,非常ok!

    css 清除浏览器默认样式

    /* reset */ 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,strong,sub,sup,tt,var,b,u,...

    CSS重置样式表reset.css

    CSS重置样式表 通常情况下,浏览器会为元素设置一些默认样式 默认样式的存在会影响页面的布局,通常情况下编写网页时必须要去除浏览器的默认样式 ...<link rel='stylesheet' href='./css/reset.css'>

    reset.css文件

    不同浏览器对相同标签的显示效果,有时候往往不同,那么在做项目的时候就需要对基本的样式进行设置,以达到在不同浏览器下显示效果是相同的

    css重设兼容浏览器

    css 兼容 css重设兼容浏览器 css重设兼容浏览器

    Css Reset(复位)的简单介绍

    Css Reset是什么? 有些同行叫 "css复位",有些可能叫 "默认css"…..相信看完全文您会对Css Reset...原文前部分说了很多关于Css,以及各浏览器的css规则的不同,而制定"Css Reset"也是为了兼容与统一,正确有效的使用"Css Re

Global site tag (gtag.js) - Google Analytics