Links Decifrados

Links

Para fazer alterações nos links como cores, fontes, etc.

Frutas

Legumes

   No Html:
   
   <h3>Frutas</h3>
   <a href="maca.html" class="frutas">Maçã</a>
   <a href="uva.html" class="legumes">Uva</a>
   <a href="melancia.html" class="frutas">Melancia</a>

   <h3>Legumes</h3>
   <a href="tomate.html" class="legumes">Tomate</a>
   <a href="abobrinha.html" class="legumes">Abobrinha</a>
   <a href="melancia.html class legumes">Pepino</a>  

  Na folha de Estilos ficaria assim:
  .frutas{
         color:#8B4513;
    }
 .legumes{
         color:#1C1C1C;
    }

a:hover{
  color:#DDDDDD;/*cor das palavras frutas, legumes*/
  background-color:#000;/*a cor que era azul passou a ser preta*/
    }

a:hover {
letter-spacing: 10px;/*espaçamento entre as letras de um texto*/
font-size: 24px;
color:red;
}

Para somente um link ser alterado:

O special_link está obsoleto, use a seguinte forma:

No Html:
<a href='www.google.com.br' class='text'>texto que será de outra cor</a>
texto que será de outra cor

Na folha de estilo:	   
a.text:link {color:#ff0000;}/*em alguns casos é preciso tirar :link para que funcione*/
a.text {color:#ff0000;}/*ficaria assim*/
a.text:visited {color:#ff0000;}
a.text:hover {color:#ffff00;}

/*funciona também para mais links*/

Na página html:

<a id="special_link" href= "posicionamento_fluxo_normal.html" >

Na folha de estilo ficaria assim:
#special_link{
/*e todas as propriedades que ele terá*/
font-family: Comic Sans MS, Challenge Extra Bold, Arial, Helvetica, sans-serif;
Obs: Colocar mais de uma fonte, porque o browser escolhe a que tiver instalada.
font-size:28px;
color:#FF1493;
text-decoration:overline;
}

 a:hover{/*Ao passar o mouse o link muda de cor*/
 font-size:18px;
 color:#EE7600;
 font-weight:bold;
 }

Para somente um link ser alterado:

/*funciona também para mais links*/

Na página html:
<a id="special_link" href= "posicionamento_fluxo_normal.html" >

Na folha de estilo ficaria assim:
#special_link{
/*e todas as propriedades que ele terá*/
font-family: Comic Sans MS, Challenge Extra Bold, Arial, Helvetica, sans-serif;
Obs: Colocar mais de uma fonte, porque o browser escolhe a que tiver instalada.
font-size:28px;
color:#FF1493;
text-decoration:overline;/*linha superior*/
}

a:hover{/*Ao passar o mouse o link muda de cor*/
font-size:18px;
color:#EE7600;
font-weight:bold;
}

Tabela de Cores

CSS Links

Pode-se aplicar aos links todas as propiedades de cores, fontes e texto ( mudar cores, fontes, sublinhados, etc). Nos links podem-se definir as propriedades de maneira diferente de acordo com o estado do link visitado, não visitado, activo ou com o ponteiro do mouse sobre o link. Isto possibilita adicionar interessantes efeitos ao website. Para estilizar estes efeitos usa-se as chamadas pseudo-classes.

O que é uma pseudo-classe?

Uma pseudo-classe permite estilizar levando em conta condições diferentes ou eventos, ao definir uma propriedade de estilo para uma tag HTML. Exemplo: Links são utilizados em HTML com tags <a >. Pode-se então usar "a" como selector CSS:

a {
color: blue;
}

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

a:link {
color: blue;
}
a:visited {
color: red;
}

Use as pseudo-classes a:link e a:visited para estilizar links não visitados e visitados respectivamente.
Links ativos são estilizados com a pseudo-classe a:active e a:hover, esta última é a pseudo-classe para links com o ponteiro do mouse sobre ele.

Pseudo-classe: link

A pseudo-classe :link é usada para links não visitados.
No exemplo a seguir links não visitados serão na cor verde.

a:link {
color: green;
}

Pseudo-classe: visited

A pseudo-clases :visited é usada para links visitados. No exemplo a seguir links visitados serão na cor amarela:

a:visited {
color: yellow;
}

Pseudo-classe: active

A pseudo-classe :active é usada para links ativos.
No exemplo a seguir links ativos terão seu fundo na cor vermelha: a:active {
background-color: red;
}

Pseudo-classe: hover

A pseudo-classe :hover é usada para quando o ponteiro do mouse estiver sobre o link.
Isto pode ser usado para conseguir efeitos bem interessantes. Por exemplo, pode-se mudar a cor do link para laranja e o texto para itálico quando o ponteiro do mouse passar sobre ele. O código CSS para estes efeitos é:
a:hover {
color: orange;
font-style: italic;
}

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

Espaçamento entre as letras

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:
Na folha de estilos:
a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}

Passe o mouse abaixo para ver o efeito

A propriedade text-transform, para estilizar com letras maiúsculas e minúsculas. Pode ser usada para estilizar links e textos:

Na folha de estilos:
p:hover{
text-transform: uppercase;/*transforma em maiúscula o texto escondido*/
font-size: 15px;/*aumenta a letra desse mesmo texto*/
width: 400px;
color:#EE7600;
}
Na folha de estilos:
a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}

Os exemplos mostrados dão uma idéia das inúmeras possibilidades de combinação de diferentes propriedades. Pode criar os seus próprios efeitos — faça uma tentativa!

Removendo o sublinhado dos links.

Deve-se verificar com muito cuidado, a necessidade de retirar o sublinhado dos links, pois isto poderá reduzir signifcativamente a usabilidade do website. As pessoas estão habituadas aos links na cor azul e sublinhados e sabem que ali há um texto a ser clicado. Ao mudar a cor e os sublinhados dos links, poderá confundir o visitante. Para retirar o sublinhado dos links, a propriedade text-decoration pode ser usada para definir se o texto é ou não sublinhado. Para remover o sublinhado, basta definir o valor none para a propriedade text-decoration.

a {
text-decoration:none;
}
Pode-se definir text-decoration juntamente com outras propriedades para as quatro pseudo-classes.
a:link {
color: blue;
text-decoration:none;
}
a:visited {
color: purple;
text-decoration:none;
}
a:active {
background-color: yellow;
text-decoration:none;
}
a:hover {
color:red;
text-decoration:none;
}