Informatik :: CSS :: Textgestaltung

Textgestaltung

Textdekoration

Das Attribut text-decoration hat seinen Namen wirklich nich zu Unrecht erhalten. Mit seiner Hilfe können Sie Text in unterschiedlichster Art und Weise dekorieren - nein, nicht mit Girlanden, sondern mit Linien. Und das wäre unterstrichen (underline) und durchgestrichen (line-through).

Das Attribut text-decoration bezieht sich in seiner Wirkung leider auch nicht nur auf die Dekoration einer Seite , sondern wirkt nur auf den entsprechenden Text. Folglich ist es hier nicht möglich , lediglich eine farbige Linie einzufügen, denn das zusätzliche Attribut color färbt Text und Dekoration gleichermaßen ein.

Beispiel:

Das Beispiel hätte folgendes Aussehen.

zum Seitenanfang

Text einrücken

Eines der großen Probleme in HTML besteht im Einrücken von Text. Sicher, es gibt einige Tricks, mit denen es auch dafür eine Lösung gibt, aber CSS kann das einfach besser.
Das erforderliche Attribut heißt text-ident und erwartet einen numerischen Wert mit einer Maßeinheit, der die Tiefe der Einrückung der ersten Zeile eines Absatzes (Erstzeileneinzug) angibt.

Beispiel:

zum Seitenanfang

Hintergrundfarben für Text

Mit dem Attribut background-color erstellen Sie eine beliebige Hintergrundfarbe für einen Textabschnitt. Alternativ können Sie auch eine Grafik mit einem farbigen Hintergrund versehen.
Während bei Netscape nur der entsprechende Text- oder Grafikbereich eine Hintergrundfarbe erhält, zieht sich mittels Internet Explorer die Hintergrundfarbe über die gesamte Bildschirmbreite. Mit diesem Trick erhalten Sie einen interessanten Effekt, mit dem sich Seiten gut in einzelne Abschnitte gliedern lassen.

Beispiel:

Das Beispiel hat folgendes Aussehen.

zum Seitenanfang

Text mit Hintergrundbild

Die Verwendung eines Hintergrundbildes bietet in HTML wenig Möglichkeiten. Mit CSS können Sie endlich verschiedene Varianten zum Gestalten der Seite verwenden. Sie können z.B. ein Hintergrundbild für eine Zeile oder einen ganzen Abschnitt definieren. Dann wird der entsprechende Text mit dem Bild hinterlegt, was eine interessante Gestaltungsmöglichkeit darstellt.
Zum Einbinden eines Hintergrundbildes verwenden Sie das Attribut background-image und übergeben ihm den Namen bzw. die Adresse des Bildes.

Beispiel:

Das Beispiel hat folgendes Aussehen.

zum Seitenanfang

Aufgabe:

Lösung

zum Inhaltsverzeichnis JavaScript zum Seitenanfang