Esercizi Dimensioni CSS
Metti alla prova la tua abilità nel rendere i tuoi elementi HTML flessibili e adattabili a diverse dimensioni dei dispositivi. Con queste esercitazioni di CSS, affina le tue competenze nel gestire height e width.
Esercizio 1
Crea una pagina HTML con un paragrafo all'interno. Usa il CSS per impostare la larghezza del paragrafo a 300px e l'altezza a 100px. Assicurati che la larghezza massima sia di 400px.
<!DOCTYPE html><html> <head> <title>Esercizio 1</title> <style> p { width: 300px; height: 100px; max-width: 400px; } </style> </head> <body> <p> Questo paragrafo ha una larghezza di 300px e un'altezza di 100px, ma non supera mai i 400px di larghezza. </p> </body></html>
Esercizio 2
Crea una pagina HTML con un link all'interno. Usa il CSS per impostare la larghezza del link a 200px e l'altezza a 50px. Assicurati che l'altezza minima sia di 40px.
<!DOCTYPE html><html> <head> <title>Esercizio 2</title> <style> a { display: inline-block; width: 200px; height: 50px; min-height: 40px; background-color: lightblue; color: black; text-decoration: none; text-align: center; line-height: 50px; } </style> </head> <body> <a href="#">Clicca qui</a> </body></html>
Esercizio 3
Crea una pagina HTML con un div all'interno. Usa il CSS per impostare la larghezza del div a 500px e l'altezza a 300px. Assicurati che la larghezza minima sia di 400px e l'altezza massima sia di 350px.
<!DOCTYPE html><html> <head> <title>Esercizio 3</title> <style> div { width: 500px; height: 300px; min-width: 400px; max-height: 350px; background-color: lightgreen; } </style> </head> <body> <div> Questo div ha una larghezza di 500px e un'altezza di 300px, ma non scende mai sotto i 400px in larghezza e non supera mai i 350px in altezza. </div> </body></html>
Esercizio 4
Crea una pagina HTML con una lista non ordinata (ul) contenente alcuni elementi di lista (li). Usa il CSS per impostare la larghezza degli elementi di lista a 150px e l'altezza a 30px. Assicurati che l'altezza minima sia di 20px e la larghezza massima sia di 200px.
<!DOCTYPE html><html> <head> <title>Esercizio 4</title> <style> li { width: 150px; height: 30px; min-height: 20px; max-width: 200px; 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 5
Crea una pagina HTML con un titolo all'interno. Usa il CSS per impostare la larghezza del titolo a 400px e l'altezza a 80px. Assicurati che la larghezza massima sia di 500px e l'altezza minima sia di 70px.
<!DOCTYPE html><html> <head> <title>Esercizio 5</title> <style> h1 { width: 400px; height: 80px; min-height: 70px; max-width: 500px; background-color: lightyellow; text-align: center; line-height: 80px; } </style> </head> <body> <h1> Questo è un titolo con una larghezza di 400px e un'altezza di 80px, ma non scende mai sotto i 70px in altezza e non supera mai i 500px in larghezza. </h1> </body></html>
Esercizio 6
Crea una pagina HTML con un link all'interno. Usa il CSS per impostare la larghezza del link a 250px e l'altezza a 40px. Assicurati che l'altezza massima sia di 50px e la larghezza minima sia di 200px.
<!DOCTYPE html><html> <head> <title>Esercizio 6</title> <style> a { display: inline-block; width: 250px; height: 40px; min-width: 200px; max-height: 50px; background-color: lightblue; color: black; text-decoration: none; text-align: center; line-height: 40px; } </style> </head> <body> <a href="#">Clicca qui</a> </body></html>
Esercizio 7
Crea una pagina HTML con un div all'interno. Usa il CSS per impostare la larghezza del div a 800px e l'altezza a 200px. Assicurati che la larghezza massima sia di 900px e l'altezza minima sia di 150px.
<!DOCTYPE html><html> <head> <title>Esercizio 7</title> <style> div { width: 800px; height: 200px; min-height: 150px; max-width: 900px; background-color: lightgreen; } </style> </head> <body> <div> Questo div ha una larghezza di 800px e un'altezza di 200px, ma non scende mai sotto i 150px in altezza e non supera mai i 900px in larghezza. </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 la larghezza degli elementi di lista a 180px e l'altezza a 40px. Assicurati che la larghezza massima sia di 200px e l'altezza minima sia di 30px.
<!DOCTYPE html><html> <head> <title>Esercizio 8</title> <style> li { width: 180px; height: 40px; min-height: 30px; max-width: 200px; 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 9
Crea una pagina HTML con un titolo all'interno. Usa il CSS per impostare la larghezza del titolo a 600px e l'altezza a 100px. Assicurati che la larghezza massima sia di 700px e l'altezza minima sia di 80px.
<!DOCTYPE html><html> <head> <title>Esercizio 9</title> <style> h1 { width: 600px; height: 100px; min-height: 80px; max-width: 700px; background-color: lightyellow; text-align: center; line-height: 100px; } </style> </head> <body> <h1> Questo è un titolo con una larghezza di 600px e un'altezza di 100px, ma non scende mai sotto gli 80px in altezza e non supera mai i 700px in larghezza. </h1> </body></html>
Esercizio 10
Crea una pagina HTML con un link all'interno. Usa il CSS per impostare la larghezza del link a 300px e l'altezza a 60px. Assicurati che la larghezza massima sia di 350px e l'altezza minima sia di 50px.
<!DOCTYPE html><html> <head> <title>Esercizio 10</title> <style> a { display: inline-block; width: 300px; height: 60px; min-height: 50px; max-width: 350px; background-color: yellow; color: blue; text-decoration: none; text-align: center; line-height: 60px; } </style> </head> <body> <a href="#">Clicca qui</a> </body></html>