Prima di passare in rassegna le categorie di attributi vorrei ricordare ancora una volta la loro sintassi, a prescindere da quale dei vari modi deciderete di usare.

Abbiamo detto che gli attributi devono essere inseriti all’interno di parentesi graffe { } e laddove in HTML verrebbe usato un “=” (uguale) nei css viene invece usato “:” (due punti).

Argomenti consecutivi sono separati da un “;” (punto e virgola) invece che dalla “,” (virgola). Inoltre molti argomenti sono divisi da “-“ (trattino centrale) che fa parte integrante del nome stesso.

Gli spazi vuoti ed i ritorno a capo non hanno alcuna influenza.

selettore {
proprietà: valore;
proprietà: valore;
}

 

Per i valori fare riferimento a questa tabellina.

Vediamo alcuni degli attributi maggiormente adoperati per il testo:


 

text-alignleft | right | center | justify

Allineamento del testo, valori possibili: sinistra, destra, centrato, giustificato.

p    {text-align: left;}
p    {text-align: right;}
div  {text-align: center;}
div  {text-align: justify;}

 

text-align: left; paragrafo allineato a sinistra.

 

text-align: right; paragrafo allineato a destra.

 

text-align: center; paragrafo allineato al centro.

 

text-align: justify; paragrafo allineato al centro con giustificazione, che cosa è la giustificazione? Guardate attentamente i due margini: destro e sinistro, potrete notare che il testo è allineato sia a destra che a sinistra; per fare questo il comando aggiunge automaticamente degli spazi vuoti fra le parole.

Torna ad inizio pagina


 

text-decorationoverline | underline | line-through | blink | 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. None lo si adopera in particolar modo con i link in quanto toglie la sottolineatura che altrimenti avrebbero per default.

h1   {text-decoration: overline;}
p    {text-decoration: underline;}
div  {text-decoration: overline underline;}
p    {text-decoration: line-through;}
p    {text-decoration: blink;}
p    {text-decoration: none;}

 

text-decoration: overline; – sopralineato

 

text-decoration: underline; – sottolineato

 

text-decoration: overline underline; – sopra e sottolineato

 

text-decoration: line-through; – barrato

 

text-decoration: blink; – lampeggiante (non supportato da IE)

 

text-decoration: none; – nessuna decorazione.

Torna ad inizio pagina


 

text-indentlunghezza | percentuale

Indentazione, rientro della prima riga di un blocco di testo dal margine sinistro. 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: 25px

Torna ad inizio pagina


 

text-transformcapitalize | uppercase | lowercase

Capitalize trasforma in maiuscola la prima lettera di ogni parola, uppercase e lowercase trasformano in maiuscolo o minuscolo l’interno blocco di testo.

 

P  {text-transform: capitalize;}
P  {text-transform: uppercase;}
P  {text-transform: lowercase;}

 

Text-Transform: Capitalize; Testo Di Prova

 

TEXT-TRANSFORM: UPPERCASE; TESTO DI PROVA

 

text-transform: lowercase; testo di prova

Torna ad inizio pagina


 

line-heightnormal | numero | percentuale

Interlinea, altezza della riga del testo, valori possibili: normal, numero, percentuale. Con il valore normal il testo non avrà alcuna variazione. Il numero può essere espresso in em o in percentuale.

 

p    {line-height: 3em;}
div  {line-height: 50%;}

 

line-height: 3em

 

line-height: 50%

Torna ad inizio pagina


 

letter-spacingnumero

Spazio fra le lettere che compongono il testo. Il numero può essere espresso in tutti i modi possibili come riportato nella tabella parametri.

 

p    {letter-spacing: 1em;}
div  {letter-spacing: 2px;}

 

letter-spacing: 1em

 

letter-spacing: 2px

Torna ad inizio pagina


 

vertical-alignbaseline | sub | super | top | middle | bottom | text-top | text-bottom

Allineamento verticale del testo rispetto ad un riferimento assoluto o all’elemento che lo include.

b    {vertical-align: middle;}
span  {vertical-align: top;}
sub  {vertical-align: 60%;}

 

 vertical-align: baseline rispetto alle immagini di lato 

 

 vertical-align: sub rispetto alle immagini di lato 

 

 vertical-align: super rispetto alle immagini di lato 

 

 vertical-align: top rispetto alle immagini di lato 

Torna ad inizio pagina


 

Continua: Attributi per il carattere

Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.

Di Redazione

La nostra redazione è costantemente impegnata nel ricercare fonti attendibili e produrre contenuti informativi, guide e suggerimenti utili gratuiti per i lettori di questo sito.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *