Summary of the current comprehensive CSS reset (reset) Method

ArticleDirectory

• 1. Simplified CSS reset (resetting ):
• Ii. concentrated and practical CSS reset (resetting ):
• 3. CSS reset of poor man:
• Iv. siolon's global Reset
• 5. Shaun Inman's global Reset
• 6. Yahoo (Yui) CSS Reset:
• VII. Eric Meyer's CSS Reset
• 8. condensed Meyer Reset:
• IX. ateneu popular CSS Reset
• 10. Chris Poteet's reset CSS
• 11. tantek Celik reset CSS
• 12. Christian Montoya reset CSS
• 13. rudeworks reset CSS
• 14. anieto2k reset CSS
• 15. csslab CSS Reset

In today's web design/development practices, it is important to use CSS to add styles for semantic (x) HTML tags. There is a perfect world in the designer's dream: all browsers can understand and adapt to CSS rules and present the same visual effect (no compatibility issues ). However, we do not live in this perfect world. In reality, the theft is always the opposite. Many CSS styles have different interpretations and presentations in different browsers.

Some popular browsers (such as Firefox, opera, Internet Explorer, chrome, Safari, and so on) Understand CSS standards in their own ways, this will cause some browsers to conflict with the original intention of the designer's CSS definition, so that the web page can be correctly displayed according to the designer's idea in Some browsers, however, some browsers are not displayed as intended by designers, which leads to browser compatibility problems. Worse, Some browsers completely ignore some of the CSS statements and attributes.

Because the above conflicts and problems still exist in this "imperfect world", some designers have come up with a way to avoid browser compatibility problems, that is, CSS reset. What is CSS reset? We can call it CSS resetting, CSS resetting, default CSS resetting, and so on. CSS resetting is because various browsers explain different initial values of CSS styles, so when the designer does not define a CSS attribute, different browsers assign values to unspecified styles based on their default values. Therefore, we must first define some CSS styles so that all browsers can interpret CSS according to the same rules, in this way, this problem can be avoided.

1. Simplified CSS reset (resetting ):

*{
Padding: 0;
Margin: 0;
}

This is the most common and simple CSS resetting. Setting the padding and margin values of all elements to 0 can avoid the "divergence" of Some browsers in understanding the default values of these two attributes ".

*{
Padding: 0;
Margin: 0;
Border: 0;
}

This is a resetting of the border Attribute Based on the previous resetting. The initial value of 0 can indeed avoid some problems.

*{
Outline: 0;
Padding: 0;
Margin: 0;
Border: 0;
}

The reset of the outline attribute is added on the basis of the first two to prevent some conflicts.

Ii. concentrated and practical CSS reset (resetting ):

*{
Vertical-align: baseline;
Font-weight: Inherit;
Font-family: Inherit;
Font-style: Inherit;
Font-size: 100%;
Outline: 0;
Padding: 0;
Margin: 0;
Border: 0;
}

The CSS resetting method comes from perishable press, which is a common method.

3. CSS reset of poor man:

HTML, body {
Padding: 0;
Margin: 0;
}
HTML {
Font-size: 1em;
}
Body {
Font-size: 100%;
}
A img,: link IMG,: visited IMG {
Border: 0px;
}

This resetting method sets the padding and margin values of the HTML and body elements to 0, and sets the initial font size for all elements under the HTML Tag and Body Tag respectively, the most important thing is to remove the default border of the connected image.

Iv. siolon's global Reset

*{
Vertical-align: baseline;
Font-family: Inherit;
Fo

NT-style: Inherit;
Font-size: 100%;
Border: none;
Padding: 0;
Margin: 0;
}
Body {
Padding: 5px;
}
H1, H2, H3, H4, H5, H6, P, pre, BLOCKQUOTE, form, UL, ol, DL {
Margin: 20px 0;
}
Li, DD, BLOCKQUOTE {
Margin-left: 40px;
}
Table {
Border-collapse: collapse;
Border-Spacing: 0;
}

5. 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 {
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;
}

6. 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 {
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;
}

VII. 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 {
Vertical-align: baseline;
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: ";
}

8. 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 {
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;
}

IX. 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 {
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;
}
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
}

10. Chris Poteet's reset CSS

*{
Vertical-align: baseline;
Font-family: Inherit;
Font-style: Inherit;
Font-size: 100%;
Border: none;
Padding: 0;
Margin: 0;
}
Body {
Padding: 5px;
}
H1, H2, H3, H4, H5, H6, P, pre, BLOCKQUOTE, form, UL, ol, DL {
Margin: 20px 0;
}
Li, DD, BLOCKQUOTE {
Margin-left: 40px;
}
Table {
Border-collapse: collapse;
Border-Spacing: 0;
}

11. tantek Celik 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}

12. Christian Montoya 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;
}

13. rudeworks 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;
}

14. anieto2k reset CSS

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
}

15. 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 {
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 ;}

Well, CSS resetting is summarized here, these 15 sets of resetting methods are actually all in common. Maybe some implementation methods are different, but most of them are the same purpose, so that more browsers can display the same effect. With these CSS resetting as materials and reference, it may help your work and even improve efficiency. However, after all, these resetting tasks are written by others, you can also customize a set of CSS resetting for yourself.