使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的视觉效果(没有兼容性问题)。但是,我们并没有生活在这个完美的世界,现实中发生的失窃却总是恰恰相反,很多CSS样式在不同的浏览器中有着不同的解释和呈现。 当今流行的浏览器(如:Firefox、Opera、InternetExplorer、Chrome、Safari等等)中,有一些都是以自己的方式去理解CSS规范,这就会导致有的浏览器对CSS的解释与设计师的CSS定义初衷相冲突,使得网页的样子在某些浏览器下能正确按照设计师的想法显示,但有些浏览器却并没有按照设计师想要的样子显示出来,这就导致浏览器的兼容性问题。更糟的是,有的浏览器完全无视CSS的一些声明和属性。
正因为上述冲突和问题依然存在于这个”不完美的世界”,所以一些设计师想到了一种避免浏览器兼容性问题的方法,那就是CSS
Reset,
什么是CSS
Reset?我们可以把它叫做CSS重设,也有人叫做CSS复位、默认CSS、CSS重置等。
CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同,导致设计师在没有定义某个CSS属性时,不同的浏览器会按照自己的默认值来为没有定义的样式赋值,所以我们要先定义好一些CSS样式,来让所有浏览器都按照同样的规则解释CSS,这样就能避免发生这种问题。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;
a img, :link img, :visited img {
border:0px;
}
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
}