13 settembre 2009

Evidenziare Delle Righe di Testo Tramite la pseudo-classe :target

L'attributo :target lo si usa specificatamente come attributo per l'apertura di un link, ad esempio in una nuova finestra. Noi oggi lo useremo per evidenziare delle semplici righe di testo.

Creiamo il codice html con un menu orizzontale e poi creiamo una serie di paragrafi <p> </p>che identificheremo ognuno singolarmente con il proprio id di appartenenza in questo modo:

<body> <p><a href="#cavallo">Orazio</a> | <a href="#cane">Pluto</a> | <a href="#gatto">Silvestro</a>| <a href="#topo">Topolino</a>| <a href="#papero">Paperino</a></p> <p id="cavallo">Io sono un Cavallo</p> <p id="cane">Io sono un Cane</p> <p id="gatto">Io sono un Gatto </p> <p id="topo">Io sono un Topo </p> <p id="papero">Io sono un Papero </p> </body>

poi andiamo a creare la regola CSS che ci permetterà di riconoscere l'animale tramite il click dato dal puntatore sul nome del menu orizzontale, naturalmente il CSS va inserito tra i tag <head> e </head> del documento html.

<style type="text/css">
:target {
background: lime;

}

</style>

facendo click sul nome Silvestro il risultato e quello che vedete nell'immagine qui sotto.

Nessun commento: