Formatação dos links

Calendário de artigos

< Fevereiro 2007 >
S T Q Q S S D
voltar ao mês actual
A carregar
      01 02 03 04
05 06 07 08 09 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28        

Normalmente é importante que o visitante no site consiga distinguir os links do texto normal, assim como um bom aspecto neles para além do normal azul para os links não visitantes e a espécie de lilás para os que já foram visitados, apesar de não ser muito bom também fugir a essas cores pois pode tornar dificil a distinção. Uma sugestão é manter o underline nos links e jogar com as cores.

Aqui fica um exemplo possível para os links, isto deve ser colocado num ficheiro .css.

  1. a:link {
  2. color: #00ffcc;
  3. text-decoration: underline;
  4. font-weight: bold;
  5. }
  6. a:hover {
  7. color: #ffcc00;
  8. text-decoration: none;
  9. font-weight: bold;
  10. }
  11. a:active {
  12. color: #ff33ff;
  13. text-decoration: underline;
  14. font-weight: bold;
  15. }
  16. a:visited {
  17. color: #ff0000;
  18. text-decoration: underline;
  19. font-weight: bold;
  20. }

Se tivessemos alguma declaração igual para algum selector poderiamos agrupá-los, por exemplo:

  1. a:link, a:active, a:visited {
  2. color: #00ffcc;
  3. text-decoration: underline;
  4. font-weight: bold;
  5. }
  6. a:hover {
  7. color: #ffcc00;
  8. text-decoration: none;
  9. font-weight: bold;
  10. }
  • a:link - link novo que ainda não foi visitado
  • a:hover - quando o rato está por cima do link
  • a:active - quando o rato clicou no link
  • a:visited - quando já visitamos o site do link

Comentários