Titulo Descritivo

Estilizando Links com CSS

Aos links pode se aplicar tudo que vc viu anteriormente (i.e. mudar cores, fontes, sublinhar, etc).,só que de maneira estática.No CSS pode-se definir as propriedades de maneira mais dinâmica diferenciada de acordo com o estado do link ou seja, visitado, não visitado, ativo ou com o ponteiro do mouse sobre o link possibilitando adicionar interessantes efeitos ao seu website. Para estilizar estes efeitos você usará as chamadas pseudo-classes.

Pseudo-classe

Uma pseudo-classe é uma classe do css que permite estilizar considerando as diferentes condições ou eventos na definição de uma propriedade de estilo para uma tag HTML.

Exemplo : links são marcados no HTML com tags <a>. Então podemos usar a como um seletor CSS:

a {

color: green;

}

Um link pode ter diferentes estados. Por exemplo, pode ter sido visitado ou não visitado ou link ativo. Então vamos usar pseudo-classes para estilizar links ativos, visitados e não visitados.

a:link {

color: blue;

}

a:visited {

color: red;

}

a:active {

background-color:aqua;

}

Pseudo-classe: hover

A pseudo-classe :hover é usada para quando o ponteiro do mouse está sobre o link.

Isto pode ser usado para conseguir efeitos bem interessantes. Por exemplo, podemos mudar a cor do link para laranja e o texto para itálico quando o ponteiro do mouse passa sobre ele, o código CSS para estes efeitos é o mostrado a seguir:

a:hover {

color: orange;

font-style: italic;

}

Exemplo: Efeito quando o ponteiro está sobre o link

É comum a criação de efeitos diferentes quando o ponteiro está sobre o link. Veremos a seguir alguns exemplos extras de estilização da pseudo-classe :hover.

Exemplo : Espaçamento entre as letras

Como você deve estar lembrado o espaçamento entre as letras de um texto pode ser controlado pela propriedade letter-spacing. Isto pode ser aplicado aos links para obter um efeito interessante:

a:hover {

letter-spacing: 10px;

font-weight:bold;

color:red;

}

Exemplo: UPPERCASE e lowercase

A propriedade text-transform, para estilizar com letras maiúsculas e minúsculas. Isto pode ser usado para estilizar links:

a:hover {

text-transform: uppercase;

font-weight:bold;