Pubblicato il 25/03/15e aggiornato il

Come trasformare testo in maiuscolo, minuscolo, maiuscoletto o evidenziarlo usando il CSS e l'HTML.

Come convertire testo in maiuscolo, minuscolo, maiuscoletto con il CSS e come evidenziare del testo.
Riprendo da un altro punto di vista il post sull'utilizzo di Word 2013 per trasformare il testo tutto in maiuscolo o in minuscolo. Al posto di usare un Editor come Word 2013 vediamo come si possa ottenere lo stesso risultato attraverso i linguaggi HTML e CSS. Sempre con il CSS è anche possibile evidenziare un testo con i colori più svariati.

Chi fosse alle prime armi con questi linguaggi può scaricare il mio ebook gratuito Guida all'HTML e al CSS per farsi una idea sull'argomento, necessariamente propedeutica. Ricordo che il CSS è un insieme di regole per determinare l'aspetto di oggetti HTML. Tali regole possono essere generali e inserite nella sezione <head> della pagina in modo da riprendere nell'HTML solo la classe di stile oppure possono anche essere inserite inline utilizzando il tag <style>. Per brevità sarà questa la soluzione che adotterò nel seguito di questo post ma volendo si può procedere incollando i CSS direttamente nel Modello o Tema del  CMS.

COME TRASFORMARE UN TESTO TUTTO IN MAIUSCOLO


Il tag da utilizzare è text-transform: uppercase; con un codice simile a questo

<span style="text-transform: uppercase;">Testo misto maiuscolo e minuscolo da visualizzare tutto in maiuscolo</span>

che produce questo risultato:

Testo misto maiuscolo e minuscolo da visualizzare tutto in maiuscolo

 

COME TRASFORMARE UN TESTO TUTTO IN MINUSCOLO


Il tag da usare stavolta è text-transform: lowercase; con un codice per esempio di un paragrafo

<p style="text-transform: lowercase;">Testo misto maiuscolo e minuscolo da visualizzare tutto in minuscolo</p>

che produce questo risultato:

Testo misto maiuscolo e minuscolo da visualizzare tutto in minuscolo

 

COME VISUALIZZARE UN TESTO CON LE MAIUSCOLE NELLA PRIMA LETTERA


La regola generale è quella che la prima parola dopo un punto abbia la prima lettera maiuscola. Non c'è però un tag CSS che compia questa trasformazione. Si può però rendere maiuscola la prima lettera di ciascuna parola di un testo. Il tag da usare è text-transform: capitalize; in questo modo

<div style="text-transform: capitalize;">testo tutto minuscolo che sarà visualizzato con la prima lettera di ogni parola in maiuscolo</div>

che se incollato in Modalità HTML produce questo risultato

testo tutto minuscolo che sarà visualizzato con la prima lettera di ogni parola in maiuscolo






COME TRASFORMARE UN TESTO IN MAIUSCOLETTO


Per questa trasformazione il tag è font-variant: small-caps; che può portare a questo codice

<div style="font-variant: small-caps;">testo tutto minuscolo che sarà visualizzato in maiuscoletto</div>

che se incollato in Modalità HTML produce questo risultato:

testo tutto minuscolo che sarà visualizzato in maiuscoletto

 

COME EVIDENZIARE DEL TESTO CON IL CSS


Per completare la trattazione vediamo come si possa evidenziare del testo anche se questa funzionalità è poco richiesta visto che in tutti gli Editor è presente il pulsante per evidenziare il testo selezionato. Il tag da usare è il semplice background-color:…; dove al posto dei puntini si inserisce il codice dee colore. Un codice di esempio da poter usare è il seguente 

<span style="background-color: #FF0;">Testo evidenziato di giallo</span>

che produce questo risultato

Testo evidenziato di giallo

La evidenziazione tramite CSS può essere utile nel caso in sui si volesse usare come evidenziatore un colore non presente tra quelli disponibili nell'Editor di Blogger o di Wordpress.

testo-evidenziato-lettere-maiuscole
La evidenziazione e la trasformazione in maiuscolo/minuscolo possono coesistere nello stesso CSS come mostrato nello screenshot precedente. Oltre ai tag <p>, <div> e <span> i CSS inline per la trasformazione del testo sono supportati anche dal tag <font> come nei seguenti esempi

<font style="text-transform: uppercase;">Testo trasformato in Maiuscolo</font>
<font style="text-transform: lowercase;">Testo trasformato in Minuscolo</font>
<font style="text-transform: capitalize;">Testo le prime lettere in maiuscolo</font>
<font style="font-variant: small-caps;">Testo trasformato in maiuscoletto</font>
<font style="background-color: #ff0">Testo evidenziato di giallo</font>

tag-font

Questi tag possono anche essere usati per personalizzare il titolo del post come vedremo a breve.







Nessun commento :

Posta un commento

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.