Esercizi Dimensioni CSS
Codegrind Team•Jul 16 2023
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>