Was ist reset.css?

reset.css ist ein Stylesheet, das Browser-Tags zurücksetzt. Seine Funktion besteht darin, den Tag-Stil neu zu definieren und die Standard-CSS-Eigenschaften des Browsers zu überschreiben, was bedeutet, dass der vom Browser bereitgestellte Standardstil überschrieben wird.

Empfohlen: „css-Video-Tutorial“

reset.css setzt das Stylesheet des Browser-Tags zurück.

HTML-Tags haben Standardstile im Browser, zum Beispiel hat das p-Tag einen oberen und unteren Rand, das strong-Tag hat einen fetten Schriftstil und das em-Tag hat einen kursiven Schriftstil. Es gibt auch Unterschiede zwischen den Standardstilen verschiedener Browser. Unter IE wird die Einrückung beispielsweise durch Rand erreicht, während die Einrückung unter Firefox durch Auffüllen erreicht wird. Beim Seitenwechsel bereitet uns der Standardstil des Browsers häufig Probleme und beeinträchtigt die Entwicklungseffizienz.

Die Lösung besteht also darin, alle Standardstile des Browsers von Anfang an zu entfernen, oder genauer gesagt, den Beschriftungsstil neu zu definieren. „Überschreiben“ Sie die CSS-Standardeigenschaften des Browsers. Der einfachste Weg besteht darin, den vom Browser bereitgestellten Standardstil zu überschreiben! Dies ist ein CSS-Reset.

Reset-Funktion

Da es viele Arten von Browsern gibt, sind auch die Standardstile der einzelnen Browser unterschiedlich. Beispielsweise sind die Stile des <button>-Tags unterschiedlich , sodass durch Zurücksetzen der CSS-Eigenschaften des Schaltflächen-Tags und anschließende einheitliche Definition derselbe Anzeigeeffekt erzielt werden kann.

Inhalt

Der einfachste CSS-Reset-Inhalt kann in nur wenigen Zeilen vervollständigt werden:

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

(aber aufgrund der geringen Leistung wird dies nicht empfohlen)

Diese Methode erstellt die Polsterung, den Rand und den Rand aller Selektoren Auf 0 setzen. Es gibt auch weitere Inhalte, wie zum Beispiel den CSS-Reset-Inhalt von YUI:

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

Wie Sie sehen können, sind diese Inhaltsmethoden unterschiedlich, aber die Funktionen sind ähnlich und sie spielen alle eine Reset-Rolle, sodass CSS Reset entsprechend unterschiedlich verwendet werden kann Persönliche Bedürfnisse. Maßgeschneidert auf Anfrage.

Das obige ist der detaillierte Inhalt vonWas ist reset.css?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!