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.

CSS1, CSS2, CSS2.1[Bearbeiten]

Mit text-decoration können Sie eine zusätzliche Textausschmückung festlegen.

  • CSS 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Folgende Angaben sind möglich:

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


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.

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.

CSS3[Bearbeiten]

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

Notieren Sie Angaben zur Art der Dekoration, deren Farbe und Linientyp mit Leerzeichen dazwischen.

  • CSS 3.0
  • Chrome
  • Firefox
  • Leer
  • Opera
  • 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.

siehe auch[Bearbeiten]