Dodicesima parte: I css, I link e le pseudoclassi

Corso html 5.
Di Roberto Abutzu.
`***********`
Dodicesima parte: I css, I link e le pseudoclassi.
`**********`
IIl concetto delle pseudo classi.
Questa notazione è più complessa perchè varia a seconda dello stato dell'elemento stesso.
In questo caso, andremo a parlare delle pseudo classi dei selettori.
Si intende una modifica dello stile non per il singolo elemento, ma per lo stato che questo elemento
può avere e anche variare.
Applichiamo questa teoria direttamente ai link, semplificandone così la comprensione
. Un link, oltre al suo colore assegnato dal programmatore, può variare a seconda che sia stato già
visitato, che il puntatore del mouse sia posizionato sopra di esso, che ci sia il focus della tastiera, e
varia anche nel momento in cui viene attivato.
Quindi il colore di un link, varia a seconda di questi stati, ed è il programmatore che ne decide i
colori utilizzando le pseudoclassi.
Per una buona e fluida navigazione in una pagina web, è necessario che i link già visitati vengano
contrassegnati.
A tale scopo ne viene cambiato il colore.
Ricordo che questi dati, il fatto che un link sia stato già visitato, vengono salvati nella memoria dei
file temporanei del browser.
Quindi, pulendo la cronologia e i file temporanei, questi dati vanno persi.
Iniziamo con l'inserire il codice che assegnerà i vari colori ai link a seconda dello stato. Poi ne
spiegheremo il significato.
Apriamo il nostro file: style.css e portiamoci in fondo alla pagina.
Andiamo a capo e inseriamo questo codice:
a:link {color: #0000FF; }
a:visited {color: #FF0000; }
a:focus {color: #00FF00; }
a:hover {color: #00FF00; }
a:active {color:#FF00FF; }
All'interno delle parentesi graffe, il codice dei colori assegnati.
Prima delle parentesi, il selettore che ora spiegheremo.
-a: link non visitato e senza nessun altro stato attivo.
Gli ho assegnato il colore blu ( #0000FF).
-a:visited.
Link già visitato dal browser. Gli ho assegnato il colore Rosso (#FF0000).
-a:focus
Questo selettore indica il focus della tastiera, quello che spostiamo col Tabulatore.
Gli ho assegnato il colore verde (#00FF00).
-a:hover
Questo selettore indica quando il puntatore del mouse si posiziona sopra il link.
Ho assegnato anche a questo il colore verde ( #00FF00).
-a:active
Indica lo stato di attivazione del link quando viene attivato dal mouse per aprire la nuova pagina.
Gli ho assegnato il colore Viola (#FF00FF).
Anche i colori che ho voluto assegnare in questo esempio sono semplificati con l'unico scopo di
apprendere il più possibile questi concetti.
Nei vostri siti potrete assegnare i colori che più vi aggradano.
Fate delle prove anche cambiando i colori a vostro piacimento.
Nota importante:
L'ordine di questi stati deve seguire esattamente lo stesso che vi ho inserito io.
Nel senso che non è possibile, per esempio, mettere il link visitato per primo.
Le modifiche in questo caso non faranno funzionare i cambiamenti dello stile.
La proprietà text-decoration.
Devo introdurre questa proprietà in quanto è sempre più diffuso il non sottolineare i link, levando
l'effetto della sottolineatura.
Questa sottolineatura riappare al momento in cui il mouse passa sopra il link stesso e da parecchio
tempo le persone vedenti si sono abituate a questo effetto. Quindi ritengo importante farvi inserire
questa proprietà proprio nell'eventualità in cui vogliate far analizzare il vostro lavoro ad una
persona vedente.
Questa proprietà fa parte degli effetti del testo che analizzeremo in seguito.
Inserite voi questa proprietà in questo modo:
a:link {text-decoration: none; }
a:hover {text-decoration: underline; }
Vi ricordo di inserire poi anche la proprietà del colore all'interno delle parentesi graffe.
Ora, volendo davvero iniziare a dare un aspetto piacevole al nostro sito, introduciamo le prime
nozioni sui caratteri e la loro formattazione. Il codice html che permetteva in passato di assegnare il
font e la sua formattazione direttamente dalla pagina html, in questa nuova versione 5 di questo
linguaggio, non viene più permesso, demandando al solo file css la formattazione di tutti i caratteri
del sito.
Premetto che tutti i Browser hanno dei loro caratteri predefiniti e l'assenza della formattazione non
significa che il sito rimanga vuoto. Naturalmente è importante saper inserire la formattazione e
saperla personalizzare, anche a seconda dell'elemento a cui vogliamo assegnarla.
Noi possiamo assegnare, tramite i fogli di stile, una formattazione personalizzata per ogni elemento
html, oltre che poter decidere di impostare due formattazioni diverse per elementi uguali ma in
posizioni diverse nella pagina.
Quindi le possibilità sono illimitate.
Nel concreto, intendo affermare che possiamo dare caratteri, dimensioni e colori diversi tra
paragrafi, intestazioni, collegamenti, ecc... Possiamo decidere che all'interno di una o più liste, il
carattere sia differente da quello dei link.
Utilizzando poi gli identificativi (id), anche tutte le intestazioni dello stesso livello potranno avere
formattazioni diversificate.
Nel caso si voglia assegnare una regola di stile ad un elemento html, sarà sufficiente utilizzare
l'elemento stesso come selettore, ricordandosi di non inserire maggiori e minori.
Nel caso si voglia dare uno stile particolare ad un elemento univoco, dopo avergli assegnato
l'identificativo nella pagina html, basterà inserire questo identificativo preceduto dal cancelletto.
Passiamo alla pratica spiegando il codice sottostante:
h1, h2, h3 {font-family: Tahoma, Geneva, sans-serif; color: #0000FF; }
La prima cosa che notiamo sono i selettori.
Come spiegato in precedenza, ora noi stiamo dando una regola di stile a tutte queste intestazioni.
All'interno delle parentesi graffe, troviamo le coppie Proprietà-Valore.
La prima che incontriamo è:
font-family: Tahoma, Geneva, sans-serif;
Notiamo che abbiamo inserito dopo la proprietà, tre valori, ossia tre tipologie di font, simili tra
loro.
Per quale motivo non possiamo assegnare solo il carattere che scegliamo?
Il motivo è semplice.
Noi non possiamo aver la certezza dei browser o dei computer che visualizzeranno il nostro sito. Io
ad esempio ho scelto il carattere (font): Taoma, ma non ho la certezza che questo sia poi installato
nei computer di chi visita il sito.
In tal caso il browser assegna quelli suoi di default, rischiando di stravolgere totalmente l'aspetto
delle nostre pagine.
Allora, tornando a ritroso nella creazione dei font, gli assegno una alternativa, un font più datato e
diffuso, ma simile e appartenente alla stessa famiglia: il Geneva.
Ma neanche questo mi garantisce un risultato, sempre per lo stesso motivo.
Allora tornerò ancora più indietro assegnando: sans-serif.
Rimando alla rete per i curiosi la scelta del geneva e del sans-serif, spiegandovi che il font che noi
scegliamo, lo inseriamo per primo. A scalare, ne inseriamo altri alternativi.
Se non viene trovato il primo font, si passa al secondo, poi al terzo e così via.
Per maggior sicurezza, alla fine delle nostre scelte, inseriamo anche la famiglia del font scelto.
Un elenco delle famiglie più utilizzate:
-serif: font con elementi decorativi alla fine dei tratti delle lettere (ad esempio Times New Roman);
-sans-serif: senza elementi decorativi (ad esempio, Arial);
-mono caratteri a spaziatura fissa. Ogni carattere, indipendentemente dalle sue dimensioni, occupa
lo stesso spazio.
Alcune combinazioni di font, i più usati:
-Arial, Helvetica, sans-serif
-Times New Roman, Times, serif
-Courier New, Courier, mono
-Georgia, Times New Roman, Times, serif
-Verdana, Arial, Helvetica, sans-serif
-Geneva, Arial, Helvetica, sans-serif
Naturalmente nessun obbligo nell'utilizzare queste combinazioni, l'importante è cercare una
coerenza tra i caratteri scelti.
"font-size".
Questa è la proprietà che permette di assegnare le dimensioni ai nostri caratteri.
Esistono varie misure o tipologie di valori per le dimensioni ma, sempre per il fatto che non siamo
a conoscenza del pc che visiterà il sito, spesso si rischia di avere anche in questi casi delle
spiacevoli sorprese.
Si possono utilizzare i pixel (px), le dimensioni dei punti assegnati dai programmi di videoscrittura
(pt) o altre unità di misura come i pollici o i centimetri che affronteremo in una apposita lezione.
Queste misure sono tutte da considerarsi relative e si intende che possono variare in alcune
condizioni specifiche.
L'esempio più lampante è il Pixel che può variare a seconda del monitor utilizzato, oltre al fatto che
non tutti i browser datati ridimensionano correttamente i caratteri.
Inoltre, e questo caso a noi interessa per uno script futuro, assegnare pixel, significa forzare a
mantenere quelle dimensioni. Prossimamente inseriremo uno script che permetterà di ingrandire
tutto lo schermo in tre valori.
Io inserisco questo script in tutti i miei siti in quanto utilissimo per le persone ipovedenti o gli
anziani.
Nel caso inserissi un font col valore delle dimensioni in pixel, questo script non funzionerebbe.
Qualsiasi unità di misura voi utilizziate, è necessario che il numero e l'unità siano attaccati così:
{font-size: 14pt;}
Io di solito lascio assegnare ai browser le dimensioni e quando serve utilizzo il valore: em.
em (em-height): 1 em corrisponde all'altezza base di un carattere per un determinato font.
Per portare un carattere al doppio della sua misura dobbiamo scrivere 2em
un esempio:
h1 {font-size: 2em; }
Un ultimo esempio per agevolare la lettura dei file css.
Notate che andrò a capo ad ogni coppia Proprietà-valore.
Questo rende molto più semplice, soprattutto per le persone non vedenti, lo scorrimento delle
regole e la loro identificazione.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14pt;
color: #000000;
}
h1, h2, h3 {
font-family: Tahoma, Geneva, sans-serif;
color: #0000FF;
}
h1 {
font-size: 18pt;
}
a:link {
text-decoration: none;
color: #0000FF;
}
a:visited {
color: #FF0000;
}
a:focus {
color: #00FF00;
}
a:hover {
text-decoration: underline;
color: #00FF00;
}
a:active {
color:#FF00FF;
}
Naturalmente non è neccessario né obbligatorio scrivere in questo modo, riportando a capo ogni
coppia proprietà-valore, è consigliabile e utile quando il file css inizia a diventare lungo.
In queste tre prime lezioni sui css, ho voluto rendere la teoria molto semplificata puntando per lo
più a farvi mettere in pratica i primi rudimenti direttamente lavorando sul sito.
Tutti questi argomenti, verranno ripresi nello specifico e rispiegati considerando tutte le proprietà e
tutti i valori che è possibile assegnare nei fogli di stile. Spesso succede di imbattermi in manuali
dove realmente inizio ad operare alla decima lezione. Puntualmente poi, non avendo operato sulla
teoria, mi sono già dimenticato le prime 8.
Questo è quello che non voglio che accada.
Naturalmente non è mia intenzione criticare altri manuali o altre metodologie di studio, ma io
questo corso ho deciso di farlo prevalentemente per le persone non vedenti.
Essendolo anch'io, proprio sulla mia pelle ho imparato a memorizzare i concetti applicandoli
immediatamente.
I fogli di stile, come il linguaggio html 5, sono comunque complessi e strapieni di codice. Lo
vedremo tutto ma pian piano.
Per ulteriori spiegazioni, scrivere a:
[email protected]