Aquest bloc cobreix les àrees de contingut següents:
- Com aplicar la decoració de text amb Tailwind Hover, Focus i Active States?
- Aplicació de la decoració de text amb l'estat 'hover'.
- Aplicació de la decoració de text amb l'estat 'focus'.
- Aplicació de la decoració de text amb l'estat 'actiu'.
Com aplicar la decoració de text amb Tailwind Hover, Focus i Active States?
El text es pot decorar mitjançant el ' text-decoració ' propietat. Aquesta propietat es pot aplicar amb diversos estats modificadors com ara ' flotar ”, “ focus ' i ' actiu ” per decorar el text sobre l'acció de l'usuari en conseqüència.
Exemple 1: Aplicació de la decoració de text amb l'estat 'hover'.
Aquest exemple aplica el ' text-decoració ” propietat de manera que no es subratlla per defecte, sinó que es subratlla en passar el cursor del ratolí:
< html >
< cap >
< meta conjunt de caràcters = 'utf-8' >
< meta nom = 'mirador' contingut = 'amplada=amplada del dispositiu, escala inicial=1' >
< guió src = 'https://cdn.tailwindcss.com' >< / guió >< / cap >
< cos >
< àrea de text classe = 'sense subratllat hover:subratllat' > Això és Tailwind CSS < / àrea de text >
< / cos >
< / html >
D'acord amb aquestes línies de codi, especifiqueu la ruta de la CDN dins del '
Sortida
Com es veu, el ' <àrea de text> ” es subratlla amb el ratolí amb èxit.
Exemple 2: Aplicació de la decoració de text amb l'estat 'focus'.
El bloc de codi següent decora el text incloent el ' focus ' estat. Això subratlla el text (no subratllat per defecte) quan l'element es centra a través del ' Tab clau ”:
< html >
< cap >
< meta conjunt de caràcters = 'utf-8' >
< meta nom = 'mirador' contingut = 'amplada=amplada del dispositiu, escala inicial=1' >
< guió src = 'https://cdn.tailwindcss.com' >< / guió >< / cap >
< cos >
< àrea de text classe = 'enfocament sense subratllat: subratllat' >Aquest és Tailwind CSS< / àrea de text >
< / cos >
< / html >
Segons aquest codi:
- De la mateixa manera, incloeu la ruta CDN i incorporeu el ' <àrea de text> ” element.
- Després d'això, utilitzeu el ' text-decoració ” propietat que fa que el text no estigui subratllat per defecte.
- El associat ' focus A continuació, l'estat subratlla el text quan l'element es centra.
Sortida
Aquest resultat significa que el text contingut a l'element subratlla en prémer el botó “ Tab ', és a dir, centrar l'element.
Exemple 3: Aplicació de la decoració de text amb l'estat 'actiu'.
En aquest exemple, el text es pot decorar de manera que el ' a través de la línia ” la propietat s'hi aplica quan l'element està actiu:
< html >
< cap >
< meta conjunt de caràcters = 'utf-8' >
< meta nom = 'mirador' contingut = 'amplada=amplada del dispositiu, escala inicial=1' >
< guió src = 'https://cdn.tailwindcss.com' >< / guió >< / cap >
< cos >
< àrea de text classe = 'sense subratllat actiu: passant per línia' >Aquest és Tailwind CSS< / àrea de text >
< / cos >
< / html >
En aquest fragment de codi, apliqueu els passos que s'indiquen a continuació:
- Recordeu les metodologies discutides per incloure el camí CDN i el ' <àrea de text> ” element.
- Ara, apliqueu la decoració del text ' no-underline ” per defecte i assigneu el “ actiu ” estat amb “ a través de la línia ”.
- Això resulta que recorre el text contingut quan l'element està actiu.
Sortida
A partir d'aquesta sortida, es pot comprovar que el text està decorat d'acord amb l'estat aplicat adequadament.
Conclusió
El text es pot decorar mitjançant el ' text-decoració ' propietat. Aquesta propietat es pot aplicar amb el ' flotar ”, “ focus ' i ' actiu ” modificador indica per decorar el text amb el ratolí, l'element enfocat o l'element actiu, respectivament.