De voor de gebruiker aantrekkelijke websites vereisen vaak dat er van tijd tot tijd meerdere stijlmethoden worden toegevoegd. In dergelijke situaties kan de styling van tekstdecoratie op meerdere manieren worden uitgevoerd op basis van verschillende waarden volgens de vereisten om de site te laten opvallen.
Deze blog behandelt de volgende inhoudsgebieden:
Hoe stel ik de tekstdecoratiestijl in Tailwind CSS in?
De tekststijl kan worden ingesteld en gedecoreerd met behulp van de “ tekst-decoratie-stijl pand toegewezen met verschillende stylingwaarden.
Eigenschappen van tekstdecoratiestijl
| Klas | Eigenschappen |
| decoratie-massief | tekstdecoratiestijl: effen; |
| decoratie-dubbel | tekstdecoratiestijl: dubbel; |
| decoratie-golvend | tekstdecoratiestijl: golvend; |
| decoratie-onderbroken | tekstdecoratiestijl: gestippeld; |
| decoratie-gestippeld | tekstdecoratiestijl: gestippeld; |
Voorbeeld: de tekstdecoratiestijl instellen in Tailwind CSS
Dit voorbeeld maakt gebruik van de hierboven besproken “ tekst-decoratie-stijl ”eigenschap met alle waarden om de alineatekst op te maken:
DOCTYPEhtml >< html >
< hoofd >
< meta tekenset = 'utf-8' >
< meta naam = 'uitkijk postje' inhoud = 'breedte=apparaatbreedte, initiële schaal=1' >
< script src = 'https://cdn.tailwindcss.com' > script >
hoofd >
< lichaam >
< div >
< P klas = 'onderstrepen decoratie-effen...' > Dit is de Linuxhint-website P >
< P klas = 'onderstrepen decoratie-dubbel...' > Dit is de Linuxhint-website P >
< P klas = 'onderstrepen decoratie-golvend...' > Dit is de Linuxhint-website P >
< P klas = 'Onderstreep decoratie-onderbroken...' > Dit is de Linuxhint-website P >
< P klas = 'onderstrepen decoratie-gestippeld...' > Dit is de Linuxhint-website P >
div >
lichaam >
html >
Voer op basis van deze code de volgende stappen uit:
-
- Voeg de gegeven “ CDN ” pad binnen de “
”-tag om de Tailwind-functionaliteiten toe te passen. - Maak nu vier alinea’s met behulp van de “ '-tag met daarin de ' tekstdecoratie ”eigenschap toegewezen met een andere waarde in elk geval, zoals besproken.
- Hierdoor wordt de tekst onderstreept met ononderbroken, dubbele, golvende, stippellijnen en stippellijnen.
- Voeg de gegeven “ CDN ” pad binnen de “
Uitvoer
Op basis van deze uitkomst wordt geverifieerd dat de tekst dienovereenkomstig is ingericht.
Conclusie
De tekststijl kan worden ingesteld en gedecoreerd met behulp van de “ tekst-decoratie-stijl pand toegewezen met verschillende stylingwaarden. Deze waarden omvatten effen, dubbel, golvend, gestippeld en gestippeld. Deze blog ging helemaal over het instellen van de tekstdecoratiestijl met behulp van Tailwind CSS.