- Allineamento del testo (text-align)
- Decorazione del testo (text-decoration)
- Trasformazione del testo (text-transform)
- Spaziatura del testo (text-indent)
- Ombreggiatura (text-shadow)
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;
}
