Depois de ter algum estilo indo em suas páginas da web HTML5 e CSS3, você pode ser um pouco preocupado sobre como ligações feias são. Os estilos de link padrão são úteis, mas eles podem não se encaixar com o seu esquema de cores.

Como estilo de um link padrão

Adicionando um estilo para um link é fácil. Depois de tudo, (O tag que define links) é apenas uma tag HTML, e você pode adicionar um estilo a qualquer tag. Aqui está um exemplo, onde as ligações são pretos com um fundo amarelo:

a {color: black-background-color: amarelo-}

Isso funciona bem, mas as ligações são um pouco mais complexa do que alguns outros elementos. Ligações realmente tem três afirma:

• Normal: Este é o estado padrão. Sem CSS acrescentou, a maioria dos navegadores exibir links não visitados como texto sublinhado azul.

  Video: Curso de CSS - Aula 4 (Links e Div's)

• Visitado: Este estado é ativado quando o usuário visita um link e retorna para a página atual. A maioria dos navegadores usam um estilo sublinhado roxo para indicar que um link foi visitado.

• Flutuar: O estado de foco é ativado quando o mouse do usuário é persistente sobre o elemento. A maioria dos navegadores não usar o estado de foco em suas configurações padrão.

Se você aplicar um estilo para o tags em uma página, o estilo é aplicado a todos os estados de todas as âncoras.

Como o estilo de estados de link

Você pode aplicar um estilo diferente para cada estado. Neste exemplo, os links são em preto sobre fundo branco. Um link visitado é preto sobre amarelo-e, se o mouse está pairando sobre um link, o link é branco com um fundo preto.

Dê uma olhada no código e ver como é feito:

Pseudo-classes e links
Este link é normal


Este link foi visto
O mouse está pairando sobre este link
Video: HTML and CSS Tutorial 10 : Link hover, focus, visited, and active selectors

Nada é especial sobre as ligações na parte HTML do código. Os links mudam seu estado dinamicamente enquanto o usuário interage com a página. A folha de estilo determina o que acontece nos vários estados. Veja como você aborda colocar o código em conjunto:

1. Determine o estilo de link comum primeira, fazendo um estilo para o tag.

   Se você não definir quaisquer outros pseudo-classes, todos os links seguirá o estilo de link comum.

2. Faça um estilo para links visitados.

   Um link vai usar esse estilo depois que o site é visitado durante a sessão atual do navegador. o a: visited selector indica links que foram visitados.

3. Fazer um estilo para links pairava.

   o a: hover estilo é aplicado ao link somente quando o mouse está pairando sobre o link. Assim que o mouse deixa o link, o estilo reverte para o estilo padrão ou visitou, conforme o caso.

Melhores práticas de link

estilos de link tem algumas características especiais. Você precisa ser um pouco cuidadoso como você aplicar estilos para links. Considere as seguintes questões ao aplicar estilos para links:

• A ordem é importante. Certifique-se de definir a âncora comum em primeiro lugar. As pseudo-classes são baseados no estilo âncora padrão.

• Certifique-se de que eles ainda olhar como links. É importante que os usuários saibam algo se destina a ser um link. Se você tirar o sublinhado ea cor que normalmente indica um link, os usuários podem ser confusos. Geralmente, você pode alterar cores sem problemas, mas as ligações devem ser texto sublinhado ou algo que claramente parece um botão.

• Teste de links visitados. Testando links visitados é um pouco complicado, porque, depois de visitar um link, ele permanece visitado. A maioria dos navegadores permite que você excluir o histórico do navegador, que também deve limpar os estados de ligação para unvisited.

• Não altere o tamanho da fonte em um estado hover. Hover altera a página em tempo real. Um estilo em foco com um tamanho de fonte diferente do que a ligação comum pode causar problemas. A página é reformatado para aceitar a fonte maior, que pode mover uma grande quantidade de texto na tela rapidamente. É mais seguro para alterar as cores ou bordas em foco, mas não o tamanho da família fonte ou fonte.