Noções básicas de folhas de estilo

Introdução

CSS possibilita definir uma variedade infinita de layouts e efeitos para um link ou um conjunto de links.

O limite é a sua imaginação!

Um link visitado, não visitado, ativo ou no estado hover (quando você passa o mouse sobre ele) pode assumir aspectos (cores, fundos, etc...) diferentes através de CSS.

Abordarei neste tutorial as técnicas básicas de manipular os quatro seletores de link.

Pseudo-classes

Os efeitos em links são possíveis através de declarações de regras de estilo para as pseudo-classes do elemento <a> do HTML.

As pseudo-classes são usadas em CSS, para adicionar efeitos diferentes a alguns seletores, ou a uma instância de alguns seletores.

Sintaxe

A sintaxe das pseudo-classes:

seletor:pseudo-classe {propriedade: valor}

As classes em CSS podem também ser usadas com pseudo-classes.

Esta regra permite que você defina diferentes efeitos para links localizados em diferentes lugares em uma mesma página. No último item deste tutorial "Diferentes estilos de links em uma mesma página web" veremos este efeito.

seletor.class:pseudo-class {propriedade: valor}

Os "seletores:pseudo-classe" de links

São quatro as pseudo classes dos links:

Vamos a seguir analisar cada um deles detalhadamente através de exemplos práticos.

Como estudar e entender os exemplos

Para cada seletor apresento as regras CSS definidas dentro de uma folha de estilos incorporada, e a seguir os efeitos em um link, onde se aplicam as regras.

Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o código no seu editor, mude os valores e veja o resultado no browser. Esta é a melhor e mais rápida maneira de você aprender CSS. Bons estudos! E faça ótimo proveito dos tutoriais.

Grande flexibilidade

É perfeitamente possível com CSS definir-se um estilo diferente para cada um dos quatro seletores, de forma semelhante como é definido para qualquer texto HTML.

Prioridade nas declarações para links

É importante a ordem de definição das regras para os estados dos links. Lembre-se de que pelo "efeito cascata", as regras mais próximas do elemento prevalecem sobre as mais distantes. Assim, por exemplo: se voce define a: hover ANTES de a: visited, esta prevalecerá sobre a: hover e em consequência: O link visitado pela primeira vez assumirá a regra definida em a: visited e a partir de então a: hover não mais funcionará naquele link pois a: visited prevalecerá sobre a: hover.

Qual é a ordem normal é lógica das declarações? É simples concluir ! Senão vejamos:

 
1.) a: link é o estado inicial dos links;
      a:link deverá ser a primeira declaração;
2.) a: active deverá acontecer mesmo 
      em links já visitados;
     a: active deverá ser declarado depois 
     de a:visited;
1.) a: hover não precisa funcionar em a:active; 
     a:active pode ser declarado depois de a:hover.

 
Em conseqüência a ordem das declarações deve ser:
a:link
a:visited 
a:hover
a:active 

Exemplos de efeitos em links

A seguir exemplos dos efeitos mais comuns e simples aplicando CSS aos seletores de links

1-) Removendo o sublinhado do link

Tipicamente, por default os links são sublinhados e na cor azul.

Um efeito muito comum em páginas web é o de se retirar o sublinhado do link normal, mudar a cor e fazer "aparecer" o sublinhado, quando o mouse é passado sobre ele.

Esse efeito obtém-se facilmente com CSS. Abaixo a regra para esse simples efeito:

<style type="text/css">
<!--
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:hover {text-decoration: underline; 
color: #FF0000;
}
a:active {text-decoration: none}
-->
</style>

2-) Adicionando sublinhado e sobrelinhado

Este efeito semelhante ao anterior, consiste em um sobrelinhado adicional no link hover.

Abaixo a regra para esse efeito:

<style type="text/css">
<!--
a:link, a:visited, a:active {
text-decoration: underline;
}
a:hover {text-decoration: underline overline; 
color:#FF0000;
}
-->
</style>

3-) Acresentando um fundo

Este efeito simulando um "rollover" simples, consiste em acresentar uma cor de fundo no link hover.

Abaixo a regra para esse efeito:

<style type="text/css">
<!--
a:link, a:visited, a:active {
text-decoration: underline;
}
a:hover {text-decoration: underline; 
background:#ffc; 
color: #FF0000;
}
-->
</style>

4-) Link com um fundo de uma cor que muda no link hover

Este efeito também simula um "rollover" simples, consiste em mudar a cor de fundo no link hover.

Abaixo a regra para esse efeito:

<style type="text/css">
<!--
a:link, a:visited, a:active {
text-decoration: underline;
 background:#FFFFFF;
}
a:hover {text-decoration: underline; 
 color:#000; 
background:#FFFFCC; 
}
-->
</style>

5-) Link que muda o tamanho da letra no link hover

Neste efeito há uma mudança no tamanho da letra (em geral para maior) no link hover.

Abaixo a regra para esse efeito:

<style type="text/css">
<!--
a:link, a:visited, a:active {
text-decoration: none;
}
a:hover {text-decoration: underline;  
color:#000000; 
font-size:150%; }
-->
</style>

Diferentes estilos de links em uma mesma página web

É possível definir diferentes estilos para os 4 seletores de links para serem usados em uma mesma página.

Isso consegue-se utilizando os seletores de contexto que consiste em adicionar uma classe aos seletores.

Assim cada conjunto dos 4 seletores de uma classe assumem o comportamento daquela classe e você pode definir quantas classes quiser.

Por exemplo:

 <html>
  <head>
  <style type="text/css">
  <!--
  .classe1 a:link {text-decoration: none}
  .classe1 a:visited {text-decoration: none}
  .classe1 a:hover {
  text-decoration: underline; 
  color: #FF0000;
  }
  .classe1 a:active {text-decoration: none}

  .classe2 a:link {
  text-decoration: underline overline
  }
  .classe2 a:visited {
  text-decoration: underline overline
  }
  .classe2 a:hover {text-decoration: underline; 
  color: #00FF00;
  }
  .classe2 a:active {
  text-decoration: underline overline
  }
  -->
  </style>
  </head>
  <body>
  <a href="http://www.maujor.com" class="classe1">
  ESTE É O LINK DA classe1
  </a>
  
  <a href="http://www.maujor.com" class="classe2">
  ESTE É O LINK DA classe2
  </a>

Nota: No código HTML aplicamos a classe criada diretamente na tag <a>.

Veja aqui um tutorial mais abrangente sobre CSS, permitindo modificar outras tags e trabalhar com outros elementos, agora que você já viu a aplicação com os links.

Matéria enviada por Bruno Cortez

Voltar para 'Dicas HTML'

Ir para a página inicial

Voltar

Home