Links em CSS - As propriedades link, visited, hover e active

Neste tutorial de nosso Curso de HTML & CSS, vamos aprender a trabalhar exclusivamente em cima dos links, e veremos uma gama de possibilidades de estilização dos hiperlinks através do CSS (especificamente, através das propriedades link, visited, hover e active.



CSS em Links - Por que estilizar ?

Os dois principais pilares da internet são, sem dúvidas, a informação e a ligação desses dados.
De nada adianta um importante centro de pesquisas fazer estudos e descobertas, se não tiver como compartilhar essas informações com outras pessoas e instituições.




E quando falamos em compartilhar informações, estamos falando dos links.
Os links são os responsáveis por levar uma pessoa de um local da rede para outro.
Quando queremos mostrar algo para alguém, passamos o link.

Quando queremos mostrar pro leitor que ele pode se informar mais sobre um assunto em outra página, fazemos isso criando um link.
Ou seja, o link tem o efeito de ligar uma página na outra, e esse conceito é um dos mais importantes em termos de criação de sites.

Por links serem tão especiais, é natural que devamos destacar, mostrar para os leitores e deixar bem claro que aquilo é um link, é um elo, uma âncora que poderá levar ele para outro local, onde ele poderá obter mais informação.

E é isso que iremos fazer neste tutorial de CSS, que é destacar, tratar diferente os links.
Como sempre, com o CSS nós temos bem mais flexibilidade e recursos do que com o HTML puro.




Existem quatro tipos de comportamentos de links.
O primeiro é antes de de interagirmos com o link, quando não clicamos nem passamos o mouse e é a primeira vez que vemos aquele link.

O segundo comportamento é quando passamos o mouse em cima do link.
A terceira interação ocorre quando estamos clicando no link.
E por fim, a última possibilidade de interação com links é quando nos deparamos com um link cuja página de destino já foi visitada por nós.

A propriedade link do CSS

A primeira interação com os links é feita através do seletor pseudo-classe :link
Quando colocamos esse seletor em uma tag <a>, é porque vamos estilizar aquele link somente quando o usuário não tiver interagido com o link.

Assim, se quisermos que um link tenha a cor azul antes de ser clicado, fazemos:

a:link { 
        color: #00F; 
}

A propriedade hover do CSS

Caso usemos o seletor :hover na tag <a>, a estilização feita nesse elemento terá efeito quando passarmos o mouse em cima dele.

Por exemplo, para que o link que antes era azul, se torne verde ao pousarmos o mouse em cima, o código CSS é:

a:hover { 
        color: #0F0; 
}

A propriedade visited do CSS

Com certeza você já notou que ao entrar em alguns sites, os links que você já visitou a página de destino tinha um aspecto diferente.

Por exemplo, geralmente os links que você nunca visitou são azuis e os links que você já visitou são vermelhos.

Para definirmos a estilização de um link que já foi clicado, usamos a propriedade :visited
Assim, para o link visitado ser vermelho, usamos o código:

a:visited { 
        color: #F00; 
}

A propriedade active do CSS

Por fim, uma ferramenta pouco conhecida e usada é o seletor :active, que irá atuar na estilização DURANTE o ato de clicar.

Como geralmente esse ato é bem rápido, essa propriedade é pouquíssimo usada.
Para ver ela funcionando, clique no link e segure, e verá que a estilização do CSS para :active foi realmente definida.

Por exemplo, para que um link se torne da cor preta durante o ato de clicar, usamos o código CSS:

a:active { 
        color: #FFF; 
}

Um comentário:

Leandro Gomes do Nascimento disse...

Obrigado pela matéria me ajudou muito: 5 estrelas