您好,登錄后才能下訂單哦!
本篇內容主要講解“有哪些CSS reset重設方法”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“有哪些CSS reset重設方法”吧!
一.最簡化的CSS Reset(重設) :
CSS Code復制內容到剪貼板
* {
padding: 0;
margin: 0;
}
這是最普遍最簡單的CSS重設,將所有元素的padding和margin值都設為0,可以避免一些瀏覽器在理解這兩個屬性默認值上的”分歧”。
CSS Code復制內容到剪貼板
* {
padding: 0;
margin: 0;
border: 0;
}
這是在上一個重設的基礎上添加了對border屬性的重設,初始值為0的確能避免一些問題。
CSS Code復制內容到剪貼板
* {
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
在前兩個的基礎上添加了outline屬性的重設,防止一些沖突。
二.濃縮實用型CSS Reset(重設):
CSS Code復制內容到剪貼板
* {
vertical-align: baselinebaseline;
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:
CSS Code復制內容到剪貼板
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
CSS Code復制內容到剪貼板
* {
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復制內容到剪貼板
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復制內容到剪貼板
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復制內容到剪貼板
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復制內容到剪貼板
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復制內容到剪貼板
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復制內容到剪貼板
* {
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復制內容到剪貼板
: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復制內容到剪貼板
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復制內容到剪貼板
* {
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復制內容到剪貼板
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復制內容到剪貼板
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;}
到此,相信大家對“有哪些CSS reset重設方法”有了更深的了解,不妨來實際操作一番吧!這里是億速云網站,更多相關內容可以進入相關頻道進行查詢,關注我們,繼續學習!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。