ForumWebservice und SEOWebhostingDesign ShopSoftware ShopLiteratur Shop

Sie sind hier: Startseite  » CSS-Tutorials » Formate definieren

Formate definieren


Formate zentral für eine HTML Datei definieren


Mit der folgenden Notierung im Head der Datei wird der Hintergrund auf die Farbe #FFFFCC und der Text auf Blau gesetzt

Mit wird der Bereich für Stylesheet-Formatdefinitionen festgelegt, wobei die für CSS zutreffende Sprache mit type="text/css" bestimmt wird. Damit ältere Web-Browser, die keine Stylesheets kennen, den Inhalt des style-Elements nicht irrtümlich als anzuzeigenden Text interpretieren, sollte der Inhalt in einen HTML-Kommentar

<!-- ... -->

eingebunden werden.

Eigene Erläuterungen können (auch mehrzeilig) zwischen /*... Erläuterung ...*/ eingebunden werden. Diese werden vom Browser ignoriert.

Formate zentral in separater CSS-Datei definieren :
In vielen Fällen werden einheitliche Formate für alle HTML-Dateien eines Projekts gewünscht. In diesem Fall müssen die Angaben nicht in jeder Datei wiederholt werden. Stattdessen können die Formate in einer separaten Textdatei definiert und diese Datei einfach in jeder gewünschten HTML-Datei eingebunden werden. Wenn die Angaben in der separaten Datei geändert werden, wirken sich die Änderungen einheitlich auf alle Dateien aus, in denen die separate CSS-Datei im Head eingebunden ist.

<link rel="stylesheet" type="text/css" href="formate.css">

Innerhalb des Link-Tags müssen die Angaben rel="stylesheet" type="text/css" stehen. Beim Attribut href= wird die aufzurufende Datei genauso wie beim Einbinden einer Grafik angegeben (Pfadangaben beachten).

Es muss sich um eine reine Textdatei handeln, die die Endung .css haben sollte. Die Datei darf nichts anderes als Definitionen zentraler Formate und Kommentare enthalten. Eine solche CSS-Datei kann mit jedem einfachen Texteditor erstellt werden.

Formate direkt in einem HTML-Tag definieren :
Formate für ein HTML-Element werden definiert, indem innerhalb des einleitenden HTML-Tags das Attribut style= und dahinter die gewünschten Formatdefinitionen notiert werden. Innerhalb der Formatdefinitionen sind CSS-Eigenschaften erlaubt. Dabei gilt die gleiche Syntax wie innherhalb der geschweiften Klammern bei zentralen Formaten. Jede Eigenschaft besteht aus einem Namen, z.B. color (Schriftfarbe) und einem Wert, z.B. #D8FD02, getrennt durch einen Doppelpunkt. Abschließen jeder Formatdefinition erfolgt jeweils durch ein Semikolon. Nur bei der letzten Formatdefinition vor dem abschließenden Anführungszeichen darf dies entfallen.

Ein Beispiel hierfür könnte so aussehen :

Und so können Sie dieses Beispiel in unserem Editierfeld Editieren
Im obigen Beispiel werden die individuellen Formatangaben auf ein gewöhnliches p-Element angewendet. Es erhält mit Hilfe der CSS-Eigenschaften für Hintergrundfarbe (background-color), Schriftfarbe (color), Schriftart (font-family), Schriftgröße (font-size), Zeichenabstand (letter-spacing), Innenabstand zum Rand (padding) und einem Rahmen (border) ein Aussehen, das überhaupt nicht mehr an einen "Textabsatz" erinnert.
Wie das Beispiel zeigt, können die Formatierungsarten auch gemischt eingesetzt werden.

Nach oben springen..

Druckerzeichen
Impressum