CSS: FORMATTAZIONE DEL TESTO

di

Creiamo prima di tutto la seguente Pagina .html

<!doctype html>
<html lang = "it">
<head>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<h1> Titolo di esempio </h1>
<h2> Altro Titolo di esempio </h2>
<h3> titolo terzo </h3>
<p>Un paragrafo</p>


</body>
</html>

ALLINEAMENTO DEL TESTO

text-align è la proprietà che regola l’allineamento del testo che può essere:

  • allineato a destra (right)
  • allineato a sinistra (left)
  • centrato (center)

Compiliamo lo style.css come segue

h1 {
text-align: right
}
h2 {
text-align: left
}h3{
text-align: center
}

DECORAZIONE DEL TESTO

text-decoration è la proprietà del css che consente di decorare il testo con una:


  • sovralineatura (overline)
  • linea attraverso (line-trought)
  • sottolineatura (underline)

Compiliamo il documento style.css come segue

h1 {
text-decoration: overline;
}

h2 {
text-decoration: underline;
}
h3 {
text-decoration: line-through;
}

TRASFORMAZIONE DEL TESTO

text-transform è la proprietà del css che trasforma le lettere del testo maiuscole o minuscole:

  • tutto maiuscolo (uppercase
  • tutto minuscolo (lowecase)
  • l’ iniziale di ogni parola maiuscola (capitalize)

Compiliamo il file css come segue:

h1 {
text-transform: uppercase;
}

h2 {
text-transform: lowercase;
}
h3 {
text-transform: capitalize;
}

SPAZIATURA DEL TESTO

E’ possibile tramite il css definire :

  • l’identazione (text-indent)
  • l’altezza della linea (line-height)
  • lo spazio tra i caratteri (letter-spacing)
  • lo spazio tra le parole (word-spacing)

Compiliamo il css come segue per vedere in azione i primi due punti (identazione e altezza)

h1 {
text-indent: 100px;
}

h2 {
line-height: 5px;
}
h3 {
line-height: 200px;
}

Compiliamo il file css come segue per vedere le spaziature tra parole e caratteri

h1 {
letter-spacing: 5px;
}

h2 {
letter-spacing: -2px;
}

Ombreggiatura

text-shadow è la proprietà che aggiunge un ombreggiatura al testo e può essere:

  • in altezza
  • in larghezza
  • colorata

Compiliamo il file css come segue

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

Lascia un commento