Vídeo: Curso de HTML e CSS - Z-index [Aula 24] 2025
Um dos usos mais comuns dos estilos compostos de folhas de estilo em cascata (CSS) é criar hiperlinks personalizados com pseudo-classes, que podem ser usados para modificar a cor e atributos padrão de hiperlinks.
O estilo de pseudo-classe do composto de hiperlink pode ser escrito como um seletor de duas partes onde a marca de âncora é separada por dois pontos seguido pelo nome do estado do link, como em um: link, a: visitado, a: pairar, e a: ativo.
A aparência de um hiperlink é determinada pela interatividade de um visitante com ele em um navegador:
-
Links normais são links não visitados.
-
Os links visitados são links que o visitante já clicou.
-
Links para o mouse mudam de aparência quando um visitante passa o cursor sobre eles.
-
Links ativos alteram sua aparência apenas quando um visitante clica diretamente em um link, antes de soltar o botão do mouse.
Como você pode saber, todos os hiperlinks por padrão exibem em texto sublinhado azul (link não visitado) ou texto sublinhado roxo (links visitados). Como essas cores não são susceptíveis de combinar as cores específicas no design do seu site, você pode substituir os estilos de link padrão criando estilos de hiperlink personalizados.
Ainda melhor, além dos estados de hiperlinks não visitados e visitados, com CSS, você pode adicionar estilos para dois estados de hiperlink adicionais, ou seja, o estado de deslocamento, que ocorre quando um visitante mouses em um link e o estado ativo, que aparece quando um visitante clica em um link.
Para alterar apenas a cor de um hiperlink para todos os quatro estados de link, adicione as seguintes definições de estilo ao seu CSS, substituindo os valores hexadecimais neste exemplo com os valores de cor desejados para cada um dos estilos de link:
a: link {cor: # CC0000;} a: visitado {cor: # 339933;} a: hover {color: # 000000;} a: ativo {cor: # 99CC33;}
Para continuar a fazer coisas interessantes, você pode adicionar declarações de estilo adicionais para qualquer um dos ou todos os quatro estados de ligação. Por exemplo, você pode querer remover o sublinhado, adicionar uma cor de fundo ou aplicar uma borda pontilhada ao redor do hiperlink, conforme demonstrado aqui e mostrado abaixo:
a: link {cor: # CC0000;} a: visitado {cor: # 339933; text-decoration: none;} a: hover {color: # 000000; background-color: # 0CC;} a: ativo {cor: #ffffff; text-decoration: none; borda: 2px pontilhada #CCC; background-color: # 000;}
Ao criar esses estilos de link, você deve ter cuidado para que cada estilo seja adicionado ao CSS na mesma ordem em que será experimentado em um site por um visitante do site: link, visitado, hover, ativo.
Se os estilos forem adicionados ao CSS fora de ordem, os estilos do link podem não funcionar corretamente quando visualizados em um navegador. Portanto, tenha o hábito de criar primeiro o estado do link normal, depois adicione o estado visitado, seguido do estado do deslocamento e, finalmente, do estado ativo, como mostrado no exemplo anterior.
