CSS Tipps und Tricks – CSS Reset Datei

Von 7. Januar 2011 Webdesign Keine Kommentare

Eine kleine Zusammenfassung von einigen nützlichen Tipps und Tricks für CSS, die wir selbst oft nutzen. Oft nennt man diese Maßnahmen auch CSS Reset, da die jeweiligen Browser durch diese Anweisungen zurückgesetzt werden. Im Folgenden einige wichtige Anweisungen und weiter unten dann eine Reset-Datei zum einbinden, welche wichtige grundlegende “Resets” durchführt.

Rahmen um verlinkte Bilder:

Oft kommt es vor das im Internet Explorer verlinkte Grafiken von einem Rahmen umfasst werden.Ist dies nicht gewollt, hilft folgende kleine Anweisung. Mit der Ersten schalten Sie dieses Symptom von Anfang an direkt aus, bei der zweiten Variante können Sie die Anweisung auf ein bestimmtes Element anwenden.

In einer Stylesheet: img {border:0px;}

In einem HTML-Element: style=”border:0px;”

Rahmen um Links:

In einigen Browsern erscheint beim Überfahren oder Bestätigen von Links ein gepunkteter/gestrichelter Rahmen, um dieses Objekt. Dies kann gerade bei dunklen Hintergründen enorm stören. Mit folgender Anweisung verschwindet dieser Rahmen.

In einer Stylesheet: a:focus {outline:none;}

Zeilenumbruch bei Formularen:

Bei Formularen oder Überschirften fügen die Browser oft einen Zeilenumbruch ein. Beim pixelgenauen Platzieren kann dies stören. Folgende Anweisung entfernt den Umbruch.

In einer Stylesheet: h1 {display:inline;}

In einem HTML-Element: style=”display:inline;

Reset-Datei zum Herunterladen:

Hier nun die Reset-Datei mit den wichtigsten Anweisungen/Resets zum Herunterladen. Bitte unbedingt vor Benutzung anschauen und verinnerlichen, was verändert wird. Oft können durch die Änderungen ungewollte Einschränkungen oder Veränderungen entstehen. Hier heißt es dann, jeweils neu deklarieren.

Einbinden der Datei: <link rel=“stylesheet” type=“text/css” href=“reset.css”>

Inhalt der Datei:

@charset “utf-8″;

/* Reset Datei Design-Insel.de */

html{color:#000;background:#FFF;line-height:1;}

img {border:0px;}

a:focus {outline:0;}

ol,ul{list-style: none;}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}

table{border-collapse:collapse;border-spacing:0;}

fieldset,img{border:0;}

caption,th{text-align:left;}

h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}

input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}

input,button,textarea,select{*font-size:100%;}

Über Peter

Ich bin seit 2008 selbständiger Web-Entwickler und Inhaber von Design-Insel.de. Ich versorge meine Kunden mit anspruchsvollen und erfolgsorientierten Weblösungen. Dazu zählen mittelständische aber auch größere Unternehmen wie T-Systems und Zalando.

Hinterlasse eine Antwort