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. Afinal de contas, (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.

• 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 as tags em uma página, o estilo é aplicado a todos os estados de todas as âncoras.

Como o estilo dos estados de ligação

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 visitado
O mouse está pairando sobre este link

Nada é especial sobre as ligações na parte HTML do código. Os links mudam o 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 a colocar o código em conjunto:

1. Determine o estilo de link ordinário 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 rato pairar sobre o link. Assim que o rato deixa a ligação, o estilo reverte para o estilo padrão ou visitado, conforme apropriado.

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 baseadas no estilo de âncora padrão.

• Certifique-se de que eles ainda olhar como links. É importante que os usuários saibam algo está destinado a ser um link. Se você tirar o sublinhado ea cor que normalmente indica um link, os usuários podem ser confundidas. 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 permitem apagar 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 de foco com um tamanho de fonte diferente do que a ligação comum pode causar problemas. A página é reformatado para aceitar o tipo de letra 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.