Como criar estilos de hiperlink com pseudo-classes em folhas de estilo em cascata (css)
Um dos usos mais comuns dos estilos de compostos de Cascading Style Sheets (CSS) é criar hiperlinks personalizados com pseudo-classes, que podem ser usados para modificar a cor e os atributos de hiperlinks padrão.
O modelo de pseudo-classe composto hiperligação pode ser escrito como um selector de duas partes onde a marca de âncora está separado por dois pontos, seguido pelo nome do estado de ligação, como em a: link, a: visited, a: hover, e um: activa.
A aparência de um hiperlink é determinado pela interatividade do visitante com ele em um navegador:
ligações normais são links não visitados.
links visitados são links que o visitante já clicou.
ligações Hover mudar sua aparência quando um visitante passa o cursor sobre elas.
links ativos mudar sua aparência apenas como um visitante clica diretamente em um link, antes de soltar o botão do mouse.
Como você bem sabe, todos os hiperlinks de exibição padrão em qualquer texto azul sublinhado (ligação não visitado) ou texto sublinhado púrpura (links visitados). Porque estas cores não são susceptíveis de corresponder as cores particulares no design do seu site, você pode substituir os estilos de link padrão criando estilos personalizados de hiperlink.
Mesmo melhor, além dos estados de hiperlink não visitados e visitados, com CSS, você pode adicionar estilos para dois estados hiperlink adicionais, ou seja, o estado de foco, que ocorre quando um mouses visitante através de uma ligação, e o estado ativo, que aparece quando um visitante clica em um link.
Para alterar apenas a cor de uma hiperligação para todos os quatro estados da ligação, adicione as seguintes definições de estilo para o seu CSS, substituindo os valores hexadecimais neste exemplo com os seus valores de cores desejadas para cada um dos estilos de link:
a: link {color: # CC0000-} a: visited {color: # 339933-} a: hover {color: # 000000-} a: active {color: # 99CC33-}Video: Tutorial XHTML y CSS - 42 - Pseudo-Elemento
Para tornar ainda mais as coisas interessantes, você pode adicionar declarações de estilo adicionais para qualquer um ou todos os quatro estados da ligação. Por exemplo, você pode querer remover o sublinhado, adicione uma cor de fundo, ou aplicar uma borda pontilhada ao redor do hyperlink, como demonstrado aqui e mostrado abaixo:
a: link {color: # CC0000-} a: visited {color: # 339933-text-decoration: none;} a: hover {color: # 000000-background-color: # 0CC-} a: active {color: # ffffff-text-decoration: none; border: 2px pontilhada # CCC-background-color: # 000-}Ao criar esses estilos de link, você deve tomar cuidado para que cada estilo é adicionado ao CSS na mesma ordem que vai ser experimentado em um site por um visitante do site: link, visitou, em foco, ativo.
Se os estilos são adicionados ao CSS fora de ordem, os estilos de link pode não funcionar corretamente quando visualizados em um navegador. Portanto, obter o hábito de criar o estado link normal em primeiro lugar, em seguida, adicione o estado visitou seguido pelo estado de foco, e, finalmente, o estado ativo, como mostrado no exemplo anterior.