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

Beschreibung
Beispiele
Fehler melden

Textauszeichnung

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

CSS-Eigenschaft: text-decoration
Kurzbeschreibung	Werte	Standardwert	Kategorie	Hinweis
Textauszeichnung	none underline overline line-through blink text-decoration-line(CSS 3) text-decoration-color(CSS 3) text-decoration-style(CSS 3) inherit	none	Allgemein: Textdarstellung CSS 2.1: Text CSS 3: Text Decoration

Verwandte Eigenschaften aus der Kategorie: Textdarstellung (allgemein), Text (CSS 2.1), Text Decoration (CSS 3):

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

Google
Chrome

Internet
Explorer

Safari

Opera

CSS21

Version: 16	Version: 25	Version: 30	Version: 31	Version: 32
j

Version: 20
w

Version: 8	Version: 9	Version: 10
w

Version: 4	Version: 5	Version: 6
w

Version: 10	Version: 11	Version: 12
j

Weiterführende Informationen zu text-decoration:

W3C Spezifikation:
http://www.w3.org/TR/css-text-decor-3/#text-decoration

letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
text-autospace
nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
text-decoration-color

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:

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:

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:

Beispiel Nr. 3 So sieht's aus:

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:

Beispiel Nr. 4 So sieht's aus:

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:

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:

Beispiel Nr. 6 So sieht's aus:

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:

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:

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!

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

Textauszeichnung

Verwandte Eigenschaften aus der Kategorie: Textdarstellung (allgemein), Text (CSS 2.1), Text Decoration (CSS 3):

Folgendes ist beim Einsatz von text-decoration zu beachten:

Weiterführende Informationen zu text-decoration:

Beispiele

HTML:

CSS:

Beispiel Nr. 1 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 2 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 3 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 4 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 5 So sieht's aus:

CSS3 / text-decoration

HTML:

CSS:

Beispiel Nr. 6 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 7 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 8 So sieht's aus:

Fehler melden

CSS-Wiki.com

Kategorien (allgemein)

Kategorien (W3C: CSS 2.1)

Module (W3C: CSS 3)

A-Z:

Schnellauswahl

Seiten:

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

Textauszeichnung

Verwandte Eigenschaften aus der Kategorie: Textdarstellung (allgemein), Text (CSS 2.1), Text Decoration (CSS 3):

Folgendes ist beim Einsatz von text-decoration zu beachten:

Weiterführende Informationen zu text-decoration:

Beispiele

HTML:

CSS:

Beispiel Nr. 1 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 2 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 3 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 4 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 5 So sieht's aus:

CSS3 / text-decoration

HTML:

CSS:

Beispiel Nr. 6 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 7 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 8 So sieht's aus:

Fehler melden

CSS-Wiki.com

Kategorien (allgemein)

Kategorien (W3C: CSS 2.1)

Module (W3C: CSS 3)

A-Z:

Schnell­auswahl

Seiten:

Schnellauswahl