Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

What are the CSS reset reset methods?

2025-02-23 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/03 Report--

This article focuses on "what are the CSS reset reset methods", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what are the CSS reset reset methods"?

one。 Simplest CSS Reset (reset):

CSS Code copies content to the clipboard

* {

Padding: 0

Margin: 0

}

This is the most common and simplest CSS reset, and setting the padding and margin values of all elements to 0 can avoid "differences" in some browsers' understanding of the default values of the two attributes.

CSS Code copies content to the clipboard

* {

Padding: 0

Margin: 0

Border: 0

}

This adds a reset to the border property on the basis of the previous reset, and an initial value of 0 does avoid some problems.

CSS Code copies content to the clipboard

* {

Outline: 0

Padding: 0

Margin: 0

Border: 0

}

On the basis of the first two, a reset of the outline property is added to prevent some conflicts.

two。 Concentrated and practical CSS Reset (reset):

CSS Code copies content to the clipboard

* {

Vertical-align: baselinebaseline

Font-weight: inherit

Font-family: inherit

Font-style: inherit

Font-size: 100%

Outline: 0

Padding: 0

Margin: 0

Border: 0

}

The CSS reset method comes from Perishable Press, which is his common method.

3. CSS Reset of Poor Man:

CSS Code copies content to the clipboard

Html, body {

Padding: 0

Margin: 0

}

Html {

Font-size:1em

}

Body {

Font-size:100%

}

An img,: link img,: visited img {

Border:0px

}

This reset method sets the padding and margin of the elements under html and body to 0, sets the initial font size for all elements under the html tag and body tag, and most importantly removes the default border for linked images.

IV. Siolon's Global Reset

CSS Code copies content to the clipboard

* {

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

}

V. Shaun Inman's Global Reset

CSS Code copies content to the clipboard

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

}

6. Yahoo (YUI) CSS Reset:

CSS Code copies content to the clipboard

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

}

VII. Eric Meyer's CSS Reset

CSS Code copies content to the clipboard

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: "

}

VIII. Condensed Meyer Reset:

CSS Code copies content to the clipboard

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

}

IX. Ateneu Popular CSS Reset

CSS Code copies content to the clipboard

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

}

Ten. Chris Poteet's Reset CSS

CSS Code copies content to the clipboard

* {

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

}

Eleventh. Tantek Celik Reset CSS

CSS Code copies content to the clipboard

: 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}

An img,:link img,:visited img {border:none}

Address {font-style:normal}

12. Christian Montoya Reset CSS

CSS Code copies content to the clipboard

Html, body, form, fieldset {

Margin: 0

Padding: 0

Font: 100% Universe 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

}

XIII. Rudeworks Reset CSS

CSS Code copies content to the clipboard

* {

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

}

An abbr, an 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

}

An 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

}

fourteen。 Anieto2K Reset CSS

CSS Code copies content to the clipboard

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

}

Fifteen. CSSLab CSS Reset

CSS Code copies content to the clipboard

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

}

An 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;}

At this point, I believe you have a deeper understanding of "what are the CSS reset reset methods"? you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report