簡化的CSS Reset:15套CSS重設實例

2024-07-11 08:44:19

字體：大中小

來源：轉載

供稿：網友

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