目前比較全的CSS重設

2022-11-19 13:06:06 字數 3562 閱讀 4608

目前比較全的css重設(reset)方法總結

在當今網頁設計/開發實踐中,使用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(重設) :

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

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

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

二.濃縮實用型css reset(重設):

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

三.poor man 的css reset:

html, body

html

body

a img, :link img, :visited img

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

四.siolon』s global reset

* body

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

li, dd, blockquote

table

五.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

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

六.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

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

七.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

:focus

body

ol, ul

table

caption, th, td

blockquote:before, blockquote:after, q:before, q:after

blockquote, q

八.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

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

九.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

:focus

a, a:link, a:visited, a:hover, a:active

table

th, td

img, iframe

ol, ul

input, textarea, select, button

selecthr

目前用於製造眼鏡架的幾種材料比較

目前用於製造眼鏡架的金屬材料主要有以下幾種 鋅白銅 蒙乃爾合金及鎳合金 純鈦及鈦合金 鈦鎳形狀記憶合金 等。鋅白銅眼鏡架是 最低廉的金屬鏡架,但由於耐蝕性差,容易形成綠色的銅鏽,影響美觀。蒙乃爾合金 含有銅 鋅 鎳 及鎳合金的加工效能好,用其製造的眼鏡架的款式很多,受到青少年的喜愛,但其耐蝕性也較差...

半橋與全橋的優缺點比較

成員 田壽龍 劉鵬 蔣飛 區敏聰 李曉玲 報告人 李曉玲 半橋逆變式功率轉換主電路的形式如下圖所示 通過時序電路分析兩個開關管交替通斷時的開關管耐壓和變壓器原邊電壓,可知開關管所需耐壓為v dc,變壓器原邊電壓為 1 2v dc。工作波形如下 全橋逆變功率轉換主電路與板橋電路的區別就是,用另外兩個同...

房地產環評清單比較全的

本專案自有資本金 萬元,約佔專案總投資的 專案法人前期投入資金已達到專案報建所需資金要求,其餘建設資金由專案法人單位自籌和通過預售解決。給出專案建設進度計畫表。2 建設用地原有地貌情況,四鄰情況,是否涉及搬遷,若有請給出搬遷人數 面積以及安置方式。3 周圍可能受本專案敏感保護目標 調查專案2000m...