Este blog cobre as áreas de conteúdo abaixo:
- Como aplicar decoração de texto com Tailwind Hover, Focus e Active States?
- Aplicando Decoração de Texto com o Estado “hover”.
- Aplicando Decoração de Texto com o Estado “foco”.
- Aplicando Decoração de Texto com o Estado “ativo”.
Como aplicar decoração de texto com Tailwind Hover, Focus e Active States?
O texto pode ser decorado através do “ decoração de texto ' propriedade. Esta propriedade pode ser aplicada com vários estados modificadores, como “ flutuar ',' foco ' e ' ativo ”Para decorar o texto de acordo com a ação do usuário.
Exemplo 1: Aplicando decoração de texto com o estado “hover”
Este exemplo aplica o “ decoração de texto ”propriedade tal que não é sublinhada por padrão, mas fica sublinhada ao passar o mouse:
< HTML >
< cabeça >
< meta conjunto de caracteres = 'utf-8' >
< meta nome = 'janela de exibição' contente = 'largura=largura do dispositivo, escala inicial=1' >
< roteiro fonte = 'https://cdn.tailwindcss.com' >< / roteiro >< / cabeça >
< corpo >
< área de texto aula = 'sem sublinhado pairar: sublinhado' > Este é Tailwind CSS < / área de texto >
< / corpo >
< / HTML >
De acordo com essas linhas de código, especifique o caminho CDN dentro do “
Saída
Como visto, o “ <área de texto> ”O elemento é sublinhado ao passar o mouse com sucesso.
Exemplo 2: Aplicando Decoração de Texto com o Estado “foco”
O bloco de código a seguir decora o texto incluindo o “ foco ' estado. Isso sublinha o texto (não sublinhado por padrão) quando o elemento é focado por meio do “ Aba ' chave:
< HTML >
< cabeça >
< meta conjunto de caracteres = 'utf-8' >
< meta nome = 'janela de exibição' contente = 'largura=largura do dispositivo, escala inicial=1' >
< roteiro fonte = 'https://cdn.tailwindcss.com' >< / roteiro >< / cabeça >
< corpo >
< área de texto aula = 'foco sem sublinhado: sublinhado' >Este é o Tailwind CSS< / área de texto >
< / corpo >
< / HTML >
De acordo com este código:
- Da mesma forma, inclua o caminho CDN e incorpore o “ <área de texto> ' elemento.
- Depois disso, utilize o “ decoração de texto ”Propriedade que faz com que o texto não seja sublinhado por padrão.
- O associado ' foco ”estado então sublinha o texto no elemento que está sendo focado.
Saída
Este resultado significa que o texto contido no elemento é sublinhado ao pressionar o botão “ Aba ”Chave, ou seja, focar o elemento.
Exemplo 3: Aplicando Decoração de Texto com o Estado “ativo”
Neste exemplo, o texto pode ser decorado de forma que o “ passagem de linha ”A propriedade é aplicada a ele quando o elemento está ativo:
< HTML >
< cabeça >
< meta conjunto de caracteres = 'utf-8' >
< meta nome = 'janela de exibição' contente = 'largura=largura do dispositivo, escala inicial=1' >
< roteiro fonte = 'https://cdn.tailwindcss.com' >< / roteiro >< / cabeça >
< corpo >
< área de texto aula = 'sem sublinhado ativo:line-through' >Este é o Tailwind CSS< / área de texto >
< / corpo >
< / HTML >
Neste trecho de código, aplique as etapas fornecidas abaixo:
- Lembre-se das metodologias discutidas para incluir o caminho CDN e o “ <área de texto> ' elemento.
- Agora, aplique a decoração de texto “ sem sublinhado ”Propriedade por padrão e alocar o“ ativo ”estado com“ passagem de linha ”.
- Isso resulta em linhas através do texto contido no elemento que está ativo.
Saída
A partir desta saída, pode-se verificar que o texto está decorado de forma adequada de acordo com o estado aplicado.
Conclusão
O texto pode ser decorado através do “ decoração de texto ' propriedade. Esta propriedade pode ser aplicada com o “ flutuar ',' foco ' e ' ativo ”O modificador indica para decorar o texto ao passar o mouse, o elemento sendo focado ou o elemento sendo ativo, respectivamente.