PROFI-FOTOS-online.com - Der eigene Online-Shop für Profi-Fotografen - Einfach. Günstig. Fair.

CSS-Eigenschaft: text-decoration, Kategorien: Textdarstellung (allgemein), Text (CSS 2.1), Text Decoration (CSS 3)

Textauszeichnung

Unter- oder überstreicht einen Text, streicht ihn durch oder läßt ihn blinken.

CSS-Eigenschaft: text-decoration
KurzbeschreibungWerteStandardwertKategorieHinweis
Textauszeichnungnone
Allgemein:
Textdarstellung
CSS 2.1:
Text
CSS 3:
Text Decoration
 

Folgendes ist beim Einsatz von text-decoration zu beachten:

  • Nicht sonderlich viel ;-)
  • text-decoration ist zu reinen Dekorationszwecken geeignet, möchte man Text inhaltlich hervorheben, sollte man HTML-Elemente wie <strong> oder <em> verwenden.
  • Die Parameter blink, line-through, overline und underline sind frei kombinierbar. Der Parameter none setzt allerdings alle anderen Angaben außer Kraft, wenn dieser in der Definition vorkommt.
  • text-decoration übernimmt die Farbe, die dem Text selber zugewiesen ist. Im Beispiel Nr. 7 sieht man, wie man einzelne Textabschnitte mit einer anderen Farbe versehen kann.
  • blink wird aktuell nur von Firefox und Opera unterstützt. Abgesehen davon, dass diese Eigenschaft "ziemlich 80er" erscheint und an Screendesign der ersten Internettage erinnert, ist aus Sicht der Barrierefreiheit auf blink zu verzichten. Blinkender Text kann den Besucher verwirren und wird schnell als nervende Werbung empfunden. Blinkende Inhalte können außerdem epileptische Anfälle auslösen. Die Blinkgeschwindigkeit ist zwar relativ gering, je nach Einsatz kann der Effekt aber beeindruckend sein (Siehe Beispiel Nr. 8). Sowohl die Barrierefreiheit als auch die mangelnde Browserunterstützung sind gute Argumente, blink nicht einzusetzen.
  • CSS 3 liefert neue Werte für text-decoration, um Farbe, Style und Art zu steuern. Diese werden zu gegebener Zeit hier weiter erläutert.
Browserunterstützung von text-decoration
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS21
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20
w
Version: 8Version: 9Version: 10
w
Version: 4Version: 5Version: 6
w
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu text-decoration:



Beispiele

HTML:

<p>Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</p>

CSS:

p {
   color: red;
}
/* Standarddarstellung. Das Rot dient ledigich der Hervorhebung. */
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 1 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.

 

HTML:

<p class="doBlink">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</p>

CSS:

p.doBlink {
   text-decoration: blink;
}
/* Wird nur von Firefox und Opera unterstützt. */
Beispiel nur für: FirefoxOpera

Beispiel Nr. 2 So sieht's aus:

 

HTML:

<p class="doLineThrough">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</p>

CSS:

p.doLineThrough {
   text-decoration: line-through;
}
/* Durchgestrichener Text. Falls inhaltlich relevant, sollte das HTML-Tag del verwendet werden. */
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 3 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.

 

HTML:

<p class="doOverline">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</p>

CSS:

p.doOverline {
   text-decoration: overline
}
/* Beispiel zu Vollständigkeit. In der Praxis selten zu finden. */
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 4 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.

 

HTML:

<h1 id="example-5">CSS3 / text-decoration</h1>

CSS:

#example-5 {
   text-decoration: underline;
   color: darkslateblue;
   -moz-text-decoration-style: wavy;
   -moz-text-decoration-color: chartreuse;
   -webkit-text-decoration-style: wavy;
   -webkit-text-decoration-color: chartreuse;
   -o-text-decoration-style: wavy;
   -o-text-decoration-color: chartreuse;
   -ms-text-decoration-style: wavy;
   -ms-text-decoration-color: chartreuse;
   text-decoration-style: wavy;
   text-decoration-color: chartreuse;
}
/* Neue Möglichkeiten in CSS3 - werden bislang nur vom Firefox mit Vendor-Präfix unterstützt. */
Beispiel nur für: Firefox

Beispiel Nr. 5 So sieht's aus:

CSS3 / text-decoration

 

HTML:

<p class="doMulti"><span class="doInside">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</span></p>

CSS:

.doMulti {
   text-decoration: underline overline blink line-through;
}
/* Alle Werte sind miteinander kombinierbar. Weniger ist allerdings mehr ;-) */
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 6 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.

 

HTML:

<p class="doUnderline">Es hat lange gedauert, bis <span>ich begriffen </span>habe, was es bedeutet, ein blinder Text zu sein.</p>

CSS:

p.doUnderline {
   text-decoration: underline;
}
p.doUnderline span {
   color: blue;
}
/* Das P-Tag trägt den Unterstrich. Über das SPAN wird ein Textabschnitt mit einer anderen Farbe versehen, die Farbe des Unterstrichs hängt allerdings weiterhin von der Farbe des P-Tags ab. */
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 7 So sieht's aus:

Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein.

 

HTML:

<p class="doBlinkBig">Es hat lange gedauert, <strong>bis ich begriffen habe, was es bedeutet, </strong>ein blinder Text zu sein.</p>

CSS:

.doBlinkBig {
   text-decoration: blink underline;
   font-size: 3em;
   font-style: italic;
   background-color: blue;
   color: yellow;
}
.doBlinkBig strong {
   text-decoration: line-through;
   font-style: normal;
   font-size: 1.25em;
   background-color: yellow;
   color: #FF0000;
}
/* Die 80er Jahre des Webdesigns sind zurück ;-). Hat mit modernem Webdesign nichts mehr zu tun. */
Beispiel nur für: FirefoxOpera

Beispiel Nr. 8 So sieht's aus:

Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein.

 

Fehler melden

Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.

Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!

Vielen Dank!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 17. 01. 2024
Render Time: 0.029 sec.