Colore del testo

La proprietà color è usata per impostare il colore del testo. Il colore è specificato con:

• un nome di colore - come "red"
• un valore HEX- come "#ff0000"
• un valore RGB - come "rgb(255,0,0)"

Il colore del testo di default per una pagina è definito nel selettore body

Esempio

body {
  color: blue;
}

h1 {
  color: green;
}

Colore di testo e colore di sfondo

In questo esempio, definiamo sia la proprietà background-color che la proprietà color:

Esempio

body {
  background-color: lightgrey;
  color: blue;
}

h1 {
  background-color: black;
  color: white;
}

Allineamento del testo

La proprietà text-align è usata per impostare l'allineamento orizzontale di un testo.

Un testo può essere allineato a sinistra, a destra, centrato o giustificato.

Il seguente esempio mostra un allineamento centrato, a sinistra e a destra (l'allineamento a sinistra è il valore di default se il testo è da sinistra a destra, e allineato a destra di default se il testo è in direzione da destra a sinistra):

Esempio

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

Quando la proprietà text-align è impostata a "justify", ciascuna linea è allungata in modo che ogni linea abbia uguale larghezza, e i margini sinistro e destro siano dritti (come nelle riviste e nei giornali):

Esempio

div {
  text-align: justify;
}

Direzione del testo

Le proprietà direction e unicode-bidi possono essere usate per cambiare la direzione del testo di un elemento:

Esempio

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

Allineamento Verticale

La proprietà vertical-align imposta l'allineamento verticale di un elemento.

Questo esempio dimostra come impostare l'allineamento verticale di una immagine in un testo:

Esempio

img.top {
  vertical-align: top;
}

img.middle {
  vertical-align: middle;
}

img.bottom {
  vertical-align: bottom;
}

Decorazione del testo

La proprietà text-decoration è usata per impostare o rimuovere decorazioni dal testo.

Il valore text-decoration: none; è spesso usato per rimuovere la sottolineatura dai links:

Esempio

a {
  text-decoration: none;
}

Gli altri valori di text-decoration sono usati per decorare il testo:

Esempio

h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

Trasformazione del testo

La proprietà text-trasform è usata per specificare lettere in maiuscolo e minuscolo in un testo.

Può essere usata per modificare tutto in maiuscolo o in minuscolo o scrivere in maiuscolo la prima lettera di ogni parola:

Esempio

p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}

CSS Spaziatura del testo

Indentazione del testo

La proprietà text-indent è usata per specificare l'indentazione della prima linea di un testo:

Esempio

p {
  text-indent: 50px;
}

Spaziatura delle lettere

La proprietà letter-spacing è usata per specificare lo spazio tra i caratteri di un testo.

Il seguente esempio dimostra come incrementare o diminuire lo spazio tra caratteri:

Esempio

h1 {
  letter-spacing: 3px;
}

h2 {
  letter-spacing: -3px;
}

Altezza della linea

La proprietà line-height è usata per specificare lo spazio tra le linee:

Esempio

p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}

Spaziatura delle parole

La proprietà word-spacing è usata per specificare lo spazio tra le parole di un testo.

Il seguente esempio dimostra come incrementare o diminuire lo spazio tra le parole:

Esempio

h1 {
  word-spacing: 10px;
}

h2 {
  word-spacing: -5px;
}

Spazi bianchi

La proprietà white-space specifica come sono gestiti gli spazi bianchi dentro un elemento.

Questo esempio dimostra come disabilitare il testo a capo all'interno di un elemento:

Esempio

p {
  white-space: nowrap;
}

L'ombra del testo

La proprietà text-shadow aggiunge un'ombra al testo.

Nel suo uso più semplice, si può specificare l'ombra orizzontale (2px) e l'ombra verticale (2px):

Esempio

h1 {
  text-shadow: 2px 2px;
}

Poi, ad es. si può aggiungere un colore (rosso)all'ombra:

Esempio

h1 {
  text-shadow: 2px 2px red;
}

Successivamente, si può aggiungere un effetto sfocatura (5px) all'ombra:

Esempio

h1 {
  text-shadow: 2px 2px 5px red;
}

Tutte le proprieta di testo in CSS