Metterò qui, nel tempo, quelle piccole cose che a volte alcuni di noi vogliono sapere per avere dal foglio di stile quello che vogliono ottenere nella pagina html.
Se avete bisogno di aiuto su qualcosa scrivetemi pure (la mia e-mail la trovate in fondo pagina).
dare colore alle parole
.brosso {color: #ff0000; font-weight: bold;}per evidenziare con un colore una o più parole basta usare una class come questa riportata qui sopra nel foglio di stile e che richiameremo nella pagina html in questo modo:
<span class="brosso">parole evidenziate</span>
parole evidenziate
la class .brosso in questo esempio da me usato avrà colore rosso (#ff0000) e carattere grassetto (bold)
.rosso {color: #ffffff; background-color: #ff0000}
con quest'altra class da me chiamata rosso avremo su sfondo rosso (#ff0000) un testo in bianco (color: #ffffff)
richiamandola nella pagina in questo modo:
<span class="rosso">rosso</span>
rosso
come vedete ci si può sbizzarrire facendo un uso appropriato di colori di testo, di colori di sfondo e di tipografia; vi ricordo che nella versione 3 dei fogli di stile lo sfondo (background) deve essere un colore ben definito e non si può più far uso del termine "background: transparent;" in quanto, giustamente, il colore "transparent" non esiste (ci potevano pensare prima, però)
interlinea
line-height: 2em;ecco un esempio di interlinea (lo spazio che vogliamo fra una linea o riga e la successiva) che va messo all'interno di un eventuale elemento o tag come
p:p {font-family: verdana,arial,helvetica,sans-serif; color: #000; font-size: 80%; line-height: 2em;}
come si vede nell'esempio qui diciamo al browser che ci legge che deve usare preferibilmente un carattere verdana oppure arial o ancora helvetica e per ultimo abbiamo messo un sans-serif che altro non è che la famiglia generica di arial, di verdana ed helvetica in modo che siamo sicuri che il nostro utente possa comunque leggerci visto che quest'ultimo si trova su tutti i browsers, che il testo deve essere in nero (color: #000;) con una grandezza relativa dell'80% (sempre far uso di caratteri relativi e non fissi, altrimenti chi ci legge non potrà allargare o diminuire la grandezza del testo a suo piacimento) e con uno spazio di interlinea di 2em.
Su quel 80%:
ci chiediamo 80% di cosa? Il tag
p nel linguaggio html è contenuto dal tag body che viene definito suo progenitore; quindi se abbiamo messo una grandezza del 100% a body allora p avrà un carattere grande l'80% rispetto a body. Se invece non definiamo la grandezza del font in p anche questo avrà un font grande al 100% (nel browser di chi ci legge).Su line-height:
altro non è che l'altezza della linea.
E cosa è quel em?
Em = emphasys = enfasi è un'altra maniera di parlare in percentuale (relativo); anche qui, quindi, ho fatto uso di una grandezza relativa per non rovinare la pagina se il mio utente ingradisce il carattere.
Questo perché la line-height fa riferimento alla grandezza del font usato.
famiglie generiche di caratteri
e allora, visto che ne abbiamo parlato qui sopra, vediamo quali sono le famiglie generiche che possiamo usare in un foglio di stile come ci viene detto dal W3C:- serif
- sans-serif
- cursive
- fantasy
- monospace
Ecco qui le varie famiglie:
sono serif:
fonts latine - Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit
fonts greche - Bitstream Cyberbit
fonts cirilliche - Adobe Minion Cyrillic, Excelcior Cyrillic Upright, Monotype Albion 70, Bitstream Cyberbit, ER Bukinst
fonts ebree - New Peninim, Raanana, Bitstream Cyberbit
fonts giapponesi - Ryumin Light-KL, Kyokasho ICA, Futo Min A101
fonts arabe - Bitstream Cyberbit
fonts cherokee - Lo Cicero Cherokee
sono sans-serif:
fonts latine - MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica
fonts greche - Attika, Typiko New Era, MS Tahoma, Monotype Gill Sans 571, Helvetica Greek
fonts cirilliche - Helvetica Cyrillic, ER Univers, Lucida Sans Unicode, Bastion
fonts ebree - Arial Hebrew, MS Tahoma
fonts giapponesi - Shin Go, Heisei Kaku Gothic W5
fonts arabe - MS Tahoma
sono cursive:
fonts latine - Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, Zapf-Chancery
fonts cirilliche - ER Architekt
fonts ebree - Corsiva
fonts arabe - DecoType Naskh, Monotype Urdu 507
sono fantasy:
fonts latine - Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz
sono monospace:
fonts latine - Courier, MS Courier New, Prestige, Everson Mono
fonts greche - MS Courier New, Everson Mono
fonts cirilliche - ER Kurier, Everson Mono
fonts giapponesi - Osaka Monospaced
fonts cherokee - Everson Mono
quindi se uso un font Courier (che fa parte della famiglia monospace) nel mio foglio di stile scriverò fra l'altro:
{font-family: courier,monospace;} e così via.
