Deze blog behandelt de onderstaande inhoudsgebieden:
- Hoe tekstdecoratie toepassen met Tailwind Hover, Focus en Active States?
- Tekstdecoratie toepassen met de “hover”-status.
- Tekstdecoratie toepassen met de status “focus”.
- Tekstdecoratie toepassen met de “actieve” status.
Hoe tekstdecoratie toepassen met Tailwind Hover, Focus en Active States?
De tekst kan worden versierd via de “ tekstdecoratie ' eigendom. Deze eigenschap kan worden toegepast met verschillende modificatiestatussen, zoals “ zweven ', ' focus ' En ' actief ” om de tekst dienovereenkomstig te versieren op basis van de gebruikersactie.
Voorbeeld 1: Tekstdecoratie toepassen met de “hover”-status
In dit voorbeeld wordt de “ tekstdecoratie ” zodanig dat deze niet standaard wordt onderstreept, maar wordt onderstreept wanneer u met de muis beweegt:
< 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 >
< tekstgebied klas = 'geen onderstreping hover:onderstrepen' > Dit is Tailwind-CSS < / tekstgebied >
< / lichaam >
< / html >
Specificeer volgens deze coderegels het CDN-pad binnen de “
Uitvoer
Zoals te zien is de “
Voorbeeld 2: Tekstdecoratie toepassen met de status “focus”.
Het volgende codeblok verfraait de tekst door de “ focus ' staat. Dit onderstreept de tekst (standaard niet onderstreept) zodra het element wordt gefocust via de “ Tab ' sleutel:
< 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 >
< tekstgebied klas = 'focus zonder onderstreping: onderstrepen' >Dit is Tailwind CSS< / tekstgebied >
< / lichaam >
< / html >
Volgens deze code:
- Neem op dezelfde manier het CDN-pad op en neem de “
”-element. - Gebruik daarna de “ tekstdecoratie ”-eigenschap die ervoor zorgt dat de tekst standaard niet onderstreept wordt.
- De bijbehorende ' focus ' staat onderstreept vervolgens de tekst wanneer het element wordt gefocust.
Uitvoer
Deze uitkomst betekent dat de tekst in het element onderstreept wanneer u op de knop “ Tab '-toets, d.w.z. het element gefocust krijgen.
Voorbeeld 3: Tekstdecoratie toepassen met de “actieve” status
In dit voorbeeld kan de tekst zo worden versierd dat de tekst “ lijn door De eigenschap wordt erop toegepast zodra het element actief is:
< 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 >
< tekstgebied klas = 'geen onderstreping actief: doorlijn' >Dit is Tailwind CSS< / tekstgebied >
< / lichaam >
< / html >
Voer in dit codefragment de onderstaande stappen uit:
- Denk aan de besproken methodologieën voor het opnemen van het CDN-pad en de “
”-element. - Breng nu de tekstversiering “ geen-onderstreping ” standaard de eigenschap en wijs de “ actief 'staat met' lijn door ”.
- Dit resulteert in een lijn door de ingesloten tekst zodra het element actief is.
Uitvoer
Op basis van deze uitvoer kan worden geverifieerd dat de tekst op de juiste wijze is gedecoreerd in overeenstemming met de toegepaste staat.
Conclusie
De tekst kan worden versierd via de “ tekstdecoratie ' eigendom. Deze eigenschap kan worden toegepast met de “ zweven ', ' focus ' En ' actief '-modifier geeft aan dat de tekst moet worden versierd wanneer de muis beweegt, waarbij het element wordt gefocust of het element actief is.