Heim > Artikel > Web-Frontend > Welche Eigenschaft wird zum Unterstreichen, Überstreichen und Durchstreichen von Text mit CSS verwendet?

Welche Eigenschaft wird zum Unterstreichen, Überstreichen und Durchstreichen von Text mit CSS verwendet?

PHPznach vorne: 2023-09-07 18:37:101688Durchsuche

哪个属性用于使用 CSS 为文本添加下划线、上划线和删除线？

In CSS wird die Eigenschaft „text-decoration“ verwendet, um dem Text Unterstreichungen, Überstreichungen und Durchstreichungen hinzuzufügen.

Text unterstreichen bedeutet, eine Linie unter dem Text zu zeichnen, und Text unterstreichen bedeutet, eine Linie über dem Text zu zeichnen. Beim Löschen von Text wird eine Linie über den Text gezogen, um anzuzeigen, dass der Text gelöscht wurde.

In diesem Tutorial lernen wir, unterschiedliche Texte mit unterschiedlichen Werten der CSS-Eigenschaft text-decoration zu formatieren.

Grammatik

text-decoration: style decoration color thickness;

Wert

Stil – Stellt den Stil dekorativer Linien dar, z. B. durchgezogene Linien, gepunktete Linien, Wellenlinien usw.
Dekoration – Es kann Text mit den Werten „Unterstreichen“, „Überstreichen“ und „Durchstreichen“ dekorieren.
Farbe – Legen Sie die Farbe der dekorativen Linien fest.
Dicke – Wird verwendet, um die Dicke der Zierlinie festzulegen.

Beispiel

Im folgenden Beispiel verwenden wir die CSS-Eigenschaft „text-decoration“, um Text zu dekorieren. Wir legen einen „durchgezogenen“ Linienstil, eine rote „Unterstreichungs“-Dekoration und eine 5-Pixel-Gewicht fest, die der Benutzer in der Ausgabe beobachten kann.

<html>
<head>
   <style>
      .text {
         font-size: 1.2rem;
         text-decoration: solid underline red 5px;
      }
   </style>
</head>
<body>
   <h3> Setting the underline to the text using the 'text-decoration' property in CSS </h3>
   <div class = "text">
      This is a text with an underline.
   </div>
</body>
</html>

Beispiel

Im Beispiel unten haben wir den Text mit einer blauen Überstreichung versehen. In der Ausgabe kann der Benutzer die blaue Linie über dem Text beobachten.

<html>
<head>
   <style>
      .text {
         font-size: 1.2rem;
         text-decoration: wavy overline blue 5px;
      }
   </style>
</head>
<body>
   <h3> Setting the <i> overline to the text </i> using the 'textdecoration' property in CSS </h3>
   <div class = "text">
      This is a text with an overline.
   </div>
</body>
</html>

Beispiel

In diesem Beispiel haben wir die CSS-Eigenschaft „text-decoration“ und den Wert „line-through“ verwendet, um Text zu löschen. In der Ausgabe kann der Benutzer die Zeilen über dem Text beobachten. Auf diese Weise können wir nachweisen, dass der Text Fehler enthält, ohne ihn zu löschen.

<html>
<head>
   <style>
      .text {
         font-size: 2rem;
         text-decoration: dotted line-through green 5px;
      }
   </style>
</head>
<body>
   <h3> Setting the <i> strickthrough to the text </i> using the 'textdecoration' property in CSS </h3>
   <div class = "text">
      This is a text with a strikethrough.
   </div>
</body>
</html>

Beispiel

In diesem Beispiel haben wir drei verschiedene div-Elemente mit unterschiedlichem Text erstellt. Wir verwenden einen anderen dekorativen Stil für den Text jedes div-Elements. In der Ausgabe kann der Benutzer den Unterschied zwischen den Textdekorationsstilen „Unterstreichen“, „Überstreichen“ und „Thread“ erkennen.

<html>
<head>
   <style>
      .underline {
         color: grey;
         text-decoration: solid underline yellow 2px;
         font-size: 1.5rem;
      }
      .overline {
         text-decoration: solid overline yellow 3px;
         font-size: 1.5rem;
      }
      .strikethrough {
         text-decoration: solid line-through yellow 2px;
         font-size: 1.5rem;
      }
   </style>
</head>
<body>
   <h3> Setting the strikethrough, underline, and overline to the text using the 'text-decoration' property in CSS </h3>
   <div class = "underline"> underline </div>
   <div class = "overline"> overline </div>
   <div class = "strikethrough"> strike through </div>
</body>
</html>

Fazit

In diesem Tutorial lernen Benutzer, wie sie Text mithilfe der CSS-Eigenschaft „text-decoration“ dekorieren. Benutzer können den Text je nach Bedarf mit unterschiedlichen Werten unterschiedlich dekorieren.

Das obige ist der detaillierte Inhalt vonWelche Eigenschaft wird zum Unterstreichen, Überstreichen und Durchstreichen von Text mit CSS verwendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Legen Sie den linken Tooltip mit CSS festNächster Artikel：Legen Sie den linken Tooltip mit CSS fest

In Verbindung stehende Artikel

Mehr sehen