Css Reset (reset) method arrangement_Experience exchange-CSS Tutorial-php.cn

Css Reset (reset) method arrangement_Experience exchange

PHP中文网

Release： 2016-05-16 12:04:32

Original

1852 people have browsed it

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

* { 
padding: 0; 
margin: 0; 
}

Copy after login

this is the most commonly used css reset, but there are many problems here.

the previous part of the original article talked a lot about css and the differences in the 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.

thanks very much to perishable for organizing and summarizing

the following is a brief introduction to several types of css reset. my ability is limited. i can only understand roughly. meaning, please forgive me.

minimalistic reset [ version 1 ]
i believe you often see this paragraph. and it is also what we often use

* { 
padding: 0; 
margin: 0; 
}

Copy after login

minimalistic reset [ version 2 ]
the design of border:0 is a bit unreliable

* { 
padding: 0; 
margin: 0; 
border: 0; 
}

Copy after login

minimalistic reset [ version 3 ]
of course, this is not recommended. it will be compared with some default conflicting styles

* { 
outline: 0; 
padding: 0; 
margin: 0; 
border: 0; 
}

Copy after login

condensed universal reset
this is a writing method that the author currently prefers. it ensures the unity of relatively common browser styles.

* { 
vertical-align: baselinebaseline; 
font-weight: inherit; 
font-family: inherit; 
font-style: inherit; 
font-size: 100%; 
border: 0 none; 
outline: 0; 
padding: 0; 
margin: 0; 
}

Copy after login

poor man's reset
in fact, this is also a type of css reset we commonly use. it resets the size of fonts and handles the borders of image links.
it is also 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; 
}

Copy after login

shaun inman's global reset
the author believes that shaun writes this type of css reset for some purpose.
and this type of rules is aimed at some important commonly used browsers.
for example, ie, firefox, etc.

body, p, 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; 
}

Copy after login

yahoo css reset
the reset written by the yahoo guys is personally recommended

body,p,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; 
}

Copy after login

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 used in the industry

html, body, p, 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: "" ""; 
}

Copy after login

condensed meyer reset
general this is a modification and improvement of erik meyer's css reset.

body, p, 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; 
}

Copy after login