Cambiare lo stile del testo

Nei post precedenti abbiamo visto come modificare i parametri di colore, grandezza e aspetto del testo di un titolo. E se li volessi cambiare tutti e tre insieme e magari aggiungerne anche qualche altro riguardante per esempio, il testo evidenziato, o incorniciato ecc.?

A questo scopo è molto utile il tag <span style> col quale possiamo modificare varie caratteristiche del testo che c'interessa.

Il titolo del mio post è ad esempio il risultato di questo tag:

<span style='color: blue; background-color: yellow; font-family: Arial'>ecco un esempio</span>

con questo tag io vado ad applicare al testo le seguenti proprietà:

1) il colore, a cui ho dato valore blu  (color:blue;)

2) il colore dello sfondo del testo a cui ho dato valore giallo (background-color:yellow;)

3) il carattere a cui ho dato valore Arial (font-family: Arial)

E' chiaro però che posso cambiare tantissime altre cose in un testo e queste cose (le proprietà appunto) hanno ognuna una parola che le definisce, e che va inserita insieme ai due punti (:) seguiti dal valore nel tag <span style>. 

esempio: 'color: #FF0000 (color è una proprietà, #000000 è il valore che io dò a color cioè, in questo caso, nero.

Ora io vi scrivo qui sotto un elenco delle proprietà più comuni, così voi potete inserirle nel tag <span style> a seconda dello stile che volete dare al vostro testo. Mi raccomando di non cambiare la sintassi (l'uguale, l'apostrofo d'apertura, i due punti ecc., ricordate che basta cambiare una virgola perchè il tag non dia il risultato atteso).

color:  definisce il colore, dopo i due punti mettete il codice colore, es. #FF0033 oppure il nome del colore in inglese (red, green ecc.)

background-color: definisce il colore dello sfondo del testo, anche qui dopo i due punti mettete il codice colore o il suo nome in inglese.

font-size: definisce la dimensione del carattere usato; si può definire in modo assoluto usando diverse unità di misura (p.es. mm, cm, px) p.es. font-size: 16px;, oppure definire in modo relativo p.es. font-size: 120%; font-style: definisce lo stile del carattere; a cui possiamo dare valore normal, italic (cioè corsivo leggero) o oblique (corsivo più inclinato). 

font-weight: definisce il peso del carattere usato; può essere normal, bold (grassetto), bolder(un grassetto più marcato), lighter(grassetto più leggero) oppure un numero da 100 (molto sottile) a 900 (grassetto forte). border-width: definisce un bordo che può avere valore thin (sottile), medium (medio), thick (spesso)  oppure  un numero da 1px in su; 

border-style:  ovvero lo stile del bordo che può essere solid (linea continua), dotted (linea punteggiata), dashed (linea tratteggiata), double (doppia). 

border-color: che definisce il colore del bordo e a cui diamo l'ormai noto valore del codice del colore o il suo nome in inglese.  

Quindi, in definitiva il tag che dovete copiare-e-incollare prima e dopo il vostro titolo è il seguente:

<span style='proprietà: valore; proprietà: valore'>qui va il titolo</span>

dove al posto di proprietà mettete color o font-style o border-style ecc., mentre al posto di valore mettere il valore che volete dare (red, 1px, arial ecc.). Potete mettere tante coppie proprietà: valore quante ve ne servono.

Spero di essere stata abbastanza semplice nella spiegazione, ma se avete qualche dubbio, chiedete pure. Ovviamente questi tag si possono applicare non solo al titolo ma anche all'interno del post. In questo caso però vanno inseriti nella versione HTML del vostro post, anche se queste cose le potete fare tranquillamente dalla barra dei comandi che avete in alto nella scheda del post. Cmq per far ciò in linguaggio HTML dovete cliccare in alto a dx sull'etichetta "Modifica HTML", vi si aprirà il post nella versione in codice html, cercate il vostro testo all'interno del codice e inserire il tag sempre prima e dopo il testo come vi ho insegnato. Meglio ancora, fate prima un esperimento con un post di prova, non vorrei vi si rovinasse qualche lavoro!

Se provate e ci riuscite, sarei felice di saperlo! 

Ciao ciao!