What is reset.css

reset.css is a style sheet that resets browser tags. Its function is to redefine the tag style and override the browser's CSS default properties, which means overwriting the default style provided by the browser.

Recommended: "css video tutorial"

reset.css Reset the style sheet of the browser tag.

The HTML tag has a default style in the browser. For example, the p tag has top and bottom margins, the strong tag has a bold font style, and the em tag has a font italic style. There are also differences between the default styles of different browsers. For example, ul has an indented style by default. Under IE, its indentation is achieved by margin, while under Firefox, its indentation is achieved by padding. . When switching pages, the browser's default style often causes us trouble and affects development efficiency.

So the solution is to remove all the browser's default styles from the beginning, or to be more precise, by redefining the label style. "Override" the browser's CSS default properties. The simplest way is to overwrite the default style provided by the browser! This is CSS reset.

Reset function

Because there are many types of browsers, the default style of each browser is also different, such as the bb9345e55eb71822850ff156dfde57c8 tag, in IE browser The styles in , Firefox and Safari browsers are all different, so by resetting the CSS properties of the button tag and then defining it uniformly, the same display effect can be produced.

Content

The simplest CSS Reset content can be completed in just a few lines:

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

(but due to low performance, it is not recommended)

This method sets the padding, margin and border of all selectors to 0. There are also more content, such as YUI's CSS Reset content:

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;
}
以及国外名人Eric Meyer的CSS Reset V1.0|200802内容：
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,
b, u, i, center, 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-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before,blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
Eric Meyer V2.0|20110126
[1] 
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,
　　img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,
　　dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption,
　　tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,
　　figure, figcaption, footer, header, hgroup, menu, nav, output,
　　ruby, section, summary,time, mark, audio, video {
　　margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;
　　}
　　/* HTML5 display-role reset for older browsers */
　　article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
　　display: block;}body {line-height: 1;
　　}
　　ol, ul {list-style: none;
　　}blockquote, q {quotes: none;}
　　blockquote:before, blockquote:after,
　　q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}

As you can see, these content methods are different, but the functions are similar, and they all play a reset role, so CSS Reset is based on It can be customized according to different personal needs.

The above is the detailed content of What is reset.css. For more information, please follow other related articles on the PHP Chinese website!