Colore e sfondo
Colore e sfondo
Colore e sfondo è una lezione HTML for Kids gratuita su CoddyKit. Questa è la lezione 1 di 1. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML for Kids, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML for Kids include 1 lezioni in totale.
Introduzione
Salve,
Possiamo cambiare i colori del testo con la proprietà color.
Possiamo assegnare a questa proprietà valori di tipo RGB, HEX, HSL, RGBA o HSLA.
Finora abbiamo già utilizzato la proprietà color in molti esempi. Vediamo ora il suo utilizzo con diversi tipi di valore.
<style>
#txt1{
color: red;
}
#txt2{
color: #ff0000;
}
#txt3{
color: rgb(255,0,0);
}
/*
0.4 is the alpha value.
We can define decimal values
between 1 and 0.
*/
#txt4{
color: rgba(255,0,0, 0.4);
}
</style>
<div class="box">
<h1 id="txt1">
This is red color
</h1>
<h1 id="txt2">
This is red color that defined with HEX type
</h1>
<h1 id="txt3">
This is red color that defined with RGB type
</h1>
<h1 id="txt4">
This is red color that defined with RGBA type
</h1>
</div>Sfondo
Possiamo definire gli stili dello sfondo degli elementi usando le proprietà background.
Impariamo ora a conoscere le proprietà background elencate di seguito.
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
background-color
È una proprietà utilizzata per cambiare il colore di sfondo di un elemento.
Vediamo un esempio.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
background-color: lightblue;
border:1px solid #c0c0c0;
color:#ffffff;
}
</style>
</head>
<body>
<div id="box">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Donec ante purus,
eleifend egestas tempus non, consequat ac ex..
</div>
</body>
</html>Opacità
È una proprietà utilizzata per modificare l'opacità dello sfondo di un elemento.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
background-color: lightblue;
opacity: 0.5;
border:1px solid #c0c0c0;
color:#ffffff;
}
</style>
</head>
<body>
<div id="box">
Lorem ipsum dolor
sit amet, consectetur adipiscing elit.
</div>
</body>
</html>Opacità - 2
La variazione dell'opacità CSS è mostrata nell'immagine sopra.
Immagine di sfondo
La proprietà background-image viene utilizzata per aggiungere immagini allo sfondo di un elemento.
L'immagine si trova all'indirizzo https://coddy.s3.amazonaws.com/cms/Profile_Pictures_dc459075ee.png.
Definiamo ora un elemento div e aggiungiamo un'immagine al suo sfondo.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-position
background-size
Come si può notare nell'esempio precedente, non siamo riusciti a posizionarla correttamente perché le dimensioni originali dell'immagine sono maggiori dell'area in cui la aggiungeremo.
Per risolvere questo problema utilizzeremo la proprietà background-size .
Sebbene la proprietà background-size possa assumere valori come cover, contain e auto, possiamo anche assegnarle un valore specifico per la larghezza e l'altezza.
Modifichiamo nuovamente il nostro esempio.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* the element's background would fill the
div's background without
the image's ratio being distorted*/
background-size: contain;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-position 2
Impostiamo ora il suo valore come percentuale per la proprietà background-position.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* The width and height values
are set to 50%. */
background-size: 50% 50%;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-repeat
Tuttavia, qui si presenta un problema. Poiché le dimensioni dell'immagine erano inferiori a quelle dello sfondo dell'elemento, l'immagine è stata utilizzata più volte per riempire l'area.
Per evitarlo, utilizzate la proprietà background-repeat (con i valori repeat, repeat-x, repeat-y, initial, inherit o no-repeat).
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("cdn.coddykit.com/cms/coddy_test.png");
/* The width and height
values are set to 50%. */
background-size: 50% 50%;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-attachment
Un'altra proprietà dello sfondo è background-attachment. Con questa proprietà è possibile stabilire se l'immagine di sfondo deve scorrere insieme alla pagina.
Questa proprietà accetta i valori fixed o scroll.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* The width and height
values are set to 50%. */
background-size: 50% 50%;
background-attachment:scroll;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>Abbreviazione background
Quando desideriamo applicare le proprietà dello sfondo che abbiamo imparato negli esempi precedenti, potremmo dover definire 4-5 righe di dichiarazioni.
Usiamo la proprietà abbreviata background per definire tutto in un'unica riga.
Vediamo subito il nostro esempio.
Nella proprietà background sono definiti no-repeat, le dimensioni, la posizione nella pagina e l'URL dell'immagine sorgente.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background: no-repeat center/50%
url("https://cdn.coddykit.com/cms/coddy_test.png");
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>Congratulazioni
Congratulazioni 🎉
In questa sezione abbiamo imparato i colori e gli sfondi.
Nella prossima sezione impareremo i concetti di Box, Block e Inline.
Domande Frequenti
La lezione «Colore e sfondo» è gratuita?
Sì — il testo completo di «Colore e sfondo» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML for Kids, passa a CoddyKit PRO. Il corso HTML for Kids include 1 lezioni in totale.
Cosa imparerò in «Colore e sfondo»?
Colore e sfondo Eserciti HTML for Kids con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare HTML for Kids?
Non è richiesta alcuna esperienza precedente. HTML for Kids su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 1.
Quanto tempo richiede la lezione «Colore e sfondo»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione HTML for Kids?
Sì. Ogni lezione HTML for Kids include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.