目前比較全的CSS重設 reset 方法總結

2021-08-24 22:48:59 字數 3290 閱讀 9658

在當今網頁設計/開發實踐中,使用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,這樣就能避免發生這種問題。

本文總結收集了15套css重設例項,您可以在前端開發工作中進行參考和使用,有些是很簡化的css reset,有些則是非常複雜非常全面的css reset,至於使用哪套,全看您的愛好或需要。

*

這是最普遍最簡單的css重設,將所有元素的padding和margin值都設為0,可以避免一些瀏覽器在理解這兩個屬性預設值上的」分歧」。

*

這是在上乙個重設的基礎上新增了對border屬性的重設,初始值為0的確能避免一些問題。

*

在前兩個的基礎上新增了outline屬性的重設,防止一些衝突。

*

該css重設方法出自perishable press,這是他常用的方法。

html, body

html

body

a img, :link img, :visited img

這個重設方法將html和body下元素的padding和margin都設為0,並分別為html標籤和body標籤下的所有元素設定了初始的字型大小,最重要的是把有鏈結的的預設邊框去掉了。

*

body

h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl

li, dd, blockquote

table

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

table

fieldset, img, abbr

address, caption, cite, code, dfn, em,

h1, h2, h3, h4, h5, h6, strong, th, var

ul caption, th

h1, h2, h3, h4, h5, h6

q:before, q:after

a, ins

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,

form,fieldset,input,textarea,p,blockquote,th,td

table

fieldset,img

address,caption,cite,code,dfn,em,strong,th,var

ol,ul

caption,th

h1,h2,h3,h4,h5,h6

q:before,q:after

abbr,acronym

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,

pre, form, fieldset, input, textarea, p, blockquote, th, td

fieldset, img

table

ol, ul

address, caption, cite, code, dfn, em, strong, th, var

caption, th

h1, h2, h3, h4, h5, h6

q:before, q:after

abbr, acronym

*

body

h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl

li, dd, blockquote

table

:link,:visited

ul,ol

h1,h2,h3,h4,h5,h6,pre,code

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input

a img,:link img,:visited img

address

html, body, form, fieldset

h1, h2, h3, h4, h5, h6, p, pre,

blockquote, ul, ol, dl, address

li, dd, blockquote

form label

fieldset

input, select, textarea

目前比較全的CSS重設 reset 方法總結

在當今網頁設計 開發實踐中,使用css來為語義化的 x html標記新增樣式風格是重要的關鍵。在設計師們的夢想中都存在著這樣的乙個完美世界 所有的瀏覽器都能夠理解和適用多有css規則,並且呈現相同的視覺效果 沒有相容性問題 但是,我們並沒有生活在這個完美的世界,現實中發生的失竊卻總是恰恰相反,很多c...

目前比較全的CSS重設 reset 方法總結

在當今網頁設計 開發實踐中,使用css來為語義化的 x html標記新增樣式風格是重要的關鍵。在設計師們的夢想中都存在著這樣的乙個完美世界 所有的瀏覽器都能夠理解和適用多有css規則,並且呈現相同的視覺效果 沒有相容性問題 但是,我們並沒有生活在這個完美的世界,現實中發生的失竊卻總是恰恰相反,很多c...

目前比較全的CSS重設 reset 方法總結

在當今網頁設計 開發實踐中,使用css來為語義化的 x html標記新增樣式風格是重要的關鍵。在設計師們的夢想中都存在著這樣的乙個完美世界 所有的瀏覽器都能夠理解和適用多有css規則,並且呈現相同的視覺效果 沒有相容性問題 但是,我們並沒有生活在這個完美的世界,現實中發生的失竊卻總是恰恰相反,很多c...