What is reset css

reset css refers to reset.css to reset the style sheet of the browser tag. Its function is to remove all the browser's default styles. To be more precise, it is to redefine the tag style, that is, to provide the browser with The default style is overwritten.

The operating environment of this article: windows7 system, CSS3 version, DELL G3 computer

reset.css Reset the browser Tag style sheet

HTML tags have default styles 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 more precisely, 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 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.

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

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

Copy after login

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

This method makes all selectors The padding, margin and border are all set 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;
}

Copy after login

and foreign celebrity Eric Meyer’s CSS Reset V1.0|200802 content:

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

Copy after login

Eric Meyer V2.0|20110126

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

Copy after login

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

Recommended learning: "css video tutorial"

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