簡化的CSS Reset:15套CSS重設(shè)實例
互聯(lián)網(wǎng) 發(fā)布時間:2009-04-02 19:36:40 作者:佚名
我要評論

網(wǎng)頁制作Webjx文章簡介:CSS重設(shè)就是由于各種瀏覽器解釋CSS樣式的初始值有所不同,導(dǎo)致設(shè)計師在沒有定義某個CSS屬性時,不同的瀏覽器會按照自己的默認(rèn)值來為沒有定義的樣式賦值,所以我們要先定義好一些CSS樣式,來讓所有瀏覽器都按照同樣的規(guī)
CSS重設(shè)就是由于各種瀏覽器解釋CSS樣式的初始值有所不同,導(dǎo)致設(shè)計師在沒有定義某個CSS屬性時,不同的瀏覽器會按照自己的默認(rèn)值來為沒有定義的樣式賦值,所以我們要先定義好一些CSS樣式,來讓所有瀏覽器都按照同樣的規(guī)則解釋CSS,這樣就能避免發(fā)生這種問題. 十一.Tantek Celik Reset CSS
十二.Christian Montoya Reset CSS
:link,:visited { text-decoration:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }
a img,:link img,:visited img { border:none }
address { font-style:normal }
十三.Rudeworks Reset CSS
html, body, form, fieldset {
margin: 0;
padding: 0;
font: 100%/120% Verdana, Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
margin: 1em 0;
padding: 0;
}
li, dd, blockquote {
margin-left: 1em;
}
form label {
cursor: pointer;
}
fieldset {
border: none;
}
input, select, textarea {
font-size: 100%;
font-family: inherit;
}
十四.Anieto2K Reset CSS
* {
margin: 0;
padding: 0;
border: none;
}
html {
font: 62.5% “Lucida Grande”, Lucida, Verdana, sans-serif;
text-shadow: #000 0px 0px 0px;
}
ul {
list-style: none;
list-style-type: none;
}
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
font-weight: normal;
margin: 0 0 1em 0;
}
cite, em, dfn {
font-style: italic;
}
sup {
position: relative;
bottom: 0.3em;
vertical-align: baseline;
}
sub {
position: relative;
bottom: -0.2em;
vertical-align: baseline;
}
li, dd, blockquote {
margin-left: 1em;
}
code, kbd, samp, pre, tt, var, input[type='text'], textarea {
font-size: 100%;
font-family: monaco, “Lucida Console”, courier, mono-space;
}
del {
text-decoration: line-through;
}
ins, dfn {
border-bottom: 1px solid #ccc;
}
small, sup, sub {
font-size: 85%;
}
abbr, acronym {
text-transform: uppercase;
font-size: 85%;
letter-spacing: .1em;
border-bottom-style: dotted;
border-bottom-width: 1px;
}
a abbr, a acronym {
border: none;
}
sup {
vertical-align: super;
}
sub {
vertical-align: sub;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.6em;
}
h4 {
font-size: 1.4em;
}
h5 {
font-size: 1.2em;
}
h6 {
font-size: 1em;
}
a, a:link, a:visited, a:hover, a:active {
outline: 0;
text-decoration: none;
}
a img {
border: none;
text-decoration: none;
}
img {
border: none;
text-decoration: none;
}
label, button {
cursor: pointer;
}
input:focus, select:focus, textarea:focus {
background-color: #FFF;
}
fieldset {
border: none;
}
.clear {
clear: both;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
body {
text-align: center;
}
#wrapper {
margin: 0 auto;
text-align: left;
}
十五.CSSLab 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,
center, u, b, i {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
font-family: inherit;
vertical-align: baseline
}
body {
line-height: 1
}
:focus {
outline: 0
}
ol, ul {
list-style: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
blockquote:before, blockquote:after, q:before, q:after {
content: “”
}
blockquote, q {
quotes: “” “”
}
input, textarea {
margin: 0;
padding: 0
}
hr {
margin: 0;
padding: 0;
border: 0;
color: #000;
background-color: #000;
height: 1px
}
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 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus {
outline: 0;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
a img, iframe {
border: none;
}
ol, ul {
list-style: none;
}
input, textarea, select, button {
font-size: 100%;
font-family: inherit;
}
select {
margin: inherit;
}
/* Fixes incorrect placement of numbers in ol’s in IE6/7 */
ol { margin-left:2em; }
/* == clearfix == */
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
好了,CSS重設(shè)目前先總結(jié)到這里,這15套重設(shè)方法其實都是有共同點的,也許有的實現(xiàn)方法不同,但大部分都是同一個目的,就是為了讓更多的瀏覽器能顯示同樣的效果。有了這些CSS重設(shè)作為資料和參考,也許會對你的工作有所幫助甚至提高效率,但是,畢竟這些重設(shè)都是別人寫的,你完全也可以為自己量身定制一套CSS重設(shè)。如果您有什么意見或是看法,歡迎發(fā)表評論。
相關(guān)文章
css行內(nèi)元素padding,margin,width,height沒有變化
這篇文章主要介紹了css行內(nèi)元素設(shè)置padding,margin,width,height沒有變化的解決方法,需要的朋友可以參考下2014-05-07- 本文從語法結(jié)構(gòu)、可能取的值、瀏覽器兼容問題等方面為大家介紹下padding和margin的異同點另附截圖,有想學(xué)習(xí)的朋友可以參考下哈,希望對大家有所幫助2013-07-28
CSS邊距屬性定義是用margin還是用padding的兩者對比
用CSS做網(wǎng)頁時.邊距用哪個屬于好呢?是margin屬性還是padding屬性呢.2012-06-12- 關(guān)鍵字描述:詳解 樣式 風(fēng)格 solid 必要   修改 padding:0 margin:0 body{font-size:9pt; background:url($imgpath/$stylepath/bodybg.gif) repeat-x ; font-famil2009-06-06
- 關(guān)鍵字描述:注釋 大全 樣式 默認(rèn) 模板 定義 margin:0 10px padding:0 下面這個是默認(rèn)的ZBLOG CSS樣式表 里面附帶有最全的CSS注釋 讓你一看就理解了。如果您覺得麻煩2009-06-06
Css Reset(復(fù)位)的簡單介紹-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
Css Reset是什么? 有些同行叫 "css復(fù)位",有些可能叫 "默認(rèn)css"..... 相信看完全文您會對Css Reset有個重新的認(rèn)識 原文地址: http://perishablepre2008-10-17- 在CSS中margin是指從自身邊框到另一個容器邊框之間的距離,就是容器外距離。在CSS中padding是指自身邊框到自身內(nèi)部另一個容器邊框之間的距離,就是容器內(nèi)距離。下面講解 pa2017-06-26