CSS - Links

Este capítulo ensina como definir propriedades diferentes de um hiperlink usando CSS. Você pode definir as seguintes propriedades de um hiperlink -

Iremos revisitar as mesmas propriedades quando discutirmos as Pseudo-Classes de CSS.

o :link significa hiperlinks não visitados.
o :visited significa hiperlinks visitados.
o :hover significa um elemento que atualmente tem o ponteiro do mouse do usuário pairando sobre ele.
o :active significa um elemento no qual o usuário está clicando no momento.

Normalmente, todas essas propriedades são mantidas na parte do cabeçalho do documento HTML.

Lembre-se de que um: hover DEVE vir após um: link e um: visitado na definição CSS para ser eficaz. Além disso, a: active DEVE vir após a: hover na definição CSS da seguinte forma -

<style type = "text/css">
   a:link {color: #000000}
   a:visited {color: #006600}
   a:hover {color: #FFCC00}
   a:active {color: #FF00CC}
</style>

Agora, veremos como usar essas propriedades para dar diferentes efeitos aos hiperlinks.

Defina a cor dos links

O exemplo a seguir demonstra como definir a cor do link. Os valores possíveis podem ser qualquer nome de cor em qualquer formato válido.

<html>
   <head>
      <style type = "text/css">
         a:link {color:#000000}
     </style>
   </head>

   <body>
      <a href = "">Link</a>
   </body>
</html>

Ele produzirá o seguinte link preto -

Definir a cor dos links visitados

O exemplo a seguir demonstra como definir a cor dos links visitados. Os valores possíveis podem ser qualquer nome de cor em qualquer formato válido.

<html>
   <head>
      <style type = "text/css">
         a:visited {color: #006600}
      </style>
   </head>

   <body>
      <a href = ""> link</a> 
   </body>
</html>

Ele produzirá o seguinte link. Depois de clicar neste link, ele mudará sua cor para verde.

Alterar a cor dos links ao passar o mouse

O exemplo a seguir demonstra como alterar a cor dos links ao passar o ponteiro do mouse sobre o link. Os valores possíveis podem ser qualquer nome de cor em qualquer formato válido.

<html>
   <head>
      <style type = "text/css">
         a:hover {color: #FFCC00}
      </style>
   </head>

   <body>
      <a href = "">Link</a>
   </body>
</html>

Ele produzirá o seguinte link. Agora, coloque o mouse sobre este link e verá que ele muda de cor para amarelo.

Mudar a cor dos links ativos

O exemplo a seguir demonstra como alterar a cor dos links ativos. Os valores possíveis podem ser qualquer nome de cor em qualquer formato válido.

<html>
   <head>
      <style type = "text/css">
         a:active {color: #FF00CC}
      </style>
   </head>

   <body>
      <a href = "">Link</a>
   </body>
</html>

Ele produzirá o seguinte link. Ele mudará sua cor para rosa quando o usuário clicar nele.

↰ Previous page Next page ↱