CSS重設(shè)就是由于各種瀏覽器解釋CSS樣式的初始值有所不同，導(dǎo)致設(shè)計(jì)師在沒(méi)有定義某個(gè)CSS屬性時(shí)，不同的瀏覽器會(huì)按照自己的默認(rèn)值來(lái)為沒(méi)有定義的樣式賦值，所以我們要先定義好一些CSS樣式，來(lái)讓所有瀏覽器都按照同樣的規(guī)則解釋CSS，這樣就能避免發(fā)生這種問(wèn)題.
　　在當(dāng)今網(wǎng)頁(yè)設(shè)計(jì)/開(kāi)發(fā)實(shí)踐中，使用CSS來(lái)為語(yǔ)義化的(X)HTML標(biāo)記添加樣式風(fēng)格是重要的關(guān)鍵。在設(shè)計(jì)師們的夢(mèng)想中都存在著這樣的一個(gè)完美世界:所有的瀏覽器都能夠理解和適用多有CSS規(guī)則，并且呈現(xiàn)相同的視覺(jué)效果(沒(méi)有兼容性問(wèn)題)。但是，我們并沒(méi)有生活在這個(gè)完美的世界，現(xiàn)實(shí)中發(fā)生的失竊卻總是恰恰相反，很多CSS樣式在不同的瀏覽器中有著不同的解釋和呈現(xiàn)。
相關(guān)CSS文章：YaHoo方法:CSS Reset重設(shè)瀏覽器的樣式
　　當(dāng)今流行的瀏覽器(如:Firefox、Opera、Internet Explorer、Chrome、Safari等等)中，有一些都是以自己的方式去理解CSS規(guī)范，這就會(huì)導(dǎo)致有的瀏覽器對(duì)CSS的解釋與設(shè)計(jì)師的CSS定義初衷相沖突，使得網(wǎng)頁(yè)的樣子在某些瀏覽器下能正確按照設(shè)計(jì)師的想法顯示，但有些瀏覽器卻并沒(méi)有按照設(shè)計(jì)師想要的樣子顯示出來(lái)，這就導(dǎo)致瀏覽器的兼容性問(wèn)題。更糟的是，有的瀏覽器完全無(wú)視CSS的一些聲明和屬性。
　　正因?yàn)樯鲜鰶_突和問(wèn)題依然存在于這個(gè)”不完美的世界”，所以一些設(shè)計(jì)師想到了一種避免瀏覽器兼容性問(wèn)題的方法，那就是CSS Reset，什么是CSS Reset？我們可以把它叫做CSS重設(shè)，也有人叫做CSS復(fù)位、默認(rèn)CSS、CSS重置等。CSS重設(shè)就是由于各種瀏覽器解釋CSS樣式的初始值有所不同，導(dǎo)致設(shè)計(jì)師在沒(méi)有定義某個(gè)CSS屬性時(shí)，不同的瀏覽器會(huì)按照自己的默認(rèn)值來(lái)為沒(méi)有定義的樣式賦值，所以我們要先定義好一些CSS樣式，來(lái)讓所有瀏覽器都按照同樣的規(guī)則解釋CSS，這樣就能避免發(fā)生這種問(wèn)題。
　　今天腳本之家總結(jié)收集了15套CSS重設(shè)實(shí)例，您可以在前端開(kāi)發(fā)工作中進(jìn)行參考和使用，有些是很簡(jiǎn)化的CSS Reset，有些則是非常復(fù)雜非常全面的CSS Reset，至于使用哪套，全看您的愛(ài)好或需要。
　　腳本之家會(huì)經(jīng)常更新前端開(kāi)發(fā)/網(wǎng)頁(yè)設(shè)計(jì)等相關(guān)技術(shù)及教程文章，歡迎訂閱本博客來(lái)及時(shí)瀏覽本博客的最新教程及資源。 一.最簡(jiǎn)化的CSS Reset(重設(shè)) :

* {
padding: 0;
margin: 0;
}

　　這是最普遍最簡(jiǎn)單的CSS重設(shè)，將所有元素的padding和margin值都設(shè)為0，可以避免一些瀏覽器在理解這兩個(gè)屬性默認(rèn)值上的”分歧”。

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

　　這是在上一個(gè)重設(shè)的基礎(chǔ)上添加了對(duì)border屬性的重設(shè)，初始值為0的確能避免一些問(wèn)題。

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

　　在前兩個(gè)的基礎(chǔ)上添加了outline屬性的重設(shè)，防止一些沖突。
二.濃縮實(shí)用型CSS Reset(重設(shè)):

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

　　該CSS重設(shè)方法出自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;
}

　　這個(gè)重設(shè)方法將html和body下元素的padding和margin都設(shè)為0，并分別為html標(biāo)簽和body標(biāo)簽下的所有元素設(shè)置了初始的字體大小，最重要的是把有鏈接的圖片的默認(rèn)邊框去掉了。 四.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;
}

最新評(píng)論