splora il concetto di variabili CSS e come possono rendere il tuo codice più modulare e facile da gestire. Allenati nell’uso delle variabili per memorizzare valori comuni e riutilizzarli in tutto il tuo foglio di stile.
Esercizio 1
Crea una variabile CSS per il colore di sfondo di un div e utilizzala per impostare il colore di sfondo del div.
<!DOCTYPE html><html> <head> <title>Esercizio 1</title> <style> :root { --colore-sfondo: lightblue; }
div { width: 200px; height: 100px; background-color: var(--colore-sfondo); } </style> </head> <body> <div>Questo è un div</div> </body></html>
Esercizio 2
Crea una variabile CSS per il colore del testo di un paragrafo e utilizzala per impostare il colore del testo del paragrafo.
<!DOCTYPE html><html> <head> <title>Esercizio 2</title> <style> :root { --colore-testo: red; }
p { color: var(--colore-testo); } </style> </head> <body> <p>Questo è un paragrafo di testo.</p> </body></html>
Esercizio 3
Crea una variabile CSS per la dimensione del font di un paragrafo e utilizzala per impostare la dimensione del font del paragrafo.
<!DOCTYPE html><html> <head> <title>Esercizio 3</title> <style> :root { --dimensione-font: 20px; }
p { font-size: var(--dimensione-font); } </style> </head> <body> <p>Questo è un paragrafo di testo con font di dimensione variabile.</p> </body></html>
Esercizio 4
Crea una variabile CSS per la larghezza e l'altezza di un div e utilizzale per impostare la larghezza e l'altezza del div.
<!DOCTYPE html><html> <head> <title>Esercizio 4</title> <style> :root { --larghezza-div: 200px; --altezza-div: 100px; }
div { width: var(--larghezza-div); height: var(--altezza-div); background-color: lightgreen; } </style> </head> <body> <div>Questo è un div con larghezza e altezza variabili.</div> </body></html>
Esercizio 5
Crea una variabile CSS per il colore di sfondo e la dimensione del font di un paragrafo e utilizzale per impostare lo stile del paragrafo.
<!DOCTYPE html><html> <head> <title>Esercizio 5</title> <style> :root { --colore-sfondo: lightyellow; --dimensione-font: 24px; }
p { background-color: var(--colore-sfondo); font-size: var(--dimensione-font); } </style> </head> <body> <p>Questo è un paragrafo con stile variabile.</p> </body></html>
Esercizio 6
Crea una variabile CSS per il colore di sfondo e il colore del testo di un elemento `a` e utilizzale per impostare lo stile del link.
<!DOCTYPE html><html> <head> <title>Esercizio 6</title> <style> :root { --colore-sfondo-link: cyan; --colore-testo-link: navy; }
a { background-color: var(--colore-sfondo-link); color: var(--colore-testo-link); text-decoration: none; padding: 5px; display: inline-block; margin: 10px; } </style> </head> <body> <a href="#">Questo è un link con stile variabile</a> <a href="#">Questo è un altro link</a> </body></html>
Esercizio 7
Crea una variabile CSS per la larghezza del bordo di un elemento `div` e utilizzala per impostare lo stile del bordo.
<!DOCTYPE html><html> <head> <title>Esercizio 7</title> <style> :root { --larghezza-bordo: 3px; }
div { width: 200px; height: 100px; border: var(--larghezza-bordo) solid black; } </style> </head> <body> <div>Questo è un div con bordo di larghezza variabile.</div> </body></html>
Esercizio 8
Crea una variabile CSS per il margine e il padding di un elemento `p` e utilizzale per impostare lo spazio intorno al paragrafo.
<!DOCTYPE html><html> <head> <title>Esercizio 8</title> <style> :root { --margine-paragrafo: 20px; --padding-paragrafo: 10px; }
p { margin: var(--margine-paragrafo); padding: var(--padding-paragrafo); background-color: lightpink; } </style> </head> <body> <p>Questo è un paragrafo con spaziatura variabile.</p> </body></html>
Esercizio 9
Crea una variabile CSS per il colore di sfondo e la dimensione del font di un paragrafo all'interno di un div e utilizzale per impostare lo stile del div e del paragrafo.
<!DOCTYPE html><html> <head> <title>Esercizio 9</title> <style> :root { --colore-sfondo-div: lavender; --dimensione-font-paragrafo: 20px; }
div { background-color: var(--colore-sfondo-div); padding: 20px; }
p { font-size: var(--dimensione-font-paragrafo); } </style> </head> <body> <div> <p>Questo è un paragrafo all'interno di un div con stile variabile.</p> </div> </body></html>
Esercizio 10
Crea una variabile CSS per il colore di sfondo di un link quando viene fatto clic su di esso e utilizzala per impostare lo stile del link cliccato.
<!DOCTYPE html><html> <head> <title>Esercizio 10</title> <style> :root { --colore-sfondo-link-cliccato: lightcoral; }
a:active { background-color: var(--colore-sfondo-link-cliccato); } </style> </head> <body> <a href="#">Clicca qui</a> </body></html>