Quali sono i principali attributi da inserire nelle regole CSS del testo riguardo a colore, sfondo, allineamento, ombreggiatura, distanze, dimensione e famiglia di font.
Nel precedente articolo ho illustrato il tool Ispeziona elemento di Chrome per conoscere i selettori di una pagina web. Una regola può essere inserita anche utilizzando il tag style direttamente nell'HTML. In sostanza si può usare p { text-align: center; } per centrare i paragrafi ma anche questo codice
<p style="text-align: center;">Testo del paragrafo</p>
porta allo stesso risultato. Usare il primo sistema o il secondo dipende dalle circostanze. Una regola che deve valere per tutti i post è bene inserirla direttamente nel modello mentre un'altra regola che serve solo in una determinata sezione va inserita tramite quelli che sono definiti i CSS inline e che utilizzano appunto l'attributo HTML style. Tutti o quasi i CSS possono essere utilizzati in queste due forme. Una dichiarazione può essere inserita nel modello utilizzando class o id. Il primo "class" è generico e vale per tutti gli elementi mentre il secondo "id" è specifico e vale per uno soltanto. "class" e "id" hanno questo schema di utilizzo
<html>
<head>
<style type="text/css">
.elemento {
background-color: yellow; font-family:Arial;
}
</style>
</head>
<body>
<h1>Titolo del post</h1>
<p class="elemento">Questo testo avrà lo sfondo giallo e i caratteri Arial</p>
</body>
</html>
<head>
<style type="text/css">
.elemento {
background-color: yellow; font-family:Arial;
}
</style>
</head>
<body>
<h1>Titolo del post</h1>
<p class="elemento">Questo testo avrà lo sfondo giallo e i caratteri Arial</p>
</body>
</html>
mentre id va utilizzato in quest'altro modo
<html>
<head>
<style type="text/css">
#selettore {
font-size:18px;
font-weight:bold;
color:red;
}
</style>
</head>
<body>
<h1>Titolo del post</h1>
<div id="selettore">Questo testo avrà i caratteri di 18 pixel, sarà in grassetto e di colore rosso</div>
</body>
</html>
<head>
<style type="text/css">
#selettore {
font-size:18px;
font-weight:bold;
color:red;
}
</style>
</head>
<body>
<h1>Titolo del post</h1>
<div id="selettore">Questo testo avrà i caratteri di 18 pixel, sarà in grassetto e di colore rosso</div>
</body>
</html>
Se ancora non avete una conoscenza di base su questi argomenti potete scaricare gratuitamente la mia Guida all'HTML. En passant abbiamo anche visto come creare una regola per la dimensione del testo, per la famiglia di caratteri e per il grassetto. Vediamo quali siano gli stili più applicati a un testo.
ALLINEAMENTO DEL TESTO
Le opzioni più comuni sono usate per allineare il testo a sinistra, per allinearlo a destra, per centrarlo e per giustificarlo. La giustificazione è particolarmente utile per dare un aspetto professionale a un post.
<p style="text-align: left;">Questo testo è allineato a sinistra</p>
<p style="text-align: right;">Questo testo è allineato a destra</p>
<p style="text-align: center;">Questo testo è centrato</p>
<p style="text-align: justify;">Questo testo è giustificato</p>
<p style="text-align: right;">Questo testo è allineato a destra</p>
<p style="text-align: center;">Questo testo è centrato</p>
<p style="text-align: justify;">Questo testo è giustificato</p>
Per testare questi codici si può usare il tool online Real Time Editor HTML.
CALIBRARE LO SPAZIO TRA I CARATTERI E LE PAROLE
Si può fare in modo di scrivere una frase con uno spazio superiore di quello solito tra le varie lettere o le varie parole usando letter-spacing e word-spacing
<p style="letter-spacing: 3px;">In questo testo la distanza tra i font è di 3 pixel</p>
che viene così
In questo testo la distanza tra i font è di 3 pixel
Mentre per word-spacing abbiamo
<p style="word-spacing: 5px;">In questo testo la distanza tra le parole è di 5 pixel</p>
e viene in quest'altro modo
In questo testo la distanza tra le parole è di 5 pixel
Invece dei pixel si possono usare le percentuali o unità em (1 em equivale all'altezza media di un font).
SPAZIO VERTICALE TRA LINEE DI TESTO
Oltre allo spazio tra caratteri e parole è possibile calibrare anche la distanza tra le linee orizzontali<p style="line-height: 1.2em;">In questo testo la distanza verticale è di 1.2 unità em</p>
Oltre alle unità em si possono usare i pixel, le percentuali e i numeri puri.
COLORI SFONDI E OMBREGGIATURE
Per determinare un colore di un testo si usa questo attributo<p style="color: #003366;">Questo testo ha il colore determinato dal codice 003366</p>
Invece per lo sfondo viene utilizzata quest'altra regola
<p style="background:#FF0;">Questo testo ha lo sfondo determinato dal codice FF0</p>
Il risultato è il seguente
Questo testo ha il colore determinato dal codice 003366
Questo testo ha lo sfondo determinato dal codice FF0
Ovviamente si può inserire colore e sfondo uno accanto all'altro in style. Invece
<p style="text-shadow: 1px 1px 1px red;">Questo testo ha una ombreggiatura rossa</p>
produce questo risultato
Questo testo ha una ombreggiatura rossa
dove si può personalizzare oltre al colore anche la dimensione dell'ombreggiatura.
DECORAZIONE E TRASFORMAZIONE DEL TESTO
<p style="text-decoration: underline;">Questo testo è sottolineato</p><p style="text-decoration: line-through;">Questo testo è barrato</p>
<p style="text-decoration: overline;">Questo testo è soprallineato</p>
producono questi risultati
Questo testo è sottolineato
Questo testo è barrato
Questo testo è sopralineato
Nei modelli alcune volte è possibile trovare dei tag come
text-transform: lowercase; oppure text-transform: uppercase;
Sono utilizzati rispettivamente per trasformare una parola tutta in minuscole o tutta il maiuscole. Nel modello che uso in questo momento è presente text-transform: uppercase; nel selettore del titolo del widget che quindi si vedrà sempre in maiuscolo. Chi avesse difficoltà a seguire questo post oltre alla Guida HTML già citata può dare una scorsa al post sui codici dei colori.
Ciao Ernesto! Ho inserito da tempo questo effetto nel blog http://www.ideepercomputeredinternet.com/2011/08/le-immagini-dei-post-piu-popolari.html ma adesso non funziona più. Secondo te cosa potrebbe essere successo?
RispondiElimina@# La Demo funziona ancora. Prova a scaricare i due file colorati di rosso e a caricarli su DropBox. Prova anche a aggiornare JQuery alla versione 1.9.2 cioè metti
Eliminahttp://ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.min.js
al posto di 1.6.1. Controlla anche che non ci siano altri javascript JQuery di una versione diversa
ciao parsifal scusa se ti scrivo qui....vorrei un aiuto, mi hanno messo sul blog una pubblicita' che non conosco ...appena enrti si vede in alto e poi l'altra in fondo al blog................all'interno blog nell'html si vede e si sovrappone con i commenti,etc, ho provato a scansionre....ma non e' un virus, tu cosa mi consigli di fare?? grazie in anticipo.
RispondiEliminaadesso ho controllato il problema e' con google chrome con internet explorer e' tutto a posto.....cosa puo' essere??
Elimina@# Ho aperto il tuo sito e ho visto due immagini animate in GIF e sentito un suono di sottofondo ma non ho visto pubblicità che si sovrappone. Prova a essere più precisa. Potrebbe essere un problema del tuo browser visto che si vede solo su Chrome.
Eliminaciao ernesto, si quelle gif e il sottofondo e' normale li ho inseriti io.
Eliminae' un problema del mio browser, ho fatto varie prove..... ora nel blog entro con firefox o internet explorer ed e' tutto a posto.
la pubblicita' che vedo con google chrome sono dei banner pubblicitari che non ho inserito io e non sono di adsense.
ora disinstallo chrome. e' un problema solo del mio browser e solo di questo mio computer perche' ho provato su altri ed e' tutto a posto.
adesso e' solo un fatto per capire la cosa...... secondo te il browser puo' essere che ha un virus?.......mi riferisco al browser di google chrome del mio pc.... tu che ne pensi???
Grazie di aver risposto e scusa di tutto questo scritto, spero di non disturbarti.... grazie !!!
@# Quando disinstalli Chrome elimina anche tutte le impostazioni e i cookie. Poi dovrai riaccedere ma in questo modo dovresti evitare di importare virus o malware
Eliminaok grazie ho disinstallato, eliminato le impostazioni ed i cookie e installato di nuovo, ho risolto, grazie dell'aiuto!! ciao felice weekend!!
Elimina