Heim >Web-Frontend >CSS-Tutorial >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:101774Durchsuche
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!