Was ist CSS zurücksetzen?

reset css bezieht sich auf reset.css, um das Stylesheet des Browser-Tags zurückzusetzen. Seine Funktion besteht darin, alle Standardstile des Browsers zu entfernen. Genauer gesagt besteht es darin, den vom Browser bereitgestellten Standardstil durch Neudefinition zu überschreiben der Tag-Stil.

Die Betriebsumgebung dieses Artikels: Windows 7-System, CSS3-Version, DELL G3-Computer

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

HTML-Tags haben Standardstile im Browser, zum Beispiel das p -Tag hat 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 oft 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 -Tags unterschiedlich , sodass durch Zurücksetzen der CSS-Eigenschaften des Schaltflächen-Tags und anschließende einheitliche Definition derselbe Anzeigeeffekt erzielt werden kann.

Der einfachste CSS-Reset-Inhalt kann in nur wenigen Zeilen abgeschlossen werden:

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

(aufgrund der geringen Leistung wird dies jedoch nicht empfohlen)

Diese Methode setzt den Abstand, den Rand und den Rand aller Selektoren auf 0. Es gibt auch weitere Inhalte, wie 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;
}

und den CSS Reset V1.0|200802-Inhalt des ausländischen Prominenten Eric Meyer:

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

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 Inhalte Die Methoden sind unterschiedlich, aber die Funktionen sind ähnlich und sie spielen alle die Rolle des Zurücksetzens. Daher kann CSS Reset an unterschiedliche persönliche Bedürfnisse angepasst werden.

Empfohlenes Lernen: „CSS-Video-Tutorial“

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