Kurztipp: Erstellen Sie Ihre eigene einfache Reset.css-Datei

() translation by (you can also view the original English article)

Viel zu viele unerfahrene CSS-Designer wissen nicht, wie wichtig es ist, eine "reset.css"-Datei zu erstellen. Wenn Sie eine Umgebung haben, in der jeder Browser sein eigenes "Standard" -Stil hat, schlagen Sie häufig auf Ihren Schädel, wenn Sie sich fragen: "Warum gibt es hier einen Abstand?" Um sich einige der Kopfschmerzen zu ersparen, die Sie zweifellos haben werden, müssen Sie Ihre eigene einfache Rücksetzdatei erstellen. Das Problem bei der Verwendung eines der vielen derzeit vorhandenen Frameworks besteht darin, dass sie nicht speziell auf Sie zugeschnitten sind. Zum Beispiel verwende ich in meinen Projekten niemals das veraltete "center" -Element. Folglich muss ich es nicht in mein Standard-Styling einfügen. Andere müssen dies jedoch möglicherweise tun - obwohl sie einen Schlag auf das Handgelenk verdienen würden... oder auf das Gesäß, wenn Sie dazu neigen.

Schritt 1: Nullen Sie Ihre Ränder und Polster

Standardmäßig fügen die Browser vielen Elementen Ränder hinzu. Beispielsweise befinden sich normalerweise ungefähr sechs Pixel Ränder auf dem Körperelement. Als Designer sollten Sie derjenige sein, der diese Zahlen spezifiziert! (Außer vielleicht, wenn es um die Schriftgröße geht - ein ganz anderes Theme, über das ausführlich diskutiert werden muss.) Lassen Sie uns also eine Reihe dieser Elemente auf Null setzen!

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul,
ol, li, dl, dt, dd, form, a, fieldset, input, th, td
{
margin: 0; padding: 0; border: 0; outline: none;
}

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

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

1	h1, h2, h3, h4, h5, h6
2	{
3	font-size: 100%;
4	}

Als nächstes müssen wir die Ränder und Auffüllungen für unsere Überschriftenelemente definieren. Ich werde auch den Listenstil-Typ aus meinen Listenelementen entfernen. Zuletzt werde ich eine Basis font-size für das body-Element festlegen.

1	body
2	{
3	line-height: 1;
4	font-size: 88%;
5	}
6
7	h1, h2, h3, h4, h5, h6
8	{
9	font-size: 100%;
10	padding: .6em 0;
11	margin: 0 15px;
12	}
13
14	ul, ol
15	{
16	list-style: none;
17	}
18
19	img
20	{
21	border: 0;
22	}

Schritt 3: Erweitern

Normalerweise füge ich gerne einge allgemeine Klassen hinzu, die ich in all meinen Projekten verwende. Sie können diese selbst verwenden oder nicht.

.floatLeft
{
float: left;
padding: .5em .5em .5em 0;
}

.floatRight
{
float: right;
padding: .5em 0 .5em .5em;
}

Hier ist unsere letzte einfache Reset.css-Datei.

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
li, dl, dt, dd, form, a, fieldset, input, th, td
{
margin: 0; padding: 0; border: 0; outline: none;
}

body
{
line-height: 1;
font-size: 88% /* Decide for yourself if you want to include this. */;
}

h1, h2, h3, h4, h5, h6
{
font-size: 100%;
padding: .6em 0;
margin: 0 15px;
}

ul, ol
{
list-style: none;
}

a
{
color: black;
text-decoration: none;
}

a:hover
{
text-decoration: underline;
}

.floatLeft
{
float: left;
padding: .5em .5em .5em 0;
}

.floatRight
{
float: right;
padding: .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, was ich hier habe, erweitern, damit es am besten zu Ihnen passt. Sie sollten wahrscheinlich die Ränder für mehr häufig verwendete Elemente wie das paragraph-Tag angeben.

Wenn Sie eine 100% ige Reset-Datei wünschen, empfehlen wir Ihnen, auf Eric Meyers beliebte "Reset CSS"-Datei zu verweisen. Alternativ können Sie das YUI Reset CSS auschecken. Bis Montag!