Hur man applicerar hovring, fokus och aktiva tillstånd med textdekorationstjocklek i medvind

Hur Man Applicerar Hovring Fokus Och Aktiva Tillstand Med Textdekorationstjocklek I Medvind



När man skapar innehållsbaserade webbplatser krävs det ofta att programmeraren lyfter fram de viktiga terminologierna för bättre användarupplevelse och förståelse. I ett sådant fall är ' Text Dekoration Tjocklek ”-verktyget i Tailwind träder i kraft som kan införlivas på ett anpassat sätt enligt webbplatsens layout.

Denna handledning förklarar följande innehåll:

Hur applicerar man hovring, fokus och aktiva tillstånd med textdekorationstjocklek i medvind?

den ' Textdekoration Tjocklek ' kan tillämpas med dessa tillstånd genom att använda måltillståndet och ' text-dekoration-tjocklek ” egenskap följt av måltjockleksvärdet i pixlar. Integreringen av dessa tillvägagångssätt ändrar textdekorationens tjocklek (i pixlar) när du håller musen, när elementet fokuseras eller elementet är aktivt. Dessa pixlar kan vara ' 1 px ', ' 2px ', ' 4px ' eller ' 8px ”. Det är så att ju fler pixlar, desto mer blir tjockleken.





Exempel 1: Applicera textdekorationens tjocklek med 'hovring'-tillstånd

Detta exempel gäller ' text-dekoration-tjocklek ' egendom med ' sväva ” tillstånd för att ställa in tjockleken när musen svävar:





< html >

< huvud >

< meta teckenuppsättning = 'utf-8' >

< meta namn = 'viewport' innehåll = 'width=device-width, initial-scale=1' >

< manus src = 'https://cdn.tailwindcss.com' >< / manus >< / huvud >

< kropp >

< textområde klass = 'underline hover:decoration-4' > James är punktlig < / textområde >

< / kropp >

< / html >

I det här kodavsnittet, inkludera CDN-sökvägen i taggen '' för att använda Tailwind-funktionerna. Efter det, inom ' ' element, ange ' sväva ' ange tillsammans med den tillämpade ' text-dekoration-tjocklek ' egenskap som ställer in dekorationstjockleken från standardunderstrykning till en ökad tjocklek på '4' pixlar vid muspekaren.



Produktion



Denna utdata innebär att tjockleken på textdekorationen d.v.s. understrykning ställs in i enlighet därmed.



Exempel 2: Applicera textdekorationens tjocklek med 'fokus'-tillstånd

Följande exempelkod implementerar textdekorationstjockleken till ett målpixelvärde när elementet fokuseras med hjälp av ' Flik ' nyckel:



< html >

< huvud >

< meta teckenuppsättning = 'utf-8' >

< meta namn = 'viewport' innehåll = 'width=device-width, initial-scale=1' >

< manus src = 'https://cdn.tailwindcss.com' >< / manus >< / huvud >

< kropp >

< textområde klass = 'understryka dekoration-1 fokus:dekoration-4' >James är punktlig< / textområde >

< / kropp >

< / html >

I detta kodblock upprepar du de diskuterade metoderna för att införliva CDN-sökvägen och ' ' element. Ange nu standardtjockleken tillsammans med den överförda tjockleken, dvs. '4' pixlar med ' fokus ” tillstånd för att tillämpa ändringen på det utlösta tillståndet.

Notera: Standarden ' Understrykning ' och den ' understryka dekoration-1 ” fastigheter ger samma resultat.

Produktion

Från denna utdata kan det verifieras att textdekorationens tjocklek ändras i enlighet med detta.

Exempel 3: Applicera textdekorationens tjocklek med 'aktivt' tillstånd

I det här kodavsnittet ändras tjockleken på textdekorationen när elementet är aktivt:



< html >

< huvud >

< meta teckenuppsättning = 'utf-8' >

< meta namn = 'viewport' innehåll = 'width=device-width, initial-scale=1' >

< manus src = 'https://cdn.tailwindcss.com' >< / manus >< / huvud >

< kropp >

< textområde klass = 'understryka dekoration-1 aktiv:dekoration-8' >James är punktlig< / textområde >

< / kropp >

< / html >

Enligt dessa kodrader, inkorporerar på samma sätt CDN-sökvägen och '