Guida alla formattazione del testo in CSS

Quando si progetta un sito Web, la formattazione del testo è un aspetto importante per la creazione di un'interfaccia accattivante e leggibile.

I CSS forniscono diverse proprietà che ti consentono di personalizzare vari elementi di testo, inclusi colore del carattere, dimensione, famiglia, allineamento, spaziatura e altro.

Di seguito è riportata una guida dettagliata su ciascuna proprietà di formattazione del testo, insieme a esempi per ciascuna proprietà.

 

Colore del carattere

Parametro: un valore di colore, che può essere un nome di colore(ad es., red), un codice esadecimale(ad es. "#FF0000"), un valore RGB(ad es. "rgb(255, 0, 0)") o un valore RGBA(ad es., "rgba(255, 0, 0, 0.5)").

p {  
  color: blue;  
}  

 

Dimensione del font

Parametro: un valore di dimensione, che può essere in pixel(ad es. "16px"), unità em(ad es. "1em"), unità rem(ad es. "1.2rem"), unità di larghezza della finestra(ad es. "10vw"), unità di altezza della finestra(ad es. "5vh") o altre unità.

h1 {  
  font-size: 24px;  
}  

 

Famiglia di font

Parametro: un elenco di famiglie di caratteri, specificato nell'ordine preferito. È possibile specificare il nome del font(ad esempio, Arial) o racchiudere i nomi dei font contenenti caratteri speciali tra doppi apici(ad esempio, " Times New Roman).

body {  
  font-family: Arial, sans-serif;  
}  

 

Peso e stile del carattere

Parametro font-weight: normal(default), bold, bolder, lighter, o valori numerici da 100 a 900.

Parametro font-style: normal(default), italic.

em {  
  font-style: italic;  
}  
  
strong {  
  font-weight: bold;  
}  

 

Decorazione del testo

Parametro: "none"(default), "underline", "overline", "line-through"  o una combinazione di valori separati da spazi.

a {  
  text-decoration: underline;  
}  
  
del {  
  text-decoration: line-through;  
}  

 

Allineamento del testo

Parametro: "left"(default), "right", "center" or "justify".

p {  
  text-align: center;  
}  

 

Altezza linea e margini

Parametro line-height: un valore numerico o una percentuale della dimensione del carattere corrente.

Margine del parametro: un valore di misurazione, come pixel(px), unità em(em), unità rem(rem), ecc.

p {  
  line-height: 1.5;  
  margin-bottom: 10px;  
}  

 

Disposizione del testo multicolonna

Parametro: un numero intero positivo o "auto"(default).

.container {  
  column-count: 2;  
}  

 

Modifica del colore del testo al passaggio del mouse

Nessun parametro specifico, usa solo la pseudo-classe :hover.

a:hover {  
  color: red;  
}  

 

Cambia colore del testo sullo stato(attivo, visitato)

Nessun parametro specifico, usa solo le pseudo-classi :active  e :visited.

a:visited {  
  color: purple;  
}  

 

Ci auguriamo che le spiegazioni e gli esempi di cui sopra ti abbiano aiutato a capire come utilizzare e personalizzare le proprietà di formattazione del testo nei CSS per creare un'interfaccia di testo visivamente accattivante e accattivante sul tuo sito web.