Die für den Benutzer attraktiven Websites erfordern häufig die Hinzufügung mehrerer Styling-Methoden von Zeit zu Zeit. In solchen Situationen kann die Gestaltung der Textdekoration auf unterschiedliche Weise erfolgen, basierend auf unterschiedlichen Werten und den Anforderungen, um die Website hervorzuheben.
Dieser Blog wird die folgenden Inhaltsbereiche abdecken:
Wie lege ich den Textdekorationsstil in Tailwind CSS fest?
Der Textstil kann mit Hilfe der „ Textdekorationsstil ”-Eigenschaft mit unterschiedlichen Stilwerten zugewiesen.
Eigenschaften des Textdekorationsstils
| Klasse | Eigenschaften |
| Dekorationsfest | Textdekorationsstil: solide; |
| Deko-Doppel | Textdekorationsstil: doppelt; |
| Dekoration-wellig | Textdekorationsstil: wellig; |
| Dekoration-gestrichelt | Textdekorationsstil: gestrichelt; |
| dekorpunktiert | Textdekorationsstil: gepunktet; |
Beispiel: Festlegen des Textdekorationsstils in Tailwind CSS
Dieses Beispiel verwendet das oben besprochene „ Textdekorationsstil ”-Eigenschaft mit allen Werten zum Formatieren des Absatztextes:
DOCTYPE html >< html >
< Kopf >
< Meta Zeichensatz = „utf-8“ >
< Meta Name = „Ansichtsfenster“ Inhalt = „width=device-width, initial-scale=1“ >
< Skript src = „https://cdn.tailwindcss.com“ > Skript >
Kopf >
< Körper >
< div >
< P Klasse = „unterstreichen Dekoration-solide …“ > Dies ist die Linuxhint-Website P >
< P Klasse = „Dekoration unterstreichen-doppelt …“ > Dies ist die Linuxhint-Website P >
< P Klasse = 'Unterstreichungsdekoration-wellig ...' > Dies ist die Linuxhint-Website P >
< P Klasse = „Dekoration unterstreichen-gestrichelt …“ > Dies ist die Linuxhint-Website P >
< P Klasse = „unterstreichen, dekorativ gepunktet …“ > Dies ist die Linuxhint-Website P >
div >
Körper >
html >
Führen Sie basierend auf diesem Code die folgenden Schritte aus:
-
- Fügen Sie das angegebene „ CDN ” Pfad innerhalb der „
”-Tag, um die Tailwind-Funktionen anzuwenden. - Erstellen Sie nun vier Absätze mit dem „ ”-Tag mit dem Text „ Textdekoration ”-Eigenschaft wird jeweils ein anderer Wert zugewiesen, wie besprochen.
- Dadurch wird der Text mit durchgezogenen, doppelten, gewellten, gestrichelten und gepunkteten Linien unterstrichen.
- Fügen Sie das angegebene „ CDN ” Pfad innerhalb der „
Ausgabe
Anhand dieses Ergebnisses wird bestätigt, dass der Text entsprechend dekoriert wurde.
Abschluss
Der Textstil kann mit Hilfe der „ Textdekorationsstil ”-Eigenschaft mit unterschiedlichen Stilwerten zugewiesen. Zu diesen Werten gehören durchgezogen, doppelt, gewellt, gestrichelt und gepunktet. In diesem Blog ging es darum, den Textdekorationsstil mithilfe von Tailwind CSS festzulegen.