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.
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>
<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>
Questi tag possono anche essere usati per personalizzare il titolo del post come vedremo a breve.
Questo commento è stato eliminato dall'autore.
RispondiEliminaNon sono un gran conoscitore di Altervista :(
EliminaProva a chiedere al loro forum
http://forum.it.altervista.org/
@#