CSS text-decoration-style-Eigenschaft

Die Eigenschaft text-decoration-style legt den Stil der Textdekoration fest. Mögliche Stile sind solid, dashed, dotted, double und wavy.

Die Eigenschaft text-decoration-style ist eine der CSS3-Eigenschaften.

Anfangswert	solid
Gilt für	Auf alle Elemente. Gilt auch für ::first-letter und ::first-line.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS3
DOM-Syntax	object.style.textDecorationStyle = "dotted";

Syntax

CSS-Werte für text-decoration-style

css

text-decoration-style: solid | double | dotted | dashed | wavy | initial | inherit;

Beispiel für die text-decoration-style-Eigenschaft:

Beispiel für text-decoration-style

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-style property example</h2>
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </body>
</html>

Try it Yourself »

Ergebnis

CSS text-decoration-style wavy

Beispiel für die text-decoration-style-Eigenschaft mit dem Wert „wavy“:

Code-Beispiel für text-decoration-style wavy

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        text-decoration-line: underline;
        text-decoration-style: wavy;
        text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-style property example</h2>
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </body>
</html>

Try it Yourself »

Beispiel für die text-decoration-style-Eigenschaft mit dem Wert „dotted“:

Code-Beispiel für text-decoration-style dotted

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        text-decoration-line: overline;
        text-decoration-style: dotted;
        text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-style property example</h2>
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </body>
</html>

Try it Yourself »

Beispiel für die text-decoration-style-Eigenschaft mit dem Wert „dashed“:

Code-Beispiel für text-decoration-style dashed

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        text-decoration-line: overline;
        text-decoration-style: dashed;
        text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-style property example</h2>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Try it Yourself »

Beispiel für die text-decoration-style-Eigenschaft mit dem Wert „double“:

Code-Beispiel für text-decoration-style double

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        text-decoration-line: overline underline;
        text-decoration-style: double;
        text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-style property example</h2>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Try it Yourself »

Beispiel für die text-decoration-style-Eigenschaft mit allen Werten:

Beispiel für text-decoration-style mit allen Werten

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        margin: 20px 0;
      }
      div.t1 {
        text-decoration-line: overline underline;
        text-decoration-style: solid;
      }
      div.t2 {
        text-decoration-line: line-through;
        text-decoration-style: wavy;
      }
      div.t3 {
        text-decoration-line: overline underline;
        text-decoration-style: double;
      }
      div.t4 {
        text-decoration-line: overline;
        text-decoration-style: dashed;
      }
      div.t5 {
        text-decoration-line: line-through;
        text-decoration-style: dotted;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-style property example</h2>
    <div class="t1">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <div class="t2">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <div class="t3">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <div class="t4">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <div class="t5">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Try it Yourself »

Werte

Wert	Beschreibung	Testen
solid	Definiert eine einzelne Linie. Dies ist der Standardwert dieser Eigenschaft.	Testen »
double	Definiert eine doppelte Linie.	Testen »
dotted	Definiert eine gepunktete Linie.	Testen »
dashed	Definiert eine gestrichelte Linie.	Testen »
wavy	Definiert eine gewellte Linie.	Testen »
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.	Testen »
inherit	Erbt die Eigenschaft vom Elternelement.

CSS text-decoration-style-Eigenschaft ​

Syntax ​

Beispiel für die text-decoration-style-Eigenschaft: ​

Ergebnis ​

Beispiel für die text-decoration-style-Eigenschaft mit dem Wert „wavy“: ​

Beispiel für die text-decoration-style-Eigenschaft mit dem Wert „dotted“: ​

Beispiel für die text-decoration-style-Eigenschaft mit dem Wert „dashed“: ​

Beispiel für die text-decoration-style-Eigenschaft mit dem Wert „double“: ​

Beispiel für die text-decoration-style-Eigenschaft mit allen Werten: ​

Werte ​

Praxis ​

CSS text-decoration-style-Eigenschaft

Syntax

Beispiel für die text-decoration-style-Eigenschaft:

Ergebnis

Beispiel für die text-decoration-style-Eigenschaft mit dem Wert „wavy“:

Beispiel für die text-decoration-style-Eigenschaft mit dem Wert „dotted“:

Beispiel für die text-decoration-style-Eigenschaft mit dem Wert „dashed“:

Beispiel für die text-decoration-style-Eigenschaft mit dem Wert „double“:

Beispiel für die text-decoration-style-Eigenschaft mit allen Werten:

Werte

Praxis