Gli attributi per il Testo

0
67

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.

PS: vuoi imparare a usare l'HTML come un vero professionista in pochissimo tempo?

Segui il miglior video corso di HTML

corso HTML5

Impara la tecnologia che sta ALLA BASE del mondo Internet di oggi, in particolar modo se vuoi creare siti facilmente indicizzabili e responsive.

12345
33 Recensioni, aggiornato l'8 agosto 2018

CONDIVIDI
Articolo precedenteGli attributi per il posizionamento dei box 
Prossimo articoloIntroduzione all’HTML5
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

Please enter your comment!
Please enter your name here