Colori, tipografia e box model
Applichi i colori con valori hex, rgb e hsl, scelga i font, imposti dimensioni e altezze di riga e utilizzi margin, border e padding per distanziare gli elementi.
Colori, tipografia e box model è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. 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 Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
Valori di colore CSS
CSS supporta diversi formati di colore. Utilizzi quello più chiaro nel contesto specifico: i codici esadecimali per i colori del marchio, hsl() per modificare facilmente i colori, rgb() per i valori generati programmaticamente e i colori con nome per la prototipazione rapida.
color: #2b6cb0; /* hex */
color: rgb(43, 108, 176); /* rgb */
color: hsl(212, 61%, 43%); /* hsl */
color: royalblue; /* named */
color: rgba(0,0,0,0.5); /* rgba with alpha */Colori e immagini di sfondo
Imposti lo sfondo degli elementi con background-color. Utilizzi background-image con gradienti o URL. La forma abbreviata background combina colore, immagine, posizione, dimensione e ripetizione in un'unica dichiarazione.
background-color: #f7fafc;
background-image: linear-gradient(135deg, #667eea, #764ba2);
background: url('/hero.webp') center / cover no-repeat #1a202c;Proprietà dei font
Controlli la tipografia con: font-family (carattere tipografico), font-size (em, rem, px), font-weight (100–900), font-style (corsivo), line-height (interlinea) e letter-spacing (spaziatura tra lettere).
body {
font-family: 'Inter', system-ui, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: #1a202c;
}Proprietà del testo
Altri stili del testo: text-align (sinistra, centro, destra, giustificato), text-decoration (sottolineato, barrato, nessuno), text-transform (maiuscolo, iniziali maiuscole), text-overflow: ellipsis per troncare il testo.
h1 { text-align: center; text-transform: uppercase; }
a { text-decoration: none; }
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}rem vs em vs px
px è assoluto. em è relativo alla dimensione del carattere dell'elemento stesso (e si propaga nella cascata). rem è relativo alla dimensione del carattere dell'elemento radice (quindi è prevedibile). Utilizzi rem per la maggior parte delle dimensioni, così da rispettare le preferenze dell'utente relative ai caratteri.
html { font-size: 16px; } /* 1rem = 16px */
.card { padding: 1.5rem; } /* 24px */
.small { font-size: 0.875rem; } /* 14px */Il modello a riquadri
Ogni elemento HTML è un riquadro rettangolare composto da quattro livelli: contenuto (le dimensioni effettive dell'elemento), padding (lo spazio interno al bordo), bordo e margine (lo spazio esterno al bordo).
/* Total width = content + padding + border */
.box {
width: 200px;
padding: 16px;
border: 2px solid #ccc;
margin: 24px;
}box-sizing: border-box
Per impostazione predefinita (content-box), padding e bordo vengono aggiunti alla larghezza dichiarata. Con box-sizing: border-box, padding e bordo sono inclusi nella larghezza dichiarata: è quasi sempre ciò che serve.
/* Apply globally */
*, *::before, *::after {
box-sizing: border-box;
}
/* Now width: 200px includes padding and border */
.card {
width: 200px;
padding: 20px; /* doesn't add to width */
}Collasso dei margini
I margini verticali tra elementi block adiacenti collassano: si applica solo il margine maggiore. Collassano anche i margini di un genitore e del suo primo o ultimo figlio. I figli di Flexbox e Grid non fanno collassare i margini.
Forma abbreviata di padding
La forma abbreviata padding: top right bottom left imposta tutti i lati. Due valori impostano le dimensioni verticali e orizzontali. Tre valori impostano rispettivamente alto, orizzontale e basso.
padding: 16px; /* all sides */
padding: 8px 16px; /* top/bottom left/right */
padding: 8px 16px 24px; /* top left/right bottom */
padding: 8px 16px 24px 32px; /* top right bottom left */Proprietà dei bordi
Imposti i bordi con la forma abbreviata border: width style color. Per i singoli lati utilizzi, ad esempio, border-top. Utilizzi border-radius per gli angoli arrotondati. outline è simile, ma non influisce sul layout.
.card {
border: 1px solid #e2e8f0;
border-radius: 8px;
}
button:focus {
outline: 2px solid #3182ce;
outline-offset: 2px;
}Overflow
overflow: hidden ritaglia il contenuto che supera le dimensioni dell'elemento. overflow: scroll aggiunge le barre di scorrimento. overflow: auto aggiunge le barre di scorrimento solo quando necessario. Utilizzi overflow-x e overflow-y per controllare gli assi in modo indipendente.
Verifica rapida
Con box-sizing: border-box e width: 300px; padding: 20px; border: 2px solid, qual è la larghezza totale visualizzata dell'elemento?
Riepilogo: colori, tipografia e modello a riquadri
Imposti i colori con hex, rgb o hsl. Applichi i font con font-family, dimensione, peso e line-height. Ogni elemento è un riquadro: contenuto + padding + bordo + margine. Abiliti globalmente box-sizing: border-box per ottenere dimensioni prevedibili.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 41
- Lezioni
- 163
Domande Frequenti
La lezione «Colori, tipografia e box model» è gratuita?
Sì — il testo completo di «Colori, tipografia e box model» è 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 Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.
Cosa imparerò in «Colori, tipografia e box model»?
Applichi i colori con valori hex, rgb e hsl, scelga i font, imposti dimensioni e altezze di riga e utilizzi margin, border e padding per distanziare gli elementi. Eserciti Frontend Academy 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 Frontend Academy?
Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Colori, tipografia e box model»?
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 Frontend Academy?
Sì. Ogni lezione Frontend Academy 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.
Tutte le lezioni di questo corso
- Selettori e cascata
- Colori, tipografia e box model
- Display: basi di block, inline, flex e grid
- Posizionamento: relative, absolute, fixed, sticky