What is CSS Reset? Some colleagues call it "css reset", and some may call it "default css"...
I believe you will have a new understanding of Css Reset after reading the full text.
Original address...
PS:
Program code
* {
padding: 0;
margin: 0;
}
This is the most commonly used Css Reset, but there are many problems here.
The first part of the original article talks a lot about Css and the differences in CSS rules of each browser. The "Css Reset" is also formulated for compatibility and unification. Correct and effective use of "Css Reset" can save time and money to a certain extent.
Thank you very much to Perishable for organizing and summarizing.
The following is a brief introduction to several types of Css Reset. The author has limited abilities and can only understand the general meaning. Please forgive me.
Minimalistic Reset [Version 1]
the program code
we often use.
* {
padding: 0;
margin: 0;
}
Minimalistic Reset [Version 2]
The design of border:0 is a bit unreliable and
the program code
* {
padding: 0;
margin: 0;
border: 0;
}
Minimalistic Reset [Version 3]
Of course, this is not recommended as it will conflict with some default styles of
program code.
* {
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
Condensed Universal Reset
This is a writing method that the author currently prefers, ensuring the unity of relatively common browser styles.
program code
* {
vertical-align: baselinebaseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}
Poor Man's Reset
Program codes
for resetting font size and border processing of image links are often seen on some sites.
html, body {
padding: 0;
margin: 0;
}
html {
font-size: 1em;
}
body {
font-size: 100%;
}
a img, :link img, :visited img {
border: 0;
}
Shaun Inman's Global Reset
The author believes that Shaun has a certain purpose in writing this type of Css Reset and that such rules are aimed at some important commonly used browsers such as IE, Firefox and other
program codes.
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 {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img, abbr {
border: 0;
}
address, caption, cite, code, dfn, em,
h1, h2, h3, h4, h5, h6, strong, th, var {
font-weight: normal;
font-style: normal;
}
ul {
list-style: none;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 1.0em;
}
q:before, q:after {
content: '';
}
a, ins {
text-decoration: none;
}
Yahoo CSS Reset
the program code
for Reset written by the guys at yahoo can be recommended.
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,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;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
q:before,q:after {
content:'';
}
abbr,acronym { border: 0;
}
Erik Meyer's CSS Reset
The author has rearranged Erik Meyer's code, but the function is still the same. This set of Css Reset is the most commonly used
program code
in the industry.
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 {
vertical-align: baselinebaseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
background: white;
line-height: 1;
color: black;
}
ol, ul {
list-style: none;
}
/* tables still need cellspacing="0" in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
/* remove possible quote marks (") from <q> & <blockquote> */
blockquote:before, blockquote:after, q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
Condensed Meyer Reset
In general, this is a modification and improvement of Erik Meyer's Css Reset
program code.
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
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;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 100%;
}
q:before, q:after {
content: '';
}
abbr, acronym {
border: 0;
}