Wissen Sie, was CSS Reset ist? Normalerweise wird es auch als „CSS zurücksetzen“ geschrieben, wodurch der Stil des Browsers zurückgesetzt wird. In verschiedenen Browsern werden einige Standardwerte für CSS-Selektoren verwendet. Wenn beispielsweise h1 nicht auf einen Wert festgelegt ist, wird eine bestimmte Größe angezeigt. Da jedoch nicht alle Browser dieselben Werte verwenden, wird CSS Reset verwendet, um dafür zu sorgen, dass sich der Stil der Webseite in jedem Browser konsistent verhält.
Wenn Sie CSS verwenden, haben Sie jemals CSS Reset verwendet? Natürlich verwenden Sie es vielleicht, wissen aber nicht, dass Sie es verwenden. Sie können beispielsweise Folgendes verwenden.
| * { Auffüllung: 0; Rand: 0; |
Dies ist auch eine CSS-Reset-Methode, die den Abstand, den Rand und den Rand aller Selektoren auf 0 setzt. Dies ist eine leistungsstarke Methode, die einfachste und sicherste, aber auch die ressourcenintensivste. Bei kleinen Websites verursacht die Verwendung dieser Funktion keine große Ressourcenverschwendung. Wenn es sich jedoch um eine Website mit einer sehr großen Struktur wie Yahoo handelt, müssen Sie CSS nur selektiv zurücksetzen, um die Ressourcenverschwendung zu reduzieren. Das Folgende ist der CSS-Reset-Code von Yahoo, der auch die beliebteste CSS-Reset-Methode ist. Die von YUI gewählte Methode ist:
| body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fieldset,input,textarea,p,blockquote,th,td { Polsterung: 0; Rand: 0; } Tisch { border-collapse: Zusammenbruch; Randabstand: 0; } fieldset,img { Rand: 0; } Adresse, Bildunterschrift, Zitat, Code, dfn, em, stark, th, var { Schriftstärke: normal; Schriftstil: normal; } ol,ul { Listenstil: keiner; } Bildunterschrift,th { Textausrichtung: links; } h1,h2,h3,h4,h5,h6 { Schriftstärke: normal; Schriftgröße: 100 %; } q:before,q:after { Inhalt:"; } abbr,acronym { border: 0; } |
OK, ich glaube, Sie verstehen bereits den Zweck des CSS-Resets. Vielleicht können Sie auch Ihr eigenes CSS-Reset-System nach Ihren eigenen Vorlieben schreiben. Und Sie können sich auf die folgenden beziehen:
Ateneu Popular CSS Reset
| html, body, div, span, applet, objekt, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, akronym, adresse, zitieren, code, del, dfn, em, schriftart, img, ins, kbd, q, s, samp, klein, streik, stark, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legende, Tabelle, Bildunterschrift, tbody, tfoot, thead, tr, th, td { Rand: 0; Polsterung: 0; Rand: 0; Umriss: 0; Schriftstärke: erben; Schriftstil: erben; Schriftgröße: 100 %; Schriftfamilie: erben; vertikal ausrichten: Grundlinie; } :focus {outline: 0;} a, a:link, a:visited, a:hover, a:active{text-decoration:none} Tabelle { border-collapse: separate; border-spacing: 0;} th, td {text-align: left; font-weight: normal;} img, iframe {border: none; text-decoration:none;} ol, ul {list-style: none;} Eingabe, Textbereich, Auswahl, Schaltfläche {font-size: 100%;font-family: inherit;} select {margin: inherit;} hr {margin: 0;padding: 0;border: 0;color: #000;background-color: #000;height: 1px} |
Chris Poteets Reset CSS
| * { vertikal ausrichten: Grundlinie; Schriftfamilie: erben; Schriftstil: erben; Schriftgröße: 100 %; Grenze: keine; Polsterung: 0; Rand: 0; } Körper { Polsterung: 5px; } h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl { Rand: 20px 0; } li, dd, Blockquote { Rand links: 40px; } Tisch { border-collapse: Zusammenbruch; Randabstand: 0; } |
Eric Meyer CSS zurücksetzen
| html, body, div, span, applet, objekt, iframe, tabelle, beschriftung, tbody, tfoot, thead, tr, th, td, del, dfn, em, Schriftart, img, ins, kbd, q, s, samp, klein, streik, stark, sub, sup, tt, var, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, Akronym, Adresse, groß, zitieren, Code, dl, dt, dd, ol, ul, li, Feldsatz, Formular, Beschriftung, Legende { vertikal ausrichten: Grundlinie; Schriftfamilie: erben; Schriftstärke: erben; Schriftstil: erben; Schriftgröße: 100 %; Umriss: 0; Polsterung: 0; Rand: 0; Rand: 0; } :fokus { Umriss: 0; } Körper { Hintergrund: weiß; Zeilenhöhe: 1; Farbe: Schwarz; } ol, ul { Listenstil: keiner; } Tisch { Grenzkollaps: getrennt; Randabstand: 0; } Bildunterschrift, th, td { Schriftstärke: normal; Textausrichtung: links; } blockquote:before, blockquote:after, q:before, q:after { Inhalt: ""; } Blockquote, q { Zitate: "" ""; } |