> 
- Home Page
- > Tutorial CSS
- > Proprietà CSS per il testo
Mediante una serie di proprietà CSS è possibile controllare l'aspetto del testo delle nostre pagine. Possiamo modificare i font, il colore ed altre proprietà.
Proprietà CSS per il testo
Testo CSS
Vediamo come prima cosa una tabella delle proprietà con la descrizione ed i vaolri ammissibili per la proprietà. Vedremo in seguito le varie proprietà in dettaglio, con degli esempi esplicatici per ognuna.
Proprietà:
| Proprieta | Descrizione | Valori possibili | Esempi |
|---|---|---|---|
| color | Colore del testo | un colore | |
| direction | Direzione del testo | ltr rtl |
|
| letter-spacing | Lo spazio tra le lettere di ciascuna parola | normal lunghezza (px, em, pt) |
|
| text-align | Definisce l'allineamento del testo | left right center justify |
|
| text-decoration | La decorazione lel testo (sottolineato, barrato etc...) | none underline overline line-through blink |
|
| text-indent | Indenta la prima riga di un paragrafo | lunghezza percentuale |
|
| text-shadow | Per definire l ’ombra del testo | none colore lunghezza |
|
| text-transform | Applica delle trasformazioni alle lettere | none capitalize uppercase lowercase |
|
| white-space | Definisce come vengono gestiti gli spazi bianchi | normal pre nowrap |
|
| word-spacing | Per impostare lo spazio tra due parole diverse | normal lunghezza |
color
Serve ad impostare il colore di un testo. Possiamo inserire i valori in tre diversi formati: mediante il nome (es. red), mediante il valore esadecimale del colore (es. #ff0000) oppure tramite l'rgb (es. rgb(255,0,0)).
Esempio
.rosso {
color: red;
/*
oppure
color: #ff0000;
o infine
color: rgb(255,0,0);
*/
}
.verde {
color: green;
}
.blue {
color: blue;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ direction
Serve ad impostare la direzione del testo, i valori possibili sono ltr (Da sinistra a destra) e rtl (Da destra a sinistra). Tipicamente viene usato per visualizzare del testo in lingue che hanno il senso di lettura al contrario dal nostro.
Esempio
.DestraSinistra {
direction: rtl;
}
.SinistraDestra {
direction: ltr;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ letter-spacing
Aumenta o diminuisce lo spazio tra i caratteri possiamo dare un valore in lunghezza (px, em, pt) oppure il default (normal). E' anche possibile dare dei valori negativi.
Esempio
.piuSpaziato {
letter-spacing: 10px;
}
.menoSpaziato {
letter-spacing: -1px;
}
.normale{
letter-spacing: normal;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤
text-align
Definisce l'allineamento del testo.
Valori possibili sono
- left (a sinistra)
- center (centrato)
- right (a destra)
- justify (giustificato)
Esempio
span{
width:300px;
border:1px solid #000000;
padding:10px;
margin:2px;
} /*definisco lo stile dei contenitori di testo*/
.sinistra {
text-align:left;
}
.centro {
text-align:center;
}
.destra{
text-align:right;
}
.giustificato{
text-align:justify;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤
text-decoration
Serve per decorare il testo.
Valori possibili sono
- none (Testo normale)
- underline (Testo sottolineato)
- overline (Testo con una riga sopra)
- line-through (Testo barrato)
- blink (Testo lampeggiante, evitatelo...)
a.linkSpeciale {
text-decoration: none;
}
a.linkSpeciale:hover {
text-decoration: underline overline;
}
a.linkSpeciale:active {
text-decoration: line-through;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ text-indent
Indenta la prima linea di testo in un elemento.
Valori possibili sono:
- lunghezza (definisce una indentazione fissa in pixel, o punti)
- percentuale (in percentuale rispetto all'elemento contenitore)
Esempio
p {
width:300px;
border:1px solid #000000;
margin:2px;
position: relative
}
.10pixel {
text-indent: 20px;
}
.30percento {
text-indent: 30%;
}
.meno10pixel {
text-indent: -10px;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ text-shadow
Per definire l ’ombra del testo
Valori possibili sono:
- none
- colore
- lunghezza
Esempio
p{
text-shadow: Navy 10px 10px, Red 10px 10px;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ text-transform
Applica delle trasformazioni alle lettere
Valori possibili sono:
- none (Testo normale)
- capitalize (Tutte le parole iniziano con una maiuscola)
- uppercase (Tutto maiuscolo)
Esempio
span{
width:300px;
border:1px solid #000000;
padding:10px;
margin:2px;
} /*definisco lo stile dei contenitori di testo*/
.nessuno {
text-transform:none;
}
.primeMaiuscole
{
text-transform:capitalize;
}
.maiuscolo
{
text-transform:uppercase;
}
.minuscolo
{
text-transform:lowercase;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ white-space
Viene usato per definire come devono essere gestiti gli spazi bianchi.
Valori possibili sono:
- normal (Gli spazi sono ignorati dal browser)
- nowrap (Gli spazi vengono preservati, come se si trattase di un tag <pre>)
- pre (Il testo non va mai a capo, ma continua nella stessa linea fino a quando non incontriamo un tag <br>)
Esempio
p {
width:300px;
border:1px solid #000000;
padding:10px;
margin:2px;
} /*definisco lo stile dei contenitori di testo*/
.aCapo {
white-space: normal;
}
.MaiACapo {
white-space: nowrap;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ word-spacing
Incrementa o diminuisce lo spazio tra le parole
Valori possibili sono:
- normal (Spazio normale tra le parole)
- lunghezza (uno spazio fissato in px, em, pt)
- pre
Esempio
p {
width:300px;
border:1px solid #000000;
padding:10px;
margin:2px;
} /*definisco lo stile dei contenitori di testo*/
.normale {
word-spacing: normal;
}
.20pixel {
word-spacing: 20px
}
.meno5pixel {
word-spacing: -5px
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤
