Schneller Tipp Erstellen Sie Ihre eigene einfache Reset.css-Datei

Viel zu viele CSS-Neulinge wissen nicht, wie wichtig es ist, a zu erstellen "reset.css" -Datei. Wenn Sie eine Umgebung haben, in der jeder Browser sein eigenes "Standard" -Stil hat, werden Sie oft feststellen, wie Sie Ihren Schädel schlagen, wenn Sie sich fragen: "Warum gibt es hier einen Abstand?" Um sich einige der Kopfschmerzen zu ersparen, die Sie zweifellos erleben werden, müssen Sie Ihre eigene einfache Reset-Datei erstellen. Das Problem bei der Verwendung eines der vielen derzeit vorhandenen Frameworks besteht darin, dass sie nicht speziell auf Sie zugeschnitten sind. Beispielsweise verwende ich niemals das veraltete Element "center" in meinen Projekten. Daher muss ich es nicht in meinen Standardstil setzen. Andere müssen es jedoch tun - obwohl sie einen Schlag auf das Handgelenk verdienen… oder das Gesäß, wenn Sie dazu neigen.

Schritt 1: Nullen Sie Ihre Ränder und Polsterung aus

Standardmäßig fügen die Browser vielen Elementen Ränder hinzu. Zum Beispiel gibt es typischerweise ungefähr sechs Pixel Ränder auf dem Körperelement. Als Designer sollten Sie diese Zahlen angeben! (Außer vielleicht, wenn es um die Schriftgröße geht - was ein ganz anderes Thema ist, das ausführlich diskutiert wird.) Lassen Sie uns also eine Reihe dieser Elemente auf Null setzen!

 body, html, div, blockquote, img, beschriften, p, h1, h2, h3, h4, h5, h6, vor, ul, ol, li, dl, dt, dd, formular, ein, feldset, eingang, th, td margin: 0; Polsterung: 0; Grenze: 0; Umriss: keine; 

Schritt 2: Übernehmen Sie die Kontrolle über Ihre Elemente

Möglicherweise haben Sie festgestellt, dass Ihre Elemente von Browser zu Browser unterschiedlich groß sind. Sie können dies ändern, indem Sie die Standardschriftgröße auf 100% setzen..

 h1, h2, h3, h4, h5, h6 Schriftgröße: 100%; 

Als Nächstes müssen wir die Ränder und die Auffüllung für unsere Überschriftenelemente definieren. Ich werde auch den Stil vom Typ "Liste" aus meinen Listenelementen entfernen. Zuletzt werde ich eine Basisschriftgröße für das body-Element festlegen.

 Körper Zeilenhöhe: 1; Schriftgröße: 88%;  h1, h2, h3, h4, h5, h6 Schriftgröße: 100%; Polsterung: .6em 0; Marge: 0 15px;  ul, ol list-style: none;  img border: 0; 

Schritt 3: Erweitern

Normalerweise füge ich gerne einige allgemeine Klassen hinzu, die ich in all meinen Projekten verwende. Sie können sich entscheiden, diese selbst zu verwenden.

 .floatLeft float: left; Polsterung: .5em .5em .5em 0;  .floatRight float: right; Polsterung: .5em 0 .5em .5em; 

Hier ist unsere letzte einfache Reset.css-Datei.

 body, html, div, blockquote, img, beschriften, p, h1, h2, h3, h4, h5, h6, vor, ul, ol, li, dl, dt, dd, formular, ein, feldset, eingang, th, td margin: 0; Polsterung: 0; Grenze: 0; Umriss: keine;  body Zeilenhöhe: 1; Schriftgröße: 88% / * Entscheiden Sie selbst, ob Sie dies aufnehmen möchten. * /;  h1, h2, h3, h4, h5, h6 Schriftgröße: 100%; Polsterung: .6em 0; Marge: 0 15px;  ul, ol list-style: none;  eine Farbe: schwarz; Textdekoration: keine;  a: hover Textdekoration: Unterstreichung;  .floatLeft float: left; Polsterung: .5em .5em .5em 0;  .floatRight float: right; Auffüllen: .5em 0 .5em .5em; 

Zumindest für mich ist dies alles, was ich brauche, um mit einer neuen Website zu beginnen. Für Ihre eigenen Projekte sollten Sie das erweitern, was ich hier habe, damit es am besten zu Ihnen passt. Sie sollten wahrscheinlich die Ränder für weitere häufig verwendete Elemente angeben, beispielsweise das Absatz-Tag.

Wenn Sie eine 100% Reset-Datei haben möchten, empfehle ich Ihnen, sich auf Eric Meyers beliebte "Reset CSS" -Datei zu beziehen. Alternativ können Sie das YUI-Reset-CSS auschecken. Bis Montag!