|
Prima di passare in rassegna le categorie di attributi vorrei ricordare la loro sintassi per poterli adoperare, e questo qualunque sia il modo che deciderete di usare.
Gli attributi devono essere inseriti all'interno di parentesi graffe { } e laddove in HTML verrebbe usato un
"=" (uguale)
viene invece usato ":" (due punti). Argomenti consecutivi sono
separati da ";" (punto e virgola) invece che
da "," (virgola). Inoltre molti
argomenti sono divisi da - (trattini)
anche se questi fanno parte integrante del nome stesso.
Per i parametri ad essi associabili fare riferimento a
questa tabellina
Passiamo in rassegna gli
attributi del testo:
text-align : center | left | right | justify ;
Allineamento del testo, valori possibili : centrato , sinistra, destra , giustificato. Meglio evitare se possibile il giustificato in quanto produce effetti diversi nei due browser.
P {text-align: center;}
DIV {text-align: left;}
|
text-align: center
text-align: left
text-align: right
text-decoration : overline | underline | line-through | none ;
Decorazione del testo,
valori possibili :
overline = sopralineato, underline = sottolineato, line-through = sbarrato, none = nessuno. E' anche possibile combinarne più di uno, per esempio inserendo sia
underline che overline. underline.
"None" lo si adopera in particolar modo con i link in quanto toglie la fastidiosa sottolineatura che altrimenti avrebbero per default.
P {text-decoration: none;}
h1 {text-decoration: underline;}
|
text-decoration:overline sopralineato
text-decoration:none nessuno
text-decoration:underline sottolineato
text-decoration:line-through sbarrato
text-decoration:overline underline entrambi sopralineato e sottolineato.
text-indent : lunghezza
| percentuale ;
Rientro della prima riga di un blocco. E' possibile fare uso anche di numeri negativi per un rientro esterno.
P {text-indent: 12px;}
DIV {text-indent: 20%;}
|
text-indent : -5px
text-indent : 15px
text-transform : capitalize | uppercase | lowercase | none ;
Trasformazione in maiuscolo o minuscolo dell'interno blocco di testo (uppercase lowercase).
Capitalize trasforma in maiuscola la prima lettera di ogni parola.
P {text-transform: lowercase;}
h2 {text-transform: capitalize;}
|
text transform: lowercase
text transform: uppercase
text trasform: capitalize
line-height : normal | numero | lunghezza | percentuale ;
Altezza della riga del testo, valori possibili : normal , numero , lunghezza , percentuale. Con il valore normal il testo non avrà alcuna variazione.
P {line-height: 3em;}
DIV {line-height: 50%;}
|
line-height: 3em
line-height: 50%
letter-spacing : numero ;
Spazio fra le lettere che compongono il testo. il numero puo
essere espresso in tutti i modi possibili come riportato in
questa tabellina
P {letter-spacing: 1em;}
DIV {letter-spacing: 2px;}
|
vertical-align : baseline | sub | super | top | middle | bottom | text-top | text-bottom ;
Allineamento verticale del testo rispetto ad un riferimento assoluto o all'elemento che lo include.
P {vertical-align: middle;}
DIV {vertical-align: top;}
SUB {vertical-align: 60%;}
|
 vertical-align: baseline rispetto all'immagine di lato.
vertical-align: sub rispetto all'immagine di lato.
vertical-align: super rispetto all'immagine di lato.
vertical-align: top rispetto all'immagine di lato.
|
