Css Rest 方法

在当今网页设计/开发实践中，使用CSS来为语义化的(X)HTML标记添加样式风格是 重要的关键。在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则，并且呈现相同的视觉效果(没有兼容性问题)。 但是，我们并没有生活在这个完美的世界，现实中发生的失窃却总是恰恰相反，很多CSS样式在不同的浏览器中有着不同的解释和呈现。

　　当今流行的浏览器(如:Firefox、Opera、Internet Explorer、Chrome、Safari等等)中，有一些都是以自己的方式去理解CSS规范，这就会导致有的浏览器对CSS的解释与设计师的CSS 定义初衷相冲突，使得网页的样子在某些浏览器下能正确按照设计师的想法显示，但有些浏览器却并没有按照设计师想要的样子显示出来，这就导致浏览器的兼容性 问题。更糟的是，有的浏览器完全无视CSS的一些声明和属性。

　　正因为上述冲突和问题依然存在于这个”不完美的世界”，所以一些设计师想到了一种避免浏览器兼容性问题的方法，那就是CSS Reset，什么是CSS Reset？我们可以把它叫做CSS重设，也有人叫做CSS复位、默认CSS、CSS重置等。CSS重设就是由于各种浏览器解释CSS样式的初始值有所不 同，导致设计师在没有定义某个CSS属性时，不同的浏览器会按照自己的默认值来为没有定义的样式赋值，所以我们要先定义好一些CSS样式，来让所有浏览器 都按照同样的规则解释CSS，这样就能避免发生这种问题。

一.最简化的CSS Reset(重设) :

* {
      padding: 0;
      margin: 0;
}

　　这是最普遍最简单的CSS重设，将所有元素的padding和margin值都设为0，可以避免一些浏览器在理解这两个属性默认值上的”分歧”。

* {
       padding: 0;
       margin: 0;
       border: 0;
}

　　这是在上一个重设的基础上添加了对border属性的重设，初始值为0的确能避免一些问题。

* {
       outline: 0;
       padding: 0;
       margin: 0;
       border: 0;
}

　　在前两个的基础上添加了outline属性的重设，防止一些冲突。

二.浓缩实用型CSS Reset(重设):

* {
       vertical-align: baseline;
       font-weight: inherit;
       font-family: inherit;
       font-style: inherit;
       font-size: 100%;
       outline: 0;
       padding: 0;
       margin: 0;
       border: 0;
}

　　该CSS重设方法出自Perishable Press，这是他常用的方法。

三.Poor Man 的CSS Reset:

html, body {
       padding: 0;
       margin: 0;
}
html {
       font-size:1em;
} 
body {
       font-size:100%;
} 
a img, :link img, :visited img {
       border:0px;
}

　　这个重设方法将html和body下元素的padding和margin都设为0，并分别为html标签和body标签下的所有元素设置了初始的字体大小，最重要的是把有链接的图片的默认边框去掉了。

四.Siolon’s Global Reset

* {
    vertical-align: baseline;
    font-family: inherit;
    fo

nt-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;
}

五.Shaun Inman’s Global Reset

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form,
fieldset, input, p, blockquote, table, th, td, embed, object {
    padding: 0;
    margin: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
    fieldset, img, abbr {
    border: 0;
}
address, caption, cite, code, dfn, em,
h1, h2, h3, h4, h5, h6, strong, th, var {
    font-weight: normal;
    font-style: normal;
}
ul {
    list-style: none;
}
caption, th {
    text-align: left;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 1.0em;
}
q:before, q:after {
    content: ”;
}
a, ins {
    text-decoration: none;
}

六.Yahoo(YUI) CSS Reset:

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’s CSS Reset

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: “” “”; 
}

八.Condensed Meyer Reset:

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;
}
    fieldset, img {
    border: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
ol, ul {
    list-style: none;
}
address, caption, cite, code, dfn, em, strong, th, var {
    font-weight: normal;
    font-style: normal;
}
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;
}

九.Ateneu Popular 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, 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

* { 
    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; 
}

十一.Tantek Celik Reset CSS

: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

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

* { 
    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

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

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重
设目前先总结到这里，这15套重设方法其实都是有共同点的，也许有的实现方法不同，但大部分都是同一个目的，就是为了让更多的浏览器能显示同样的效果。有
了这些CSS重设作为资料和参考，也许会对你的工作有所帮助甚至提高效率，但是，毕竟这些重设都是别人写的，你完全也可以为自己量身定制一套CSS重设。

时间： 2024-08-28 20:01:54

Css Rest 方法的相关文章

HTML中引入CSS的方法

在HTML中引入CSS的方法主要有四种,它们分别是行内式.内嵌式.链接式和导入式. 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. 2.内嵌式 嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中.格式如下: <head> <style type="text/css"> ...此处写CSS样式 </

WordPress引入css/js方法总结

WordPress引入css/js方法很多,条件很多.如何全局加载,或仅在某些页面精准加载,什么时候需要先注册脚本再加载,本文希望找到最简单的方式,并给出探索更多方法的途径. 在前台加载css/js 用wp_enqueue_script()函数加载js,用wp_enqueue_style()加载css,加载资源的位置(action)只有一个——wp_enqueue_scripts. 用wp_enqueue_系列函数可以更好的处理脚本样式表的依赖关系,防止重复加载,以twentyfifteen主题

豆瓣移动端风格的css命名方法与学习

在CSS取名相对于刚入门来说是最头疼的事情,往往取一个可读性的名字相对以后的代码风格还是很重要的. 在配合团队方面一个好的类名可以帮助同事来理解,增加团队之间的效率有着很大的意义. 豆瓣的前段相对其他网站来说还是比较文艺清爽的,所以很值得去向他们团队学习,学习的地方很多,先来取名把. 在最外面的一个<div class="ck-root">.....</div>首先内容先用一个大的div盒子包起来, <div class="ck-root&quo

快速记住CSS样式属性单词及输入HTML+CSS的方法

快速记住CSS样式属性单词及输入HTML+CSS的方法,DIVCSS5介绍一种快速输入HTML代码.快速输入CSS样式英文单词与样式值输入方法.降低英文单词代码输入错误概率,提升输入代码速度.DW软件输入CSS和HTML的终极用法(非面板输入法). DIVCSS5教大家一种快速记住CSS样式属性单词及用法的方法,告别死记硬背才是硬道理. CSS样式布局中使用的CSS样式英文单词,不需要死记硬背,会使用认识,知道长什么样即可.在DIV CSS布局开发中对于是否会拼写CSS属性单词关系不大,会使用.

用纯css的方法实现popout内容

在没有引用jquery和其他插件的时候,可以通过纯css的方法实现popout框,效果类似tooltip.这种方法虽然很拙劣,但是未尝也是一种解决办法.我们都知道a标签有几个伪类可以使用,这里要特别注意的是a:link,a:visited,a:hover,a:active这四个伪类的顺序,若不按这样的顺序可能会导致无法实现预期的效果.一般我们只用a:hover这个伪类来实现悬停的效果,而巧妙地利用这个伪类,我们可以实现类似tooltip的效果.但这有一些缺陷,就是popout的内容必须在a标签内

css 调试方法总结

本总结不断更新,主要记录本人调试过程中所终结的经验与方法. 毕竟本人不是做浏览器前端的,所以如有不详敬请见谅. css关系到界面的美观,有时候功能实现了.界面确丑到没人用,终归还是一件失败的产品,所有好的产品不仅需要实用的功能,更加需要贴心美观的外观. 1.如果遇到整体布局工整,个别布局偏移的. 可以使用浏览器取道偏移的组件(放大镜),然后得到应用到这个组件的css文件中的css效果进行修改即可,如下图所示: 可以再右边获取到css样式,以及css详细信息: 查看到样式后,还可以看到对应样式所属

Safari的CSS HACK方法

以前的文章里提到过IE6/IE7/IE8/IE9/.Firefox的CSS HACK方法,那么Safari的CSS HACK是什么呢? 请看以下CSS代码: .box { color: black;                              /* ff */ color: #fff\9\0;                            /* IE9 */ color: #ff0000\0;                       /* IE8 */ [color: 

CSS Reset方法

CSS Reset 即重设浏览器的样式.在各种浏览器中,都会对CSS的选择器默认一些数值,譬如当h1没有被设置数值时,显示一定大小. 但并不是所有的浏览器都使用一样的数值,所以,有了CSS Reset,以让网页的样式在各浏览器中表现一致. 正在使用CSS的你,用过CSS Reset吗?当然,或许你用了,却不知道正在用,比如你可能用到: * { padding: 0; margin: 0; border: 0; } 这也是一种CSS Reset的方法,让所有的选择器的padding.margin和

CSS_添加CSS文件方法，盒模型和定位

学习笔记整理,非原创. 添加css的方法 链接外部样式表 <link rel=stylesheet type=text/css href=style.css> Rel表示在页面中使用外部的样式表.type指文件的类型是样式表文件,href指文件的位置. 内部样式表 <style type=”text/css”> <!— //定义style --> </style> 导入外部 样式表 <style type=”text/css”> <!— @

iframe 跨域自适应 纯css解决方法

<style type="text/css">body{background:#f00;}body, html,#ifm1{width:100%;height:100%;overflow:hidden;margin:0;}#ifm1{width:100%;height:100%;overflow:hidden;margin:0;}</style><iframe id="ifm1" src='http://www.csdn.net' fr