:: CSS desde o início ::

Autor: Joe Gillespie
URL do original: http://www.wpdfd.com/editorial/basics/index.html
Título original: CSS from the Ground Up
Traduzido com autorização expressa do autor

Etapa número 6 - Links

Na abreviatura HTML é de especial significado as letras HT para Hiper Texto (HyperText). Links em palavras, frases ou imagens de uma página podem ser clicados para nos levar a outros lugares. Estes outros lugares são chamados de "âncoras". Imagine navios ancorados no imenso mar que é a World Wide Web formando uma cadeia composta de links conduzindo às âncoras do navio no fundo do mar. Os navios estão ancorados em pontos específicos e não à deriva, o que facilita sua localização.

Cada página tem pelo menos uma âncora. Por padrão, está âncora localiza-se no topo da página, mas você poderá iserir mais âncoras em qualquer lugar da página que precisar chegar por um link.

  <a href="http://www.wpdfd.com/index.htm">
  Este é um link para o topo da minha Home Page</a>

Assim, você tem um par de tags <a>...</a> mais uma marcação href="..." dentro da tag de abertura. Esta é uma referência ao endereço do hipertexto ao qual você será conduzido.

Se você colocar uma âncora na página em um lugar específico - bem, na verdade a âncora deve ser colocada imediatamente acima do lugar para o qual você irá - veja a seguir...

  <a name="myanchor"></a>

Um par de tags <a></a> com um nome, por exemplo, name="myanchor" dentro da tag de abertura. Não há nada dentro do par de tags.

Para ir àquele local ("myanchor") você acresenta mais o seguinte no fim do link...

  <a href="http://www.wpdfd.com/index.htm#myanchor">
  Este é um link para uma âncora na minha Home Page
  </a>

Como você já deve saber, os links em uma página são visualmente diferentes do restante do texto com a finalidade de serem facilmente identificados. Por padrão os links são na cor azul e sublinhados. Quando você clica em um link eles mudam para a cor vermelha. Mais tarde quando você voltar àquele link sua cor mudará novamente para púrpura, indicando que você já o visitou. Qualquer um que tenha navegado pela Web percebeu rapidamente este comportamento dos links.

Por padrão são três os estados de representação dos hipertextos para links em HTML.

Link de texto no estado inicialLink de texto no estado ativoLink de texto no estado hover

Link não visitado Link ativo (clicado) Link visitado

Observe que o cursor também muda. A seta padrão muda para uma 'mãozinha' quando aponta-se sobre o link.

Certamente, como 'designers' não estamos satisfeitos com o visual padrão dos links. Texto sublinhado pode ser prático mais é feio. O essencial é que o link seja destacado do restante do texto para mostrar-se que ali há algo especial. O contexto então torna-se um fator importante. Alguns textos são óbvios que se constituem em um 'menu' de opções quer estejam ou não sublinhados. Seu destaque e a posição que ocupam na página e mais o fato de que aparentam convidá-lo a ir a algum lugar dão uma indicação precisa da sua função.

De maneira semelhante, deve haver uma boa razão para uma palavra ou frase dentro de um texto ter um visual diferente. A razão pode ser para dar ênfase, mas aqui novamente é o contexto quem vai dar uma indicação e também o fato de outras palavras ou frases terem o mesmo tipo de alteração no visual. Isto não vai funcionar se cada link tiver uma cor diferente.

CSS permite estilizar o visual dos links. Links não precisam ser sublinhados e nem azuis. Tudo que temos a fazer é estabelecer definições para as âncoras - 'a'.


  a:link { color: #696;text-decoration: none }

na definição acima a cor do link foi alterada e o sublinhado retirado com a definição text-decoration:none

Se você quiser mudar a cor do link visitado faça assim...


  a:visited { color: #699; text-decoration: none }

CSS ainda permite estilizar um estado de link chamado 'hover'. Neste estado - quando o ponteiro do mouse é passado sobre o link - mudei a cor do texto do link o que também fornece mais uma informação adicional de que ali está um hipertexto para link.


  a:hover { color: #c93; text-decoration: underline }

Neste estado, o sublinhado reaparece temporariamente enquanto o ponteiro está em cima do link, se assim você desejar.

O estado 'active' do link acontece quando você clica. Normalmente o link muda de cor e em alguns navegadores também aparece uma borda em volta do texto do link.

Os quatro estados dos links com o aspecto do cursor

Para definir regras de estilo que se apliquem a todos os links de uma página você deve colocá-las dentro das definições de estilo na tag head da página como mostrado abaixo.


  a:link {color: #696; text-decoration: none; 
  background-color: transparent}
  a:visited {color: #699;text-decoration: none; 
  background-color: transparent}
  a:hover {color: #c93;text-decoration: underline; 
  background-color: transparent}
  a:active { color: #900;text-decoration: underline; 
  background-color: transparent }

A ordem (sequência) que você escreve as definições de estilos para links é muito importante. Normalmente a ordem não importa em CSS, mas neste caso é importante que a:hover e a:active venham por último, caso contrário não funcionarão.

Agora um outro estado para links não endossado pelas CSS.

Link morto

Este é um link 'morto'. Ele não faz nada. Se você tem um link na sua página que leva a mesma página, bem, não faz muito sentido clicar em link que leve para o mesmo lugar. Isto é como um sinal, instruindo você a dar uma volta para ir ao lugar onde você já se encontra.

Existem duas maneiras para tratar esta questão. Você poderá destacar o link de um modo visual diferente dos outros links ou torná-lo invisível indicando assim que ele é um link não válido. Está técnica é chamada de 'greying out' e você já deve ter visto isto em ação em outros programas instalados no seu computador.

Afinal, porque manter o link morto se ele não é uma opção válida?

Bem, um dos princípios mais importantes de projeto de interfaces diz que você deve manter as coisas o mais consistente possível. Se você remover um item de uma menu por exemplo, os demais itens vão sofrer um deslocamento de sua posição inicial. É menos confuso para o usuário uma interface que se mantém sempre a mesma e inalterada.

Um outro elemento disponível é a cor do fundo do texto. Algumas vezes os 'designers' mudam a cor do texto do link para o estado hover e/0u ative, simulando uma marca de iluminação.

Link com fundo colorido no estado hover

Existem muitos outros efeitos que você pode conseguir com CSS para os links, nós apenas demos uma partida aqui e você poderá agora começar com suas experiências. Esta página exemplo demonstra os princípios que você aprendeu aqui..

  1. » Introdução - página básica
  2. » Folha de estilos
  3. » Estilizando texto
  4. » Mais texto
  5. » As listas
  6. » Os links
  7. » Boxes CSS
  8. » DIV's
  9. » Juntando tudo
  10. » DOCTYPE
  11. » Estilos externos
  12. » Estilizando tabelas
  13. » Estilizando formulários
  14. » Browsers
  15. » O futuro

Criado em: 2005-04-11
Atualizado em: 2005-07-06

topo