Hover-, focus- en actieve statussen toepassen met tekstdecoratiedikte in de rugwind

Hover Focus En Actieve Statussen Toepassen Met Tekstdecoratiedikte In De Rugwind



Bij het maken van op inhoud gebaseerde sites is het vaak een vereiste dat de programmeur de essentiële terminologieën benadrukt voor een betere gebruikerservaring en begrip. In een dergelijk geval zal de “ Dikte van tekstdecoratie ”-hulpprogramma in Tailwind wordt van kracht en kan op een aangepaste manier worden opgenomen volgens de lay-out van de site.

In deze zelfstudie wordt de volgende inhoud uitgelegd:

Hoe kun je hover-, focus- en actieve statussen toepassen met de dikte van de tekstdecoratie in de rugwind?

De ' Tekstdecoratie Dikte ' kan op deze staten worden toegepast door gebruik te maken van de doelstaat en de ' tekst-decoratie-dikte ”eigenschap gevolgd door de waarde van de doeldikte in pixels. De integratie van deze benaderingen verandert de dikte van de tekstversiering (in pixels) wanneer de muis beweegt, wanneer het element wordt gefocust of wanneer het element actief is. Deze pixels kunnen “ 1px ', ' 2px ', ' 4px ' of ' 8px ”. Het is zo dat hoe meer pixels, hoe groter de dikte.





Voorbeeld 1: De dikte van de tekstdecoratie toepassen met de “hover”-status

In dit voorbeeld wordt de “ tekst-decoratie-dikte ” eigendom met de “ zweven ” staat om de dikte in te stellen wanneer 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 = 'onderstrepen hover:decoratie-4' > James is punctueel < / tekstgebied >

< / lichaam >

< / html >

Neem in dit codefragment het CDN-pad op in de tag “” om gebruik te maken van de Tailwind-functionaliteiten. Daarna zal binnen de “ ”-element, specificeer het “ zweven ” vermeld samen met de toegepaste “ tekst-decoratie-dikte ”-eigenschap die de decoratiedikte instelt van de standaard onderstreping naar een grotere dikte van “4” pixels bij het bewegen met de muis.



Uitvoer



Deze uitvoer houdt in dat de dikte van de tekstversiering, d.w.z. de onderstreping, dienovereenkomstig wordt ingesteld.



Voorbeeld 2: De dikte van de tekstdecoratie toepassen met de status “focus”.

De volgende voorbeeldcode implementeert de dikte van de tekstdecoratie naar een doelpixelwaarde zodra het element wordt gefocust met behulp van 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 = 'onderstreep decoratie-1 focus:decoratie-4' >James is punctueel< / tekstgebied >

< / lichaam >

< / html >

Herhaal in dit codeblok de besproken benaderingen voor het opnemen van het CDN-pad en de “ ”-element. Specificeer nu de standaarddikte samen met de overgangsdikte, d.w.z. “4” pixels met de “ focus ”-status om de wijziging toe te passen op de geactiveerde status.

Opmerking: De standaard ' onderstrepen ' en de ' decoratie onderstrepen-1 ” eigenschappen leveren hetzelfde resultaat op.

Uitvoer

Op basis van deze uitvoer kan worden geverifieerd dat de dikte van de tekstdecoratie dienovereenkomstig wordt aangepast.

Voorbeeld 3: De dikte van de tekstdecoratie toepassen met de status “actief”.

In dit codefragment wordt de dikte van de tekstdecoratie gewijzigd 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 = 'decoratie-1 onderstrepen actief:decoratie-8' >James is punctueel< / tekstgebied >

< / lichaam >

< / html >

Volgens deze coderegels bevatten ook het CDN-pad en het “