Home esercizi css stile delle liste

Esercizi Stile Liste CSS

Esplora come rendere le tue liste HTML più accattivanti e coerenti con il resto del tuo design. Allenati nell’utilizzo delle regole CSS per stilizzare le liste puntate, numerate e le liste senza stile, aggiungendo un tocco di eleganza e organizzazione.

Esercizio 1

Crea una pagina HTML con una lista non ordinata (ul) contenente alcuni elementi di lista (li). Usa il CSS per rimuovere i punti elenco e cambiare il colore del testo degli elementi di lista in blu.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
    <style>
      ul {
        list-style: none;
      }

      li {
        color: blue;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
    </ul>
  </body>
</html>

Esercizio 2

Crea una pagina HTML con una lista ordinata (ol) contenente alcuni elementi di lista (li). Usa il CSS per cambiare il tipo di numerazione degli elementi di lista in caratteri romani minuscoli.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
    <style>
      ol {
        list-style-type: lower-roman;
      }
    </style>
  </head>
  <body>
    <ol>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
    </ol>
  </body>
</html>

Esercizio 3

Crea una pagina HTML con una lista non ordinata (ul) contenente alcuni elementi di lista (li). Usa il CSS per cambiare il tipo di simboli degli elementi di lista in quadrati.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
    <style>
      ul {
        list-style-type: square;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
    </ul>
  </body>
</html>

Esercizio 4

Crea una pagina HTML con una lista ordinata (ol) contenente alcuni elementi di lista (li). Usa il CSS per impostare l'immagine di sfondo personalizzata per gli elementi di lista numerati.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
    <style>
      ol {
        list-style-image: url("immagine_sfondo.png");
      }
    </style>
  </head>
  <body>
    <ol>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
    </ol>
  </body>
</html>

Esercizio 5

Crea una pagina HTML con una lista non ordinata (ul) contenente alcuni elementi di lista (li). Usa il CSS per impostare un'immagine di sfondo personalizzata per gli elementi di lista puntati.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
    <style>
      ul {
        list-style-image: url("immagine_sfondo.png");
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
    </ul>
  </body>
</html>

Esercizio 6

Crea una pagina HTML con una lista ordinata (ol) contenente alcuni elementi di lista (li). Usa il CSS per cambiare il colore del testo degli elementi di lista numerati in rosso e aggiungere uno sfondo grigio chiaro.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
    <style>
      ol {
        list-style-type: decimal;
        color: red;
        background-color: lightgrey;
      }
    </style>
  </head>
  <body>
    <ol>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
    </ol>
  </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 il colore del testo degli elementi di lista puntati in verde e aggiungere uno sfondo giallo.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 7</title>
    <style>
      ul {
        list-style-type: disc;
        color: green;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
    </ul>
  </body>
</html>

Esercizio 8

Crea una pagina HTML con una lista ordinata (ol) contenente alcuni elementi di lista (li). Usa il CSS per cambiare il tipo di numerazione degli elementi di lista in caratteri maiuscoli.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
    <style>
      ol {
        list-style-type: upper-alpha;
      }
    </style>
  </head>
  <body>
    <ol>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
    </ol>
  </body>
</html>

Esercizio 9

Crea una pagina HTML con una lista non ordinata (ul) contenente alcuni elementi di lista (li). Usa il CSS per impostare un'immagine personalizzata come simbolo degli elementi di lista puntati.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 9</title>
    <style>
      ul {
        list-style-image: url("immagine_simbolo.png");
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
    </ul>
  </body>
</html>

Esercizio 10

Crea una pagina HTML con una lista ordinata (ol) contenente alcuni elementi di lista (li). Usa il CSS per cambiare il colore del testo degli elementi di lista numerati quando il mouse ci passa sopra.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 10</title>
    <style>
      ol li:hover {
        color: #ff0000;
      }
    </style>
  </head>
  <body>
    <ol>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
    </ol>
  </body>
</html>