Den här bloggen täcker följande innehållsområden:
- Hur applicerar man textdekoration med medvindssvävning, fokus och aktiva tillstånd?
- Applicera textdekoration med 'hovring'-tillståndet.
- Applicera textdekoration med 'fokus'-tillståndet.
- Applicera textdekoration med det 'aktiva' tillståndet.
Hur applicerar man textdekoration med medvindssvävning, fokus och aktiva tillstånd?
Texten kan dekoreras via ' text-dekoration ' fast egendom. Den här egenskapen kan appliceras med olika modifieringstillstånd som ' sväva ', ' fokus ' och ' aktiva ” för att dekorera texten på användaråtgärden i enlighet med detta.
Exempel 1: Applicera textdekoration med 'hovring'-tillståndet
Detta exempel gäller ' text-dekoration ” egenskap så att den inte är understruken som standard utan blir understruken när du håller musen:
< 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 = 'no-underline hover:underline' > Detta är Tailwind CSS < / textområde >
< / kropp >
< / html >
Enligt dessa kodrader, ange CDN-sökvägen inom '
Produktion
Som sett, '
Exempel 2: Applicera textdekoration med 'fokus'-tillståndet
Följande kodblock dekorerar texten genom att inkludera ' fokus ' stat. Detta understryker texten (inte understruken som standard) när elementet blir fokuserat via ' 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 = 'no-underline focus:underline' >Detta är Tailwind CSS< / textområde >
< / kropp >
< / html >
Enligt denna kod:
- På samma sätt, inkludera CDN-sökvägen och införliva '
' element. - Efter det, använd ' text-dekoration ” egenskap som gör att texten inte är understruken som standard.
- Den associerade ' fokus ” state understryker sedan texten när elementet blir fokuserat.
Produktion
Detta resultat betyder att texten i elementet understryker när du trycker på ' Flik ”-tangenten, dvs att fokusera på elementet.
Exempel 3: Applicera textdekoration med det 'aktiva' tillståndet
I det här exemplet kan texten dekoreras så att ' Linje genom ”-egenskapen tillämpas på den 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 = 'no-underline active:line-through' >Detta är Tailwind CSS< / textområde >
< / kropp >
< / html >
I detta kodavsnitt tillämpar du stegen nedan:
- Kom ihåg de diskuterade metoderna för att inkludera CDN-vägen och '
' element. - Applicera nu textdekorationen ' ingen understrykning ' egenskap som standard och allokera ' aktiva ' ange med ' Linje genom ”.
- Detta leder till följd av den inneslutna texten när elementet är aktivt.
Produktion
Från denna utdata kan det verifieras att texten är dekorerad i enlighet med det applicerade tillståndet på lämpligt sätt.
Slutsats
Texten kan dekoreras via ' text-dekoration ' fast egendom. Den här egenskapen kan appliceras med ' sväva ', ' fokus ' och ' aktiva ” modifieringstillstånd för att dekorera texten när du håller musen, elementet är fokuserat eller elementet är aktivt.