CSS - Collegamenti

Questo capitolo insegna come impostare diverse proprietà di un collegamento ipertestuale utilizzando i CSS. È possibile impostare le seguenti proprietà di un collegamento ipertestuale:

Rivisiteremo le stesse proprietà quando discuteremo di pseudo-classi di CSS.

  • Il :link indica collegamenti ipertestuali non visitati.

  • Il :visited indica collegamenti ipertestuali visitati.

  • Il :hover indica un elemento su cui attualmente è posizionato il puntatore del mouse dell'utente.

  • Il :active indica un elemento su cui l'utente sta attualmente facendo clic.

Di solito, tutte queste proprietà sono mantenute nella parte dell'intestazione del documento HTML.

Ricorda che un: hover DEVE venire dopo un: link e un: visitato nella definizione CSS per essere efficace. Inoltre, a: active DEVE venire dopo a: hover nella definizione CSS come segue:

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

Ora vedremo come utilizzare queste proprietà per dare effetti diversi ai collegamenti ipertestuali.

Imposta il colore dei collegamenti

L'esempio seguente mostra come impostare il colore del collegamento. I valori possibili potrebbero essere qualsiasi nome di colore in qualsiasi formato valido.

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

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

Produrrà il seguente collegamento nero:

Imposta il colore dei collegamenti visitati

L'esempio seguente mostra come impostare il colore dei collegamenti visitati. I valori possibili potrebbero essere qualsiasi nome di colore in qualsiasi formato valido.

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

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

Produrrà il seguente collegamento. Dopo aver fatto clic su questo collegamento, cambierà il suo colore in verde.

Cambia il colore dei collegamenti quando il mouse è finito

L'esempio seguente mostra come cambiare il colore dei collegamenti quando portiamo il puntatore del mouse su quel collegamento. I valori possibili potrebbero essere qualsiasi nome di colore in qualsiasi formato valido.

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

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

Produrrà il seguente collegamento. Ora, posiziona il mouse su questo collegamento e vedrai che cambia il suo colore in giallo.

Cambia il colore dei collegamenti attivi

L'esempio seguente mostra come modificare il colore dei collegamenti attivi. I valori possibili potrebbero essere qualsiasi nome di colore in qualsiasi formato valido.

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

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

Produrrà il seguente collegamento. Cambierà il suo colore in rosa quando l'utente fa clic su di esso.