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), come detto in precedenza, di per sé non avrebbe molto significato, almeno non in HTML dove è un semplice contenitore vuoto che non provoca alcun effetto che non sia un ritorno a capo. Trova largo uso invece proprio con i CSS, specialmente per la gestione delle immagini, dei blocchi di testo e della struttura per impaginare.

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:

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 usati per il nostro esempio: */

font-family: Verdana, Arial, sans-serif;
color: #ff0000;
font-size: 10pt;
text-align: center;
font-style: italic;
}
-->
</style>

A prima vista si direbbe identico ad una classe, ed infatti è molto simile, io aggiungerei che forse è più limitato di una classe (sempre a prima vista), in quanto un selettore ID può essere adoperato una sola volta all'interno della stessa pagina, 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 sicuramente al meglio dall'estro di ognuno di noi.

Ma ci sarà pure un motivo del perchè un id apparentemente simile ad una classe sia usabile una sola volta per pagina? Certo che c'è e lo vedremo più avanti parlando di box liquidi e layout.

Per tornare al nostro esempio, abbiamo inserito gli stessi attributi usati per la classe firma, per cui otterremo lo stesso identico risultato:

che non differisce molto da quella usata per le classi:

Questo il risultato in entrambi i casi:

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

Abbiamo detto che l'uso di ID è di solito lasciato al posizionamento di oggetti grafici, non che non sia possibile posizionarli anche in altro modo e lo vedremo parlando di grafica. Per il momento preferisco non rischiare di 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 le vostre necessità.

Immaginiamo di voler posizionare un'immagine, diciamo a 40 pixel dal bordo superiore e 32 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: 40px;
    left: 32px; 
  z-index: 1;
       }
-->
</style>

Adesso non resta che inserire la nostra immagine, ma va bene anche del testo, all'interno dell'elemento <div> associando al selettore ID "Weblink2". In questo modo il contenuto di DIV risulterà posizionato a 40 pixel dal bordo superiore ed a 32 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:

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

Continua: Gli Oggetti

  Potete fare domande e discutere l'argomento sul Forum