Como criar Styles hiperlink com pseudo-classes em Cascading Style Sheets (CSS)

Um dos usos mais comuns de os 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 estilo de pseudo-classe de compostos hyperlink pode ser escrito como um seletor de duas partes, onde a marca de âncora é separados por dois pontos, seguido do nome do estado link, como em a: link, a: visited, a: hover, e a: active.

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 (link 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, o 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 cor desejados para cada um dos estilos de link:

a: link {color: # CC0000-} a: visited {color: # 339933-} a: hover {color: # 000000-} a: active {color: # 99CC33-}

Para tornar ainda mais as coisas interessante, 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, adicionar uma cor de fundo, ou aplicar uma borda pontilhada ao redor do hyperlink, como demonstrado aqui e mostrado abaixo:

image0.jpg
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 à 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 à 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.

Semelhante

menu