codestory

Die Anleitung zu CSS text-decoration

  1. CSS text-decoration
  2. CSS text-decoration-line
  3. CSS text-decoration-style
  4. CSS text-decoration-color

1. CSS text-decoration

CSS text-decoration wird benutzt um die Text-Inhalt eines Element zu verschönen. Die offizielle Syntax (formal syntax) von CSS text-decoration fördert darauf, dass Sie 3 Werten für sie angeben.
Formal Syntax
/* Formal Syntax: */
text-decoration:  <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>

/* Example: */
text-decoration: underline dotted red;
text-decoration: underline solid blue;
text-decoration: line-through solid green;
Achtung: Die Reihenfolge von (text-decoration-line, text-decoration-style, text-decoration-color) kann optional ändern.
Formal Syntax
/* Formal Syntax: */
text-decoration:  <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>
text-decoration:  <'text-decoration-line'> || <'text-decoration-color'> || <'text-decoration-style'>
text-decoration:  <'text-decoration-style'> || <'text-decoration-color'> || <'text-decoration-line'>

...
<h2 style="text-decoration: underline dotted red;">
      text-decoration: underline dotted red;
</h2>
<h2 style="text-decoration: underline solid blue;">
      text-decoration: underline solid blue;
</h2>
<h2 style="text-decoration: line-through solid green;">
      text-decoration: line-through solid green;
</h2>
CSS property
Values
text-decoration-line
  • none (Default)
  • underline
  • overline
  • line-through
text-decoration-style
  • solid (Default)
  • double
  • dotted
  • dashed
  • wavy
text-decoration-color
  • HTML Color
Sie können 1 oder 2 Werte für CSS text-decoration angeben:
<!-- text-decoration-line -->
<h2 style="text-decoration: overline;">
    text-decoration: overline;
</h2>
<!-- text-decoration-line || text-decoration-color -->
<h2 style="text-decoration: underline blue;">
    text-decoration: underline blue;
</h2>
<!-- text-decoration-line || text-decoration-style -->
<h2 style="text-decoration: line-through dashed;">
    text-decoration: line-through dashed;
</h2>
<!-- text-decoration-line || text-decoration-style || text-decoration-color -->
<h2 style="text-decoration: overline wavy green;">
    text-decoration: overline wavy green;
</h2>
Anstatt CSS text-decoration zu verwenden, können Sie 3 folgende Property zusammen verwenden:
  • CSS text-decoration-line
  • CSS text-decoration-style
  • CSS text-decoration-color
text-decoration-example2.html
<!DOCTYPE html>
<html>
   <head>
      <title>CSS text-decoration</title>
      <meta charset="UTF-8"/>
      <style>
        div {
          text-decoration-line: underline;
          text-decoration-style: wavy;
          text-decoration-color: red;
        }
      </style>
   </head>
   <body>
      <p style="font-style:italic;">
        {<br/>
          text-decoration-line: underline; <br/>
          text-decoration-style: wavy; <br/>
          text-decoration-color: red; <br/>
        }
      </p>
       <div>
           Some thing Error!
       </div>
   </body>
</html>

2. CSS text-decoration-line

CSS text-decoration-line wird benutzt um die Position dekorativer Linien für den Textinhalt eines Element festzulegen. Es kann einen der folgenden Wert bekommen:
  • none (Default)
  • underline
  • overline
  • line-through
<p style="text-decoration-line: none;">
   text-decoration-line: none;
</p>
<p style="text-decoration-line: line-through">
   text-decoration-line: line-through
</p>
<p style="text-decoration-line: underline">
   text-decoration-line: underline
</p>
<p style="text-decoration-line: overline">
   text-decoration-line: overline
</p>
CSS text-decoration-line akzeptiert einen oder vielen Werten:
<p style="text-decoration-line: line-through underline">
   text-decoration-line: line-through underline
</p>
<p style="text-decoration-line: underline overline">
   text-decoration-line: underline overline
</p> 
<p style="text-decoration-line: overline line-through underline">
   text-decoration-line: overline line-through underline
</p>

3. CSS text-decoration-style

CSS text-decoration-style wird benutzt um das Stil für die durch CSS text-decoration-line erstellten Linien festzulegen
Die möglichen Werten von CSS text-decoration-style sind:
  • solid
  • double
  • dotted
  • dashed
  • wavy
<p style="text-decoration-line:underline; text-decoration-style: solid;">
   text-decoration-style: solid;
</p>
<p style="text-decoration-line:underline; text-decoration-style: double;">
   text-decoration-style: double;
</p>
<p style="text-decoration-line:underline; text-decoration-style: dotted;">
   text-decoration-style: dotted;
</p>
<p style="text-decoration-line:underline; text-decoration-style: dashed;">
   text-decoration-style: dashed;
</p> 
<p style="text-decoration-line:underline; text-decoration-style: wavy;">
   text-decoration-style: wavy;
</p>
Achtung: Obwohl Sie einen oder vielen Werten für CSS text-decoration-line zuweisen können, können Sie aber nur einen Wert für CSS text-decoration-style zuweisen. Das heißt, dass alle dekorativen Linien für den Inhalt eines konkreten Element auch ein gleiches Stil haben.
text-decoration-style-example2.html
<!DOCTYPE html>
<html>
   <head>
      <title>CSS text-decoration-style</title>
      <meta charset="UTF-8"/>
      <style>
         p {
           font-size: 120%;
           text-decoration-line:underline overline;
           text-decoration-style: wavy;
         }
      </style>
   </head>
   <body>
     <h2>CSS text-decoration-style</h2>
      <p>
         text-decoration-line:underline overline;
         text-decoration-style: wavy;
      </p>
   </body>
</html>

4. CSS text-decoration-color

CSS text-decoration-color wird benutzt um die Farbe für die durch CSS text-decoration-line erstellten Linien festzulegen.
Der Wert von CSS text-decoration-color kann sein:
  • Der Name der Farbe, wie: red, blue, yellow, ...
  • Ein Wert GRB, wie GRB(255,255,0),..
  • Ein Wert HEX, wie #FF00FF.
  • currentColor: Die Farbe der Linie wird so gleich wie die Farbe von der Schrift des Elements sein (Text color).
  • transparent: Die transparente Farbe für die Linie einstellen.
/* <color> values */
text-decoration-color: currentColor;
text-decoration-color: red;
text-decoration-color: #00ff00;
text-decoration-color: rgba(255, 128, 128, 0.5);
text-decoration-color: transparent;

/* Global values */
text-decoration-color: inherit;
text-decoration-color: initial;
text-decoration-color: unset;
Zum Beispiel:
<p style="text-decoration-line:underline; text-decoration-color: red;">
   text-decoration-color: red;
</p>
<p style="text-decoration-line:underline; text-decoration-color: blue;">
   text-decoration-color: blue;
</p>
<p style="text-decoration-line:underline; text-decoration-color: currentColor;">
   text-decoration-color: currentColor;
</p>
Achtung: Obwohl Sie einen oder vielen Werte für CSS text-decoration-line zuweisen können, können Sie aber nur einen Wert für CSS text-decoration-color zuweisen. D.h, alle dekorativen Linien für ein konkretes Element werden eine gleiche Farbe haben.
<!DOCTYPE html>
<html>
   <head>
      <title>CSS text-decoration-color</title>
      <meta charset="UTF-8"/>
      <style>
         p {
           font-size: 120%;
           text-decoration-line:underline overline;
           text-decoration-color: blue;
         }
      </style>
   </head>
   <body>
     <h2>CSS text-decoration-color</h2>
      <p>
         text-decoration-line:underline overline;
         text-decoration-color: blue;
      </p>
   </body>
</html>

Anleitungen CSS

Show More

Neueste Artikel

Show More