CSS-Reset bezieht sich auf das Zurücksetzen des Browserstils. In früheren Artikeln auf 52CSS.com wurden ähnliche Kenntnisse vorgestellt, die jedoch nicht tiefgreifend genug waren. Heute werden wir uns zehn Beispiele der CSS-Reset-Methode ansehen und die Anwendung dieser Methode erlernen.
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.
1. Generisches CSS zurücksetzen
* {
Polsterung: 0;
Rand: 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.
2. Ateneu Popular CSS Reset
html, body, div, span, applet, object, 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}
3. 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;
}
4. Yahoos CSS-Reset
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;
}
5. Eric Meyer CSS zurücksetzen
html, body, div, span, applet, object, iframe, table, caption,
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: "" "";
}
6. Tantek Celik CSS zurücksetzen
:link,:visited { text-decoration:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { Schriftgröße:1em }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }
a img,:link img,:visited img { border:none }
Adresse { Schriftart: normal }
7. Christian Montoya CSS zurücksetzen
html, body, form, fieldset {
Rand: 0;
Polsterung: 0;
Schriftart: 100 %/120 % Verdana, Arial, Helvetica, serifenlos;
}
h1, h2, h3, h4, h5, h6, p, vor,
Blockquote, ul, ol, dl, Adresse {
Rand: 1em 0;
Polsterung: 0;
}
li, dd, Blockquote {
Rand links: 1em;
}
Formularbeschriftung {
Cursor: Zeiger;
}
Feldsatz {
Grenze: keine;
}
Eingabe, Auswahl, Textbereich {
Schriftgröße: 100 %;
Schriftfamilie: erben;
}
8. Rudeworks CSS zurücksetzen
* {
Rand: 0;
Polsterung: 0;
Grenze: keine;
}
html {
Schriftart: 62,5 % „Lucida Grande“, Lucida, Verdana, serifenlos;
Textschatten: #000 0px 0px 0px;
}
ul {
Listenstil: keiner;
Listenstiltyp: keiner;
}
h1, h2, h3, h4, h5, h6, p, vor,
Blockquote, ul, ol, dl, Adresse {
Schriftstärke: normal;
Rand: 0 0 1em 0;
}
zitieren, em, dfn {
Schriftstil: kursiv;
}
sup {
Position: relativ;
unten: 0,3em;
vertikal ausrichten: Grundlinie;
}
Unter {
Position: relativ;
unten: -0,2em;
vertikal ausrichten: Grundlinie;
}
li, dd, Blockquote {
Rand links: 1em;
}
Code, kbd, samp, pre, tt, var, input[type='text'], textarea {
Schriftgröße: 100 %;
Schriftfamilie: monaco, „Lucida Console“, Courier, Mono-Space;
}
del {
Textdekoration: durchgestrichen;
}
ins, dfn {
border-bottom: 1px solid #ccc;
}
klein, sup, sub {
Schriftgröße: 85 %;
}
Abkürzung, Akronym {
Texttransformation: Großbuchstaben;
Schriftgröße: 85 %;
Buchstabenabstand: .1em;
border-bottom-style: gepunktet;
Rand-Bottom-Breite: 1px;
}
eine Abkürzung, ein Akronym {
Grenze: keine;
}
sup {
vertikal ausrichten: super;
}
Unter {
vertikal ausrichten: sub;
}
h1 {
Schriftgröße: 2em;
}
h2 {
Schriftgröße: 1,8em;
}
h3 {
Schriftgröße: 1,6em;
}
h4 {
Schriftgröße: 1,4em;
}
h5 {
Schriftgröße: 1,2em;
}
h6 {
Schriftgröße: 1em;
}
a, a:link, a:visited, a:hover, a:active {
Umriss: 0;
Textdekoration: keine;
}
ein Bild {
Grenze: keine;
Textdekoration: keine;
}
img {
Grenze: keine;
Textdekoration: keine;
}
Beschriftung, Schaltfläche {
Cursor: Zeiger;
}
input:focus, select:focus, textarea:focus {
Hintergrundfarbe: #FFF;
}
Feldsatz {
Grenze: keine;
}
.klar {
klar: beides;
}
.float-left {
schweben: links;
}
.float-right {
schweben: rechts;
}
Körper {
Textausrichtung: Mitte;
}
#wrapper {
Rand: 0 automatisch;
Textausrichtung: links;
}
9. Anieto2K CSS zurücksetzen
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p,
blockquote, vor, a, abbr, akronym, adresse, groß,
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,
Feldsatz, Formular, Beschriftung, Legende,
Tabelle, Bildunterschrift, tbody, tfoot, thead, tr, th, td,
Zentrum, u, b, i {
Rand: 0;
Polsterung: 0;
Rand: 0;
Umriss: 0;
Schriftstärke: normal;
Schriftstil: normal;
Schriftgröße: 100 %;
Schriftfamilie: erben;
Vertical-Align: Grundlinie
}
Körper {
Zeilenhöhe: 1
}
:fokus {
Umriss: 0
}
ol, ul {
Listenstil: keiner
}
Tisch {
border-collapse: Zusammenbruch;
Randabstand: 0
}
blockquote:before, blockquote:after, q:before, q:after {
Inhalt: ""
}
Blockquote, q {
Zitate: "" ""
}
Eingabe, Textbereich {
Rand: 0;
Polsterung: 0
}
Std. {
Rand: 0;
Polsterung: 0;
Rand: 0;
Farbe: #000;
Hintergrundfarbe: #000;
Höhe: 1px
}
10. CSSLab CSS Reset
html, body, div, span, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, Blockquote, pre, a, Abk., Akronym, Adresse,
zitieren, code, del, dfn, em, schriftart, groß, img, ins, kbd, q, s, samp,
klein, streiken, stark, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legende, tabelle, caption, tbody, tfoot,
thehead, tr, th, td {
Rand: 0;
Polsterung: 0;
Rand: 0;
Umriss: 0;
Schriftstärke: erben;
Schriftstil: erben;
Schriftgröße: 100 %;
Schriftfamilie: erben;
vertikal ausrichten: Grundlinie;
}
:fokus {
Umriss: 0;
}
Tisch {
Grenzkollaps: getrennt;
Randabstand: 0;
}
Bildunterschrift, th, td {
Textausrichtung: links;
Schriftstärke: normal;
}
ein img, iframe {
Grenze: keine;
}
ol, ul {
Listenstil: keiner;
}
Eingabe, Textbereich, Auswahl, Schaltfläche {
Schriftgröße: 100 %;
Schriftfamilie: erben;
}
wählen {
Marge: erben;
}
/* Behebt die falsche Platzierung von Zahlen in OLs in IE6/7 */
ol { margin-left:2em }
/* == klarfix == */
.clearfix:after {
Inhalt: ".";
Anzeige: Block;
Höhe: 0;
klar: beides;
Sichtbarkeit: verborgen;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
Diese sind alle ähnlich, mit unterschiedlichen Anforderungen und unterschiedlichen Methoden.