logo del sito

W3C

Al giorno d'oggi è importante che un sito Web, sia compatibile con gli standard del Consorzio Internazionale W3C.

HTML

Tutte le pagine dei siti web sono scritte in HTML, linguaggio che viene letto ed elaborato dal browser, il quale genera la pagina che viene visualizzata sullo schermo del nostro computer.

CSS

Con il termine CSS (dall'inglese Cascading Style Sheets) vengono semplicemente definiti appunto i "fogli di stile a cascata", usati per separare all'interno delle pagine di un sito, i contenuti dalla formattazione, permettendo una programmazione più facile per gli autori delle pagine HTML.

Le pseudo-classi

Le pseudo-classi, all'interno di un CSS servono in buona sostanza per impostare uno stile ad un elemento al verificarsi di certe condizioni. Cioè, se noi volessimo applicare ai nostri link uno stile (cioè cambiare il colore, il font, aggiungere o eliminare la sottolineatura) allora utilizziamo le pseudo classi. La cosa interessante è che i CSS ci permettono di definire queste proprietÓ in modo diverso a seconda se il link è stato visitato o no, se è attivo o se il cursore è proprio sopra il link. In questo modo è possibile aggiungere un pò di fantasia ed utili effetti al nostro sito web. A livello sintattico le pseuso-classi non possono essere mai dichiarate da sole, ma per la loro stessa natura devono sempre appoggiarsi ad un selettore.

I link vengono sempre specificati con il tag a. Possiamo quindi usare a come selettore nei CSS. Nell'es. sottostante la regola stà a indicare che: i collegamenti ipertestuali (a) che non siano stati visitati (:link) avranno il colore blu chiaro. Quindi è chiaro che:

A- la pseudo-classe :link definisce lo stile (colore #69C) solo in una determinata situzione, ovvero quando il link non è stato attivato. Nel momento stesso che link viene attivato, il testo non sarà più blu chiaro, perchè la condizione originaria è venuta meno. Ricordiamoci sempre che tutte le pseudo classi iniziano con i due punti, e poi và inserito l'elemento, senza spazi, in questo caso link.

     a:link {color: #6699CC;}

vedere l'esempio in questa pagina

B- La pseudo-classe :visited viene usata per i link che sono già stati visitati dall'utente. Per esempio, nel codice sotto tutti i link visitati avranno un colore viola scuro:

     a:visited {color: #660099;}

vedere l'esempio in questa pagina

C- La pseudo-classe :active viene usata per i link attivi. Nell'esempio sotto inseriamo un colore di sfondo giallo per i link attivi:

     a:active {background-color: #FFFF00;}

vedere l'esempio in questa pagina

D- La pseudo-classe :hover viene usata quando il cursore del mouse passa sopra ad un link. Questa proprietà può essere usata per creare un effetto interessante. Per esempio, se vogliamo tutti i link arancioni e in italico quando ci passiamo sopra con il mouse, allora il nostro CSS dovrebbe essere:


     a:hover {
          color: orange;
          font-style: italic;
          }

vedere l'esempio in questa pagina

In questa altra pagina invece vediamo come sono applicate le varie pseudo classi ai link.

Molto frequentemente ci si chiede: come si fa per eliminare la sottolineatura dai link? Dovremmo considerare con attenzione questo fatto, poichè potrebbe diminuire significativamente l'usabilità del nostro sito web. Le persone sono abituate a vedere i link sottolineati di blu e sanno che possono cliccarci sopra. Se cambiamo la sottolineatura e il colore dei link ci potrebbero essere dei casi in cui l'utente si potrebbe confondere e quindi non sfruttare a pieno tutti i benefici del contenuto del sito. Detto questo è molto semplice eliminare la sottolineatura dei link, usando la proprietà text-decoration che può essere usata per definire se vogliamo o meno la sottolineatura del testo.

     a:link {text-decoration: underline;}   Link sottolineato

Per rimuovere invece la sottolineatura dobbiamo semplicemente definire il valore di text-decoration a none.

     a:link {text-decoration: none;}   Link senza sottolineatura

Un' altra pseudo classe da tenere in considerazione è first-child. Ha il compito di selezionare e formattare un elemento che si trovi ad essere il primo elemento figlio di un altro elemento. Cosi di botto non ci capiamo niente, ma se guardiamo l'es. sotto,

     p:first-child {color:red;}

ci dice che la pseudo-classe :first-child, assegna il colore rosso solo ai paragrafi che siano il primo elemento figlio di qualsiasi altro elemento. Esaminando questa porzione di codice:

<div>
<p>Benvenuti su Andmar</p>     <!--sarà rosso-->
<p>Linguaggio di marcatura</p>
<table>
  <tr>
    <td>
      <p>I fogli di stile</p>           <!--sarà rosso-->
      <p>Validazione e W3C</p>
    </td>
  </tr>
</table>

si capisce che solo i paragrafi indicati saranno rossi, perchè sono primi figli, rispettivamente, di un elemento <div> e di un altro elemento <td>. Per verificare il supporto provate questa pagina che contiene commenti ed esempi anche sulle altre pseudo-classi.

^ Inizio pagina

Ricerca personalizzata


Lezione successiva successiva

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

Indice