Home esercizi css display

Esercizi Display CSS

Metti in pratica le diverse opzioni di visualizzazione degli elementi HTML tramite la proprietà “display” in CSS. Affina il tuo approccio nel posizionare e organizzare i contenuti del tuo sito web.

Esercizio 1

Crea una pagina HTML con uno span all'interno. Usa il CSS per impostare lo span in modo che occupi l'intera larghezza del contenitore.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
    <style>
      span {
        display: block;
      }
    </style>
  </head>
  <body>
    <span
      >Questo è un paragrafo con display "block", quindi occupa l'intera
      larghezza del contenitore.</span
    >
  </body>
</html>

Esercizio 2

Crea una pagina HTML con un'immagine all'interno. Usa il CSS per impostare il display dell'immagine come "inline" in modo che il testo scorra attorno ad essa.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
    <style>
      img {
        display: inline;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <p>
      Questo è un paragrafo con un'immagine
      <img src="image.jpg" alt="Immagine di esempio" /> inserita come display
      "inline", quindi il testo scorre attorno ad essa.
    </p>
  </body>
</html>

Esercizio 3

Crea una pagina HTML con una lista non ordinata (ul) contenente alcuni elementi di lista (li). Usa il CSS per impostare il display degli elementi di lista come "inline-block" in modo che siano visualizzati su una singola riga e possano avere una larghezza specificata.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
    <style>
      li {
        display: inline-block;
        width: 100px;
        height: 50px;
        background-color: lightblue;
        margin: 5px;
        list-style-type: none;
      }
    </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 un paragrafo all'interno. Usa il CSS per impostare il display del paragrafo come "none" in modo che non sia visibile sulla pagina.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
    <style>
      p {
        display: none;
      }
    </style>
  </head>
  <body>
    <p>Questo paragrafo ha display "none" e non è visibile sulla pagina.</p>
  </body>
</html>

Esercizio 5

Crea una pagina HTML con due link all'interno. Usa il CSS per impostare il display dei link come "block" in modo che siano visualizzati su righe separate, ognuno con larghezza specificata.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
    <style>
      a {
        display: block;
        width: 100px;
        text-align: center;
        background-color: lightyellow;
        margin-bottom: 5px;
        text-decoration: none;
        color: black;
      }
    </style>
  </head>
  <body>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
  </body>
</html>

Esercizio 6

Crea una pagina HTML con una lista non ordinata (ul) contenente alcuni elementi di lista (li). Usa il CSS per impostare il display della lista come "block" in modo che ogni elemento sia visualizzato su una riga separata.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
    <style>
      ul {
        display: block;
      }
      li {
        background-color: lightpink;
        margin: 5px;
        list-style-type: none;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
    </ul>
  </body>
</html>

Esercizio 7

Crea una pagina HTML con un div all'interno. Usa il CSS per impostare il display del div in modo che occupi solo lo spazio necessario.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 7</title>
    <style>
      div {
        display: inline;
        width: 100px;
        height: 100px;
        background-color: lightgreen;
      }
    </style>
  </head>
  <body>
    <div>
      Questo div ha display "inline", quindi occupa solo lo spazio necessario.
    </div>
  </body>
</html>

Esercizio 8

Crea una pagina HTML con una lista non ordinata (ul) contenente alcuni elementi di lista (li). Usa il CSS per impostare il display della lista in modo che non sia visibile sulla pagina.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
    <style>
      ul {
        display: none;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
    </ul>
    <p>Questa lista ha display "none" e non è visibile sulla pagina.</p>
  </body>
</html>

Esercizio 9

Crea una pagina HTML con un paragrafo all'interno. Usa il CSS per impostare il display del paragrafo come "block-inline" in modo che sia visualizzato su una riga e possa avere una larghezza specificata.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 9</title>
    <style>
      p {
        display: inline-block;
        width: 200px;
        background-color: lightblue;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <p>
      Questo è un paragrafo con display "block-inline", quindi è visualizzato su
      una riga e ha una larghezza specificata.
    </p>
  </body>
</html>

Esercizio 10

Crea una pagina HTML con una lista non ordinata (ul) contenente alcuni elementi di lista (li). Usa il CSS per impostare il display degli elementi di lista come "block-inline" in modo che siano visualizzati su una singola riga e possano avere una larghezza specificata.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 10</title>
    <style>
      li {
        display: inline-block;
        width: 100px;
        height: 50px;
        background-color: lightblue;
        margin: 5px;
        list-style-type: none;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
    </ul>
  </body>
</html>