CSS/Eigenschaften/Textformatierung/text-decoration

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit der Eigenschaft text-decoration können Sie zusätzliche Dekorationen wie unterstrichenen oder durchgestrichenen Text bestimmen.

[Bearbeiten] CSS1, CSS2, CSS2.1

  • CSS 1.0
  • Android
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>text-decoration</title>
    <style>
      ul, i     { text-decoration: underline; }
      b         { text-decoration: overline; }
      .overline { text-decoration: overline; color: red; }
      .erledigt { text-decoration: line-through; }
      h2        { text-decoration: underline overline; }
    </style>
  </head>
  <body>
    <h2>Textausschmückung</h2>
    <p class="overline">Gewöhnlich werden
      <a href="http://wiki.selfhtml.org">Verweise</a>
      unterstrichen dargestellt.
    </p>
    <p>Die Vererbung der Werte der
      <b>Eigenschaft
        <code>text-decoration</code>
      </b>
      ist <i>sehr <b>eigentümlich</b> anzuschauen</i>.
    </p>
    <h2>Aufgabenliste</h2>
    <ul>
      <li>Einkaufen</li>
      <li class="erledigt">Blumen gießen</li>
      <li>Staub saugen</li>
    </ul>
  </body>
</html>
  • Der Wert der Eigenschaft text-decoration wird nicht vererbt. Dennoch ist der Verweis „überstrichen“, weil er innerhalb des Absatzes steht. Gleiches gilt für die Listenelemente. Die Voreinstellung text-decoration: none; wird nicht explizit geändert. Trotzdem werden sie unterstrichen dargestellt, weil die Liste unterstrichen werden soll.
  • Die Farbe der Textdekoration entspricht der Textfarbe des Elements, auch wenn Kindelemente ggf. eine andere Textfarbe besitzen, wie z.B. der Verweis.

Mit text-decoration können Sie eine zusätzliche Textausschmückung festlegen. Folgende Angaben sind möglich:

  • underline, unterstrichen
  • overline, „überstrichen“
  • line-through, durchgestrichen
  • blink, blinkend
  • none, keine Dekoration, Voreinstellung
  • inherit, Textdekoration des Elternelements

Sie können für ein Element auch mehrere dieser Dekorationen bestimmen. Trennen Sie die entsprechenden Angaben durch Leerzeichen.

Beachten Sie: Laut Spezifikation müssen Browser den Wert blink nicht unterstützen.

Hinweis

Aus Gründen der Benutzerfreundlichkeit sollten Sie auf blinkenden Text verzichten.

[Bearbeiten] CSS3

In CSS3 ist die Angabe text-decoration eine Zusammenfassung der Eigenschaften text-decoration-line, text-decoration-color und text-decoration-style.

Mit text-decoration können Sie das Aussehen einer Text-Dekoration bestimmen. Notieren Sie Angaben zur Art der Dekoration, deren Farbe und Linientyp mit Leerzeichen dazwischen.

  • CSS 3.0
  • Leer
  • Firefox
  • Leer
  • Leer
  • Safari

Details: caniuse.com

Beispiel
text-decoration: underline wavy red; 
 
/* entspricht: */
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;


Beachten Sie: Die vorgesehene Angabe blink für blinkenden Text ist obsolet - Verwenden Sie dafür CSS-animation.

[Bearbeiten] siehe auch

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML