CSS, HTML und Javascript mit {stil}

HTML – Formatierung ohne CSS

CSS Reset

Die Browser formatieren den Inhalt einer Webseite ohne CSS entsprechend bestimmter Vorgaben. Bevor CSS für das Design der Webseite sorgt, formatieren die Browser den Inhalt nach einfachen Grundregeln.

Das reine HTML ignoriert Leerzeichen und einen Zeilenumbruch im Text, rückt Listen ein Stück ein, setzt einen Abstand zwischen Textabsätze und den Text in einer serifenfreien Schrift.

Das reine HTML ohne CSS soll ein gut lesbare Seite strukturieren, aber die Browser zeigen leichte Abweichungen in der Darstellung. CSS-Dateien beginnen darum oft mit einem CSS-Reset, mit dem die Unterschiede zwischen den mitgebrachten Browser-Stilen ausgebügelt werden. Die CSS-Dateien der Templates von Content Management Systemen wie WordPress beginnen meist mit einem CSS-Reset. Häufig verwendete CSS-Resets sind z.B.

Abstände

Die Inhalte von Blockelementen halten einen kleinen Abstand voneinander – den margin. Wenn die HTML-Tags direkt im body-Tag des HTML-Dokuments liegen, sieht man zudem auch einen kleinen Margin zum Rand des Browserfensters. Die Inhalte von Inline-Tags hingegen weisen keinen margin gegenüber den sie umschließenden Texten auf. Bilder, die innerhalb eines Textes gesetzt werden, verhalten sich einfach wie übergroße Buchstaben und vergrößern den umfassenden Block.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Mauris ante neque, vehicula quis, convallis sit amet, vestibulum ornare, arcu.

Donec at lorem et elit congue dictum. Cras sapien ligula, rutrum quis, posuere id, faucibus id, risus. Maecenas sed est volutpat arcu adipiscing tempus. Sed dictum mauris euismod mauris.

Inhalte von p-Tags werden ohne CSS von den meisten grafischen Browsern in der Schriftgröße 1 em (meistens 16 Pixel) in einer Serifenschrift (Times New Roman) gesetzt. Die Zeilenhöhe (meistens 18 Pixel) kann nur über CSS geändert werden. Der Benutzer kann die Schriftgröße durch den Zoom seines Browsers ändern.

Tabellen

Tabellen nehmen per Vorgabe nur den Platz ein, den ihre Inhalte brauchen. Tabellenzellen halten einen kleinen Abstand voneinander (border-spacing).

Tabellen nehmen zwar nicht unbedingt die gesamte Breite des umfassenden Blocks ein, aber sie erzeugen einen Zeilenumbruch vor dem öffnenden und nach dem schließenden table-Tag. Ohne Attribute und CSS-Eigenschaften weisen Tabellen keinen Rahmen und keinen Abstand der Inhalte von Tabellenzellen auf (kein padding).

Zeile 1 Spalte 1 Zeile 1 Spalte 2
Zeile 2 Spalte 1 Zeile 2 Spalte 2

HTML ul- und ol-Listen

HTML-Listen oder Aufzählungen in ul bzw. ol-Tags bestehen aus einer Box für die Listensymbole oder den numerischen Index und einem Block für den Text. Per Vorgabe sind die Listensymbole leicht eingerückt und sitzen nicht linksbündig.

  • Cras porta lobortis vel
  • Nam ut metus
  • Praesent vestibulum. Nam ante urna, facilisis ac, mattis non, convallis a, nisl. Nunc vestibulum magna quis turpis. Donec sit amet felis. Nam aliquet adipiscing quam. In hendrerit.

Leerzeichen und Zeilenumbrüche in HTML

Browser ignorieren aufeinanderfolgende Leerzeichen und Zeilenumbrüche im HTML-Code.

<p>Wer mehrere Leerzeichen nacheinander setzt, macht was falsch.</p>

<p>Wer 
mehrere      Leerzeichen 
nacheinander            setzt, 
macht     was           
falsch.</p>

Die beiden HTML-Tags werden im Browser gleich angezeigt:

Wer mehrere Leerzeichen nacheinander setzt, macht was falsch.

Wer mehrere Leerzeichen nacheinander setzt, macht was falsch.

Damit Leerzeichen und Zeilenumbrüche vom Browser angezeigt werden, kann der CSS-Stil white-space: pre; eingesetzt werden.

div und span: Tags ohne Eigenschaften

Die zuvor beschriebenen HTML-Tags besitzen „angeborene“ Eigenschaften für die Darstellung im Browserfenster. p-Tags erzeugen einen kleinen Margin vor und nach dem p-Tag, ul- und ol-Tags besitzen ebenfalls diesen führenden und abschließenden Margin und darüber hinaus bringen sie Auflistungszeichen oder einen Index mit. Zwei besondere Tags sind das div-Tag und das span-Tag: Sie sind Tags ohne Eigenschaften.

Sie sind für die Gestaltung von HTML-Elementen durch Stylesheets gedacht, ohne dass der Browser eigene Formatierungen einbringt. Das div-Tag ist ein Block-Tag, das span-Tag ein Inline-Tag. Ohne weitere Formatierung führt auch das div-Tag zu einem Zeilenvorschub, während Text in einem span-Tag ohne besondere Auszeichnung innerhalb der Textzeile dargestellt wird.