Guida ai CSS

I selettori ID (Identificatori)   Un selettore ID o identificatore, svolge funzione di etichetta di un contenitore, si possono cioè assegnare dei parametri e marcarli con un ID così che quando serviranno quei parametri, basterà richiamare il nome del selettore (ID) e con lui saranno richiamati tutti i valori ad esso associati, valori specificati una sola volta nel foglio di style interno o esterno che sia.

L'uso degli ID, così come quello delle classi, può essere associato a qualsiasi elemento valido di HTML anche se di norma lo si adopera con l'elemento <DIV> Questo elemento (div) di per se non avrebbe molto significato, almeno non in HTML, viene invece di solito adoperato proprio con i CSS, specialmente per la gestione delle immagini e dei blocchi di testo.

Il suo uso rende il codice più pulito e comprensibile in quanto con il solo nome dell'identificatore è possibile richiamare tutti gli attributi ad esso associati, anche nel caso in cui siano molti.

Ancora una volta un esempio chiarirà meglio di qualsiasi discorso:

Esempio: Definiamo un ID, per farlo è sufficiente assegnare un nome, nel nostro esempio: weblink, preceduto dal simbolo # pound (cancelletto) all'interno di uno style, per cui:

<style type="text/css">
<!--

#weblink {

/* elenco parametri, nel nostro esempio: */

font-family : Verdana,Arial,Helvetica;
      color : #ff0000;
  font-size : 10pt;
 text-align : center;
font-weight : lighter;
 font-style : italic;

       }
-->
</style>

A prima vista si direbbe identico ad una classe, e infatti è molto simile, io aggiungerei che è forse più limitato di una classe, in quanto un selettore ID può essere adoperato una volta soltanto all'interno di un documento, mentre una classe non ha praticamente alcun limite.

La cosa positiva è che si possono combinare classi e selettori ID, per cui evviva l'abbondanza che sarà sfruttata dall'estro di ognuno di noi.

Per tornare al nostro esempio, abbiamo inserito gli stessi attributi usati per la classe firma, (vedi le classi dal menù laterale) per cui otterremo lo stesso identico risultato:

facendo uso della seguente sintassi :
<div id="weblink"> questo testo ecc.ecc</div>

che non differisce molto da quella usata per le classi :
<div class="weblink"> questo testo ecc.ecc</div>

Se vi ricordate infatti la classe firma produceva proprio questo risultato.

Abbiamo però detto che l'uso di ID è di solito lasciato al posizionamento gli oggetti grafici, non che non sia possibile anche in altro modo, anzi a dire il vero io preferisco l'uso diretto all'interno dell'elemento DIV, ma lo vedremo parlando di grafica per il momento non vorrei confondervi le idee, per cui vediamo come fare con l'uso di ID, sarete poi voi a decidere quale potrebbe essere il sistema migliore per voi.

Immaginiamo di voler posizionare un'immagine diciamo a 50 pixel dal bordo superiore e 40 pixel dal margine laterale sinistro. Nel nostro esempio impostiamo i riferimenti a questi due parametri facendo uso di posizioni assolute e cioè:

<style type="text/css">
<!--

#weblink2 {

position : absolute;
     top : 50 px;
    left : 20 px; 
  zindex : 1;
       }
-->
</style>

Adesso non resta che inserire la nostra immagine, o anche del testo, all'interno dell'elemento <DIV> associare a questo contenitore il selettore ID "Weblink2" così da vedere il contenuto di DIV posizionato a 50 pixel dal bordo superiore e a 20 pixel da quello laterale sinistro con una priorità di visualizzazione uguale a 1.

Ancora una volta capirete meglio il significato di queste sigle più avanti, quando saranno spiegate in modo più accurato, per il momento è sufficiente capire il meccanismo, per cui la sintassi corretta in html è questa:

<div id="weblink2"> ciao </div>

Se avete capito come funziona avrete anche capito che il mio ciao si trova a 50 pixel dal bordo superiore e a 20 pixel dal bordo laterale sinistro, per cui andate ad inizio pagina, fate bene attenzione a quella zona e potrete notare la piccola scritta ciao, notate anche che questa si trova sopra all'immagine, un posizionamento impossibile con HTML ma reso estremamente semplice e preciso dall'uso dei CSS.

Vi ricordo due indirizzi sui quali reperire ulteriori informazioni: specifiche del W3C , dove troverete tutti gli attributi e i parametri ammessi e supportati dai CSS1 e : specifiche per i nuovi CSS2   dove alcuni di questi non sono ancora supportati da nessun browser, almeno non fino alle versioni 5.5 di IE e 6 di NS.