Olá pessoal! Nesta semana falarei sobre efeitos em links. Como existem muitos efeitos, nesta primeira parte abordarei os mais comuns. Com esta série de colunas (Efeitos em Links) você não aprenderá apenas a criar links diferentes para um site, mas também conhecerá muitas propriedades do CSS e poderá utilizá-las em tabelas, textos, imagens e formulários.

Para adicionar um estilo a um link, você deve conhecer as "fases" de um link. No CSS todo link tem 4 fases: a:active, a:hover, a:link e a:visited.

a:active é um link ativo na página.
a:hover é quando o mouse passa por cima de um link.
a:link é um link na página, tag do html.
a:visited é quando um link já foi visitado.

O código base para testar todos os efeitos é este:

Imasters

Coluna CSS

Quando quiser testar os efeitos, é só copiar o código acima e trocar o STYLE (entre os comentários "início" e "fim"). Salve a página como efeitoemlinks.html

Texto (fonte, tamanho e cor)

Todo texto possui uma fonte, um tamanho e uma cor. Com o CSS você pode definir essas propriedades. Para definir qual é a fonte, utilizamos font-family; para definir o tamanho da fonte, utilizamos font-size e para definir a cor, utilizamos color.

No código abaixo temos links com fonte Verdana, tamanho 10 e cor vermelha (a:link e a:active). Quando o mouse passa por ele (a:hover) a fonte fica Arial, tamanho 20 e cor vermelho escuro e quando visitado (a:visited) a fonte volta a ser verdana, tamanho 10, porém a cor fica cinza, indicando ao usuário que ele já visitou o link.

Faça testes, altere a cor, a fonte e o tamanho.

Texto (normal, negrito, itálico, oblíquo)

Com CSS você também pode fazer com que o texto fique em negrito, itálico, normal, oblíquo, mais claro, mais escuro. Para isto utilizamos font-style e font-weight.

font-style define qual é o estilo da fonte, pode ser normal (normal), itálico (italic) ou oblíquo (oblique).
font-weight define qual é o peso do texto, pode ser normal (normal), negrito (bold), mais escuro (bolder), mais claro (lighter) ou você escolhe um valor (100,900).

Altere os valores e teste no navegador.

Texto (sublinhado, sobrelinha, tachado, piscando e nenhum)

O padrão de todo link é ficar sublinhado, porém você pode alterar este atributo. No CSS utilizamos text-decoration para definir a decoração do texto.

A propriedade text-decoration possui os atributos: sublinhado (underline), sobrelinha (overline), tachado (line-through), piscando (blink) e nenhum (none). O atributo none você utiliza quando não quer que o link tenha o sublinhado padrão. O atributo blink funciona apenas no navegador Netscape.

Você pode colocar dois atributos na mesma propriedade, desde que uma não anule a outra, como no exemplo acima em a:hover.

Nos exemplos acima usamos as propriedades: font-family, font-size, color, font style, font-weight e font-decoration separadas. Você pode utilizar todas juntas, como no exemplo abaixo.

Para separar cada propriedade utilize ponto e vírgula (;), apenas na última propriedade não é necessário utilizar. Você também pode utilizar estas propriedades em textos sem link, tag do html. Veja o exemplo abaixo.

Imasters

Coluna CSS

Na próxima coluna continuarei explicando sobre outras propriedades do CSS, e como utilizá-las em links.

Boa semana! ;)