Home esercizi css stile dei link

Esercizi Stile Link CSS

Migliora l’aspetto dei link del tuo sito web con queste esercitazioni di CSS. Pratica l’uso delle regole CSS per personalizzare il colore, lo stile del testo e gli effetti di transizione dei tuoi link, rendendo la navigazione più intuitiva e invitante.

Esercizio 1

Crea una pagina HTML con un link all'interno di un paragrafo. Usa il CSS per cambiare il colore del testo del link quando il link è attivo (cliccato).

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
    <style>
      a:active {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>
      Questo è un <a href="#">link</a> che diventa rosso quando viene cliccato.
    </p>
  </body>
</html>

Esercizio 2

Crea una pagina HTML con una lista non ordinata (ul) contenente alcuni elementi di lista (li). Usa il CSS per cambiare il colore dei link della lista quando il mouse ci passa sopra (utilizza l'hover).

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
    <style>
      li a:hover {
        color: blue;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </body>
</html>

Esercizio 3

Crea una pagina HTML con un link all'interno di un paragrafo. Usa il CSS per cambiare il colore del testo del link quando il mouse ci passa sopra (hover), e ripristina il colore quando il link è stato visitato.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
    <style>
      a:hover {
        color: blue;
      }

      a:visited:hover {
        color: purple;
      }
    </style>
  </head>
  <body>
    <p>
      Questo è un <a href="#">link</a> che diventa blu quando il mouse ci passa
      sopra e viola quando è stato visitato e il mouse ci passa sopra.
    </p>
  </body>
</html>

Esercizio 4

Crea una pagina HTML con un link all'interno di un paragrafo. Usa il CSS per cambiare il colore del testo del link quando il link è in stato di focus (è selezionato con la tastiera).

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
    <style>
      a:focus {
        color: green;
      }
    </style>
  </head>
  <body>
    <p>
      Premi il tasto TAB per selezionare il <a href="#">link</a> e vedrai il suo
      testo diventare verde.
    </p>
  </body>
</html>

Esercizio 5

Crea una pagina HTML con una lista ordinata (ol) contenente alcuni elementi di lista (li). Usa il CSS per cambiare lo stile dei link della lista quando il link ha il focus (è selezionato con la tastiera).

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
    <style>
      li a:focus {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <ol>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ol>
  </body>
</html>

Esercizio 6

Crea una pagina HTML con un link all'interno di un paragrafo. Usa il CSS per cambiare il colore del testo del link quando il link è stato visitato.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
    <style>
      a:visited {
        color: purple;
      }
    </style>
  </head>
  <body>
    <p>
      Questo è un <a href="#">link</a> che diventa viola quando è stato
      visitato.
    </p>
  </body>
</html>

Esercizio 7

Crea una pagina HTML con una lista non ordinata (ul) contenente alcuni elementi di lista (li). Usa il CSS per cambiare lo stile dei link della lista quando il link è stato visitato.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 7</title>
    <style>
      li a:visited {
        color: orange;
        text-decoration: line-through;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </body>
</html>

Esercizio 8

Crea una pagina HTML con un link all'interno di un paragrafo. Usa il CSS per cambiare lo stile dei link quando il link è stato visitato e quando il mouse ci passa sopra (utilizza l'hover).

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
    <style>
      a:hover,
      a:visited {
        color: green;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <p>
      Questo è un <a href="#">link</a> che diventa verde e grassetto quando il
      mouse ci passa sopra e quando è stato visitato.
    </p>
  </body>
</html>

Esercizio 9

Crea una pagina HTML con una lista ordinata (ol) contenente alcuni elementi di lista (li). Usa il CSS per cambiare il colore dei link della lista quando il link è in stato di focus (è selezionato con la tastiera).

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 9</title>
    <style>
      li a:focus {
        color: #ff9900;
      }
    </style>
  </head>
  <body>
    <ol>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ol>
  </body>
</html>

Esercizio 10

Crea una pagina HTML con un link all'interno di un paragrafo. Usa il CSS per cambiare lo stile dei link quando il link è in stato di focus (è selezionato con la tastiera) e quando il mouse ci passa sopra (utilizza l'hover).

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 10</title>
    <style>
      a:focus,
      a:hover {
        color: #ff0066;
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <p>
      Questo è un <a href="#">link</a> che diventa rosa con sottolineato quando
      è in stato di focus e quando il mouse ci passa sopra.
    </p>
  </body>
</html>