Ir para conteúdo / Skip to content

GUIA CSS - 11ª PARTE: LINKS E PSEUDO CLASSES

Postado em: 17 de outubro de 2006 por Pedro Rogério

Abaixo você pode ver as várias maneiras de se usar CSS para estilizar os links da sua página:

  • a:link {color: #009900;}
  • a:visited {color: #999999;}
  • a:hover {color: #333333;}
  • a:focus {color: #333333;}
  • a:active {color: #009900;}

Agora vamos ver o que cada uma delas significa:

a:link {color: #009900;}

Usado para estilizar os links da página quando não está ocorrendo nenhum evento.

a:visited {color: #999999;}

Usado para estilizar os links da página quando o mesmo já foi visitado.

a:hover {color: #333333;}

Usado para estilizar os links da página quando o usuário coloca o mouse sobre o link.

a:focus {color: #333333;}

Praticamente a mesma função que a:active, mas com uma diferença, está é para usuários que não estão usando o mouse e estão navegando através do teclado, ele tem a função de alterar a cor do link quando o usuário está “tabulando”(usando a tecla tab), para alternar entre os links da página.

a:active {color: #009900;}

Usado para estilizar os links da página enquanto o mesmo é pressionado.

Pseudo classes

Você pode estilizar os links em diferentes partes da sua página utilizando as pseudo classes, por exemplo, você pode ter diferentes cores para um menu e outras cores para os links do conteúdo do seu site:

  • #content a:link {color: #009900;}
  • #content a:visited {color: #999999;}
  • #content a:hover {color: #333333;}
  • #content a:focus {color: #333333;}
  • #content a:active {color: #009900;}

Com isso, todos os links contidos dentro do ID content terão as condições citadas acima, mas vamos dizer que você tem um menu que quer deixar com as cores dos links diferentes do conteúdo:

  • #menu a:link {color: #009900;}
  • #menu a:visited {color: #999999;}
  • #menu a:hover {color: #333333;}
  • #menu a:focus {color: #333333;}
  • #menu a:active {color: #009900;}

Com isso, todos os links contidos dentro do ID menu terão as condições citadas acima. Você também poderia utilizar classes ao invés de ID’s.

  • a.menu:link {color: #009900;}
  • a.menu:visited {color: #999999;}
  • a.menu:hover {color: #333333;}
  • a.menu:focus {color: #333333;}
  • a.menu:active {color: #009900;}

Neste caso, nosso HTML ficaria da seguinte forma:


<a class="menu" href="" title="" rel="">Link aqui</a>

Também pode ser declarado dessa forma:

  • .menu a:link {color: #009900;}
  • .menu a:visited {color: #999999;}
  • .menu a:hover {color: #333333;}
  • .menu a:focus {color: #333333;}
  • .menu a:active {color: #009900;}

Nosso HTML ficaria assim:


<div class="menu">
<a href="" title="" rel="">Link aqui</a>
</div>

Tradução do artigo original de: CSS Basics.

Isso pode lhe interessar:

Deixe seu comentário

11 comentários para esse post

  1. Newton Wagner disse: 17.10.06 ás 13:30
    #1

    Uma infeliz dica pra quem ta começando com CSS.
    As pseudo-classes :hover e :focus devem funcionar em quase TODOS os elementos. Você poderia usar:

    div:hover { propriedade }

    Eu disse infeliz, por que não funciona no IE6. :(.

  2. Luã de Souza disse: 17.10.06 ás 14:57
    #2

    Newton, apresento-lhe o behavior csshover, http://www.xs4all.nl/~peterned/htc/csshover.htc
    =)

  3. Roberto Hayasida disse: 17.10.06 ás 16:26
    #3

    Pergunta ao Luã: como eu uso isso? É que eu ainda to começando e não entendo muito desse tipo de coisa.

  4. Pedro Rogério disse: 17.10.06 ás 17:26
    #4

    Roberto,

    Abaixo você pode ver um exemplo de como eu uso aqui no meu blog:


    <!--[if IE]>
    <style type=”text/css”>
    body { behavior:url(http://www.pinceladasdaweb.com.br/cssfocusandhover.htc); }
    </style>
    <![endif]–>

    Você deve colocar isso dento das tags <head></head> do seu site. Qualquer dúvida é só olhar o código fonte do meu blog.

  5. Vilela disse: 17.10.06 ás 20:12
    #5

    Olá pedro sei pouco disso tudo mas de vez em quando me atrevo a dar uma mudadas aqui e ali.

  6. Alexandre disse: 17.11.06 ás 17:31
    #6

    Olá! Estou com um problema chato aqui e gostaria de saber o seguinte:

    Fiz um CSS para alternar o comportamento dos links de um menu, ou seja, quando o ponteiro do mouse passar sobre o link, este mudará a cor. Porém, ocorre que enquanto no browser FireFox aparece tudo as mil maravilhas… no IE6 os links ficam estáticos.

    Nessa agonia pergunto eu… O que fazer?

    Obrigado pessoal por esta oportunidade e aguardo alguma idéia!

    Valeu!

  7. Leonardo disse: 18.11.06 ás 10:02
    #7

    como ta seu codigo Alexandre?

  8. Dafne Murussi disse: 08.12.06 ás 10:20
    #8

    olá,
    Gostaria de pedir um exemplo em uma folha de estilo externa. Até agora só localizei tutorias que utilizam a css entre as tag . Não sei se é ai que estou errando, pois não abtenho nenhum efeito.
    Ah, utilizo o Explorer 6; há alguma restrição quanto à esta função?

    Garadeço e aguardo alguma instrução…
    Muito obrigada

  9. eduardo achado disse: 22.04.07 ás 02:53
    #9

    Dafne Murussi….pq será que não consigo te esquecer?

  10. eduardo machado disse: 22.04.07 ás 02:53
    #10

    ?

  11. Luany disse: 20.06.07 ás 12:40
    #11

    como faço pra aparecer os pontilhados em volta dos links???

Deixe seu comentário