您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“有哪些CSS reset重設(shè)方法”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“有哪些CSS reset重設(shè)方法”吧!
一.最簡(jiǎn)化的CSS Reset(重設(shè)) :
CSS Code復(fù)制內(nèi)容到剪貼板
* {
padding: 0;
margin: 0;
}
這是最普遍最簡(jiǎn)單的CSS重設(shè),將所有元素的padding和margin值都設(shè)為0,可以避免一些瀏覽器在理解這兩個(gè)屬性默認(rèn)值上的”分歧”。
CSS Code復(fù)制內(nèi)容到剪貼板
* {
padding: 0;
margin: 0;
border: 0;
}
這是在上一個(gè)重設(shè)的基礎(chǔ)上添加了對(duì)border屬性的重設(shè),初始值為0的確能避免一些問(wèn)題。
CSS Code復(fù)制內(nèi)容到剪貼板
* {
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
在前兩個(gè)的基礎(chǔ)上添加了outline屬性的重設(shè),防止一些沖突。
二.濃縮實(shí)用型CSS Reset(重設(shè)):
CSS Code復(fù)制內(nèi)容到剪貼板
* {
vertical-align: baselinebaseline;
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:
CSS Code復(fù)制內(nèi)容到剪貼板
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
CSS Code復(fù)制內(nèi)容到剪貼板
* {
vertical-align: baselinebaseline;
font-family: inherit;
fo
nt-style: inherit;
font-size: 100%;
border: none;
padding: 0;
margin: 0;
}
body {
padding: 5px;
}
h2, h3, h4, h5, h6, h7, 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
CSS Code復(fù)制內(nèi)容到剪貼板
body, div, dl, dt, dd, ul, ol, li, h2, h3, h4, h5, h6, h7, 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,
h2, h3, h4, h5, h6, h7, strong, th, var {
font-weight: normal;
font-style: normal;
}
ul {
list-style: none;
}
caption, th {
text-align: left;
}
h2, h3, h4, h5, h6, h7 {
font-size: 1.0em;
}
q:before, q:after {
content: ”;
}
a, ins {
text-decoration: none;
}
六.Yahoo(YUI) CSS Reset:
CSS Code復(fù)制內(nèi)容到剪貼板
body,div,dl,dt,dd,ul,ol,li,h2,h3,h4,h5,h6,h7,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h2,h3,h4,h5,h6,h7 {
font-weight: normal;
font-size: 100%;
}
q:before,q:after {
content:”;
}
abbr,acronym {
border: 0;
}
七.Eric Meyer’s CSS Reset
CSS Code復(fù)制內(nèi)容到剪貼板
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,
h2, h3, h4, h5, h6, h7, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
vertical-align: baselinebaseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
:focus {
outline: 0;
}
body {
background: white;
line-height: 1;
color: black;
}
ol, ul {
list-style: none;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
content: “”;
}
blockquote, q {
quotes: “” “”;
}
八.Condensed Meyer Reset:
CSS Code復(fù)制內(nèi)容到剪貼板
body, div, dl, dt, dd, ul, ol, li, h2, h3, h4, h5, h6, h7,
pre, form, fieldset, input, textarea, p, blockquote, th, td {
padding: 0;
margin: 0;
}
fieldset, img {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol, ul {
list-style: none;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-weight: normal;
font-style: normal;
}
caption, th {
text-align: left;
}
h2, h3, h4, h5, h6, h7 {
font-weight: normal;
font-size: 100%;
}
q:before, q:after {
content: ”;
}
abbr, acronym {
border: 0;
}
九.Ateneu Popular CSS Reset
CSS Code復(fù)制內(nèi)容到剪貼板
html, body, div, span, applet, object, iframe, h2, h3, h4,
h5, h6, h7, 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: baselinebaseline;
}
:focus {
outline: 0;
}
a, a:link, a:visited, a:hover, a:active{
text-decoration:none
}
table {
border-collapse: separate;
border-spacing: 0;
}
th, td {
text-align: left;
font-weight: normal;
}
img, iframe {
border: none;
text-decoration:none;
}
ol, ul {
list-style: none;
}
input, textarea, select, button {
font-size: 100%;
font-family: inherit;
}
select {
margin: inherit;
}
hr {
margin: 0;
padding: 0;
border: 0;
color: #000;
background-color: #000;
height: 1px
}
十.Chris Poteet’s Reset CSS
CSS Code復(fù)制內(nèi)容到剪貼板
* {
vertical-align: baselinebaseline;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: none;
padding: 0;
margin: 0;
}
body {
padding: 5px;
}
h2, h3, h4, h5, h6, h7, p, pre, blockquote, form, ul, ol, dl {
margin: 20px 0;
}
li, dd, blockquote {
margin-left: 40px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
十一.Tantek Celik Reset CSS
CSS Code復(fù)制內(nèi)容到剪貼板
:link,:visited { text-decoration:none }
ul,ol { list-style:none }
h2,h3,h4,h5,h6,h7,pre,code { font-size:1em; }
ul,ol,li,h2,h3,h4,h5,h6,h7,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }
a img,:link img,:visited img { border:none }
address { font-style:normal }
十二.Christian Montoya Reset CSS
CSS Code復(fù)制內(nèi)容到剪貼板
html, body, form, fieldset {
margin: 0;
padding: 0;
font: 100%/120% Verdana, Arial, Helvetica, sans-serif;
}
h2, h3, h4, h5, h6, h7, 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;
}
十三.Rudeworks Reset CSS
CSS Code復(fù)制內(nèi)容到剪貼板
* {
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;
}
h2, h3, h4, h5, h6, h7, p, pre,
blockquote, ul, ol, dl, address {
font-weight: normal;
margin: 0 0 1em 0;
}
cite, em, dfn {
font-style: italic;
}
sup {
position: relative;
bottombottom: 0.3em;
vertical-align: baselinebaseline;
}
sub {
position: relative;
bottombottom: -0.2em;
vertical-align: baselinebaseline;
}
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;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1.8em;
}
h4 {
font-size: 1.6em;
}
h5 {
font-size: 1.4em;
}
h6 {
font-size: 1.2em;
}
h7 {
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-rightright {
float: rightright;
}
body {
text-align: center;
}
#wrapper {
margin: 0 auto;
text-align: left;
}
十四. Anieto2K Reset CSS
CSS Code復(fù)制內(nèi)容到剪貼板
html, body, div, span, applet, object, iframe,
h2, h3, h4, h5, h6, h7, 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: baselinebaseline
}
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
}
十五.CSSLab CSS Reset
CSS Code復(fù)制內(nèi)容到剪貼板
html, body, div, span, applet, object, iframe, h2, h3, h4,
h5, h6, h7, 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: baselinebaseline;
}
: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;}
到此,相信大家對(duì)“有哪些CSS reset重設(shè)方法”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún),關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。