CSS text-decoration als Formatierung

Häufig bei Links eingesetzt

Die Textdekoration ist eine weitere Möglichkeit, um Text mit CSS zu gestalten. Dabei stehen verschiedene Möglichkeiten zur Verfügung, die von none (keine Textdekoration - Normalfall) über underline (unterstrichen), overline (Strich über dem Text), line-through (durchstrichen) und blink (blinkender Text) reichen.

Diese Möglichkeiten kann man im normalen Text verwenden, aber der Befehl text-decoration wird speziell bei den Links sehr gerne verwendet, weil man einen leichten Mouseover-Effekt erreichen kann.

Text mit text-decoration und CSS gestalten

Eingesetzt wird der Befehl in folgender Weise:

text-decoration: line-through;
text-decoration: none;

Der blinkende Text (Einstellung blink) funktioniert aber nicht in jedem Browser und ist auch umstritten, weil er der Information des Textes nicht weiterhilft. Die Textdekoration wird überhaupt sehr gerne beim Link eingesetzt. So ist es möglich, die Textdekoration auszuschalten und bei einem aktiven Link das Unterstreichen einzuschalten, was den Effekt hat, dass man beim Überfahren mit dem Mauszeiger die Unterstreichung sieht und damit das Erkennen eines aktiven Links erleichtert.

ergibt:

text-decoration: underline;

text-decoration: blink;

text-decoration: line-through;

text-decoration: none;

Im normalen Text wird man den Befehl eher selten bis nie finden, aber bei den Links wird er wie bereits ausgeführt sehr gerne verwendet. Es gibt dort aber auch unterschiedliche Trends. Lange Zeit hat man es gerne so gemacht, dass man das Unterstreichen unterbindet - wobei ein Link per HTML-Standard immer unterstrichen war. Dadurch fiel der Link weniger auf, aber beim Überfahren mit der Maus hat man dies eingeschaltet und der Link war unterstrichen und hatte einen leichten Effekt.

Der Trend der letzten Zeit geht aber eher dahin, dass man mit text-decoration einen farbigen unterstrichenen Link wählt, um den Link wieder stärker und auffälliger zu machen. Zum Einsatz kommt dieser Befehl also recht häufig gerade bei Verlinkungen - ob man nun das Unterstreichen abschaltet, bewusst einschaltet oder andere Varianten ausprobieren möchte.

Lesen Sie auch

Die Textformatierung ist bei CSS neben der Positionierung eine Hauptaufgabe, weil gefälliger Text einfach eher angenommen wird und einen Mehrwert darstellt. Man darf es nicht übertreiben, aber man kann sich damit sich auch einmal spielen und ein wenig die Reaktionen überprüfen. Wichtig ist einmal die grundsätzliche Einstellung der Schriftart und Schriftgröße.

Dann kommen Befehle, die sehr häufig benötigt werden. Dazu gehört font-weight für die Fettschrift, alternativ und nicht so häufig wird man font-style für kursiv nutzen. Sehr oft braucht man color für die Textfarbe und text-decoration speziell bei der Gestaltung und Auszeichnung der Links.

Und dann gibt es noch weitere Einstellungen wie den Abstand von Buchstaben und Wörter, den Schatten oder auch die Textumwandlung und die Schriftvariante.

Diesen Artikel teilen

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel