Fundamentos e regras CSS básicas para manipulação de links

Publicado em: 19/05/2004

Introdução

Descrever e detalhar os fundamentos básicos para elaboração de folhas de estilo aplicáveis aos links, seus comportamentos e interatividade...

Ao final da leitura deste tutorial você estará capacitado a criar regras CSS consistentes e sintaticamente corretas para aplicação em links.

Por que não funciona?

Duas questões são bastantes comuns eu diria mesmo, são as campeãs das dúvidas relacionadas com manipulação de links com CSS:

1. Por que o comportamento a:hover (mouse sobre o link) deixa de funcionar depois que clico a primeira vez no link ?
2. Como posso obter comportamentos diferentes para links em uma mesma página ?

e algumas outras questões, derivadas das duas acima e cuja solução depende também da correta escrita das regras CSS.

Os quatro estados do links

Sob os conceitos das CSS, um link poderá ser estilizado de quatro maneiras distintas, correspondendo cada uma delas a um dos estados do link.

Os estados dos links são:

1. Estado UP: corresponde a situação inicial do link, isto é, o aspecto do link quando a página é carregada no browser do usuário;
2. Estado OVER: é o aspecto que o link assume quando o usuário passa o ponteiro do mouse sobre o link;
3. Estado VISITED: é o aspecto do link depois que foi visitado pelo usuário;
4. Estado ACTIVE: é o aspecto do link ativo, isto é, aquele que foi clicado pelo usuário.

Os browsers são fabricados de modo a renderizar cores default para os estados UP e VISITED. Em geral, não há estilização default para os estados HOVER e ACTIVE.
E, links são sublinhados por default.

Normalmente cor azul (#0000FF) para estado UP e cor púrpura (#990099) para estado VISITED, conforme mostrado abaixo:

Estado UP ==>

Estado VISITED ==>

As pseudo classes para links

Cada um dos 4 estados dos links poderá ser estilizado por regras CSS aplicadas em 4 pseudo classes, conforme mostradas abaixo:

1. a:link estiliza o estado UP;
2. a:visited estiliza o estado VISITED;
3. a:hover estiliza o estado OVER;
4. a:active estiliza o estado link ativo;

Retirando o sublinhado default dos links

Está é primeira pergunta de iniciantes em manipulação de links com CSS.

A propriedade CSS que retira o sublinhado dos links é text-decoration e o valor é none. Assim a declaração text-decoration: none retira o sublinhado na pseudo classe onde for aplicada.

Mas, e se eu quiser a:hover com sublinhado ?

Você terá que definir para aquele estado uma regra CSS que recoloque o sublinhado de volta! E, felizmente text-decoration admite outros valores além do none.

• text-decoration: none ==> retira o sublinhado;
• text-decoration: underline ==> coloca um sublinhado;
• text-decoration: overline ==> coloca um sobrelinhado;
• text-decoration: underline overline ==> coloca sobre e sublinhado juntos;
• text-decoration: line-through ==> coloca uma linha em cima do texto.

Então se você fizer:

a:link {text-decoration: none;}

a:hover {text-decoration: underline;}

terá estado UP sem o sublinhado e estado OVER com o sublinhado.

O efeito cascata nas pseudo classes para links

Importante: a sequência em que você escreve as regras CSS para as pseudo classes dos links é determinante para o perfeito funcionamento do seu projeto para links .

Você deve saber que uma das diretrizes que determinam o efeito cascata das CSS diz que regras escritas posteriormente no fluxo do documento têm precedência sobre aquelas anteriores. (mais detalhes)

Assim, se você ao escrever suas regras CSS para as pseudo classes dos links colocar a:link em último lugar, estará dando a esta pseudo classe a mais alta prioridade no efeito cascata e seua links seguirão sempre esta regra e nada do que você projetou para a:hover, a:visited e a:active vai funcionar. :-(

Agora pense no funcionamento de um link em uma página web e responda:

Qual é a sequência de escrita das regras CSS para estilizar as pseudo classes dos links ?

a:link é o estado UP inicial em consequência é a primeira regra a escrever;

a:visited não deve prevalecer sobre a:hover e nem a:active, é a segunda;

a:hover não deve prevalecer sobre a:active, é a terceira;

a:active é a última.

Esta é a sequência recomendada e adotada em projetos CSS para links.

Links com comportamentos diferentes na mesma página

Para obtenção de links com comportamentos diferentes em uma mesma página, você deverá criar classes. e aplicá-las aos links.

Considere que criamos uma classe chamada linque1 e veja abaixo a sintaxe para escrita da regra CSS para esta classe:

a.linque1:hover {text-decoration: underline overline;}

Esta regra coloca um sublinhado e um sobrelinhado nos links da página quando no estado OVER e que pertencem a classe linque1

Uma página para as suas experiências e estudos

Vá para uma página web contendo vários links estilizados, para você copiar-colar o código fonte e fazer seus estudos offline, quer alterando as propriedades CSS, quer invertendo a sequência das declarações para constatar o efeito cascata em ação quer observando como foram escritas as regras CSS. E ainda constatar como funcionam as classes em links em uma mesma página.