1.1 Colore
CSS (Cascading Style Sheets) offre tante proprietà per stilizzare il testo. Tra queste, quelle fondamentali sono
color, font-size e font-weight. Queste proprietà permettono di controllare il colore
del testo, la sua dimensione e il peso del font rispettivamente. Vediamole un po' più nel dettaglio.
La proprietà color imposta il colore del testo. Può essere utilizzata con diversi formati colore, includendo nomi di colori, valori esadecimali, RGB, RGBA, HSL e HSLA.
Esempi di utilizzo
1. Nomi di colori:
p {
color: red;
}
2. Valori esadecimali:
p {
color: #ff0000;
}
3. RGB e RGBA:
p {
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5); /* Rosso trasparente */
}
4. HSL e HSLA:
p {
color: hsl(0, 100%, 50%);
color: hsla(0, 100%, 50%, 0.5); /* Rosso trasparente */
}
Esempio di utilizzo in HTML:
p {
color: #3498db; /* Colore blu */
}
<body>
<p>Questo testo sarà blu.</p>
</body>
1.2 Proprietà font-size
La proprietà font-size imposta la dimensione del testo. Il valore può essere specificato in diverse unità, come
pixel (px), unità relative (em, rem, %), derivate dai pixel (mm, cm, pt, pc), vw e vh
(viewport width e viewport height), e altre.
Esempi di utilizzo
1. Pixel:
p {
font-size: 16px;
}
2. Relative:
%, em, rem
p {
font-size: 150%; /* 150% della dimensione del font base */
font-size: 1.5em; /* 1.5 volte più grande della dimensione del font base */
font-size: 1.5rem; /* dimensione relativa alla dimensione del font dell'elemento <html> */
}
3. Unitá del viewport:
p {
font-size: 2vw; /* 2% della larghezza del viewport */
font-size: 2vh; /* 2% dell'altezza del viewport */
}
Esempio di utilizzo in HTML:
p {
font-size: 18px; /* Dimensione del testo 18 pixel */
}
<body>
<p>Questo testo sarà di dimensione 18 pixel.</p>
</body>
1.3 Proprietà font-weight
La proprietà font-weight imposta il peso del testo. I valori possono essere specificati come parole chiave
(normal, bold, bolder, lighter) o valori numerici da
100 a 900, dove 400 corrisponde a normal e
700 corrisponde a bold.
Esempi di utilizzo
1. Parole chiave:
p {
font-weight: bold;
}
2. Valori numerici:
p {
font-weight: 300; /* Testo leggero */
font-weight: 700; /* Equivalente a bold */
}
Esempio di utilizzo in HTML:
p {
font-weight: 700; /* Testo bold */
}
<body>
<p>Questo testo sarà bold.</p>
</body>
GO TO FULL VERSION