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 esso saranno richiamati tutti i valori a lui 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 vuoto <div> Questo elemento (div), come detto in precedenza, di per sé non avrebbe molto significato, almeno non in HTML dove risulta essere 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 (layout) 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 questi siano molti.
Ancora una volta un esempio chiarirà meglio di qualsiasi discorso:
Definiamo all’interno di uno style un ID, per farlo è sufficiente assegnare un nome, nel nostro esempio: weblink, preceduto dal simbolo # pound (cancelletto), vediamolo:
<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 questo stesso risultato.
Abbiamo detto che l’uso di ID è di solito lasciato per il 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 a seconda delle vostre necessità.
Immaginiamo di voler posizionare un’immagine a 68 pixel dal margine superiore e 45 pixel dal margine laterale sinistro. Nel nostro esempio impostiamo i riferimenti a questi due parametri facendo uso di posizionamenti assolute e cioè:
<style type="text/css"> <!-- #weblink2 { position: absolute; top: 68px; left: 45px; z-index: 10; } --> </style>
Adesso non resta che inserire il contenuto, immagini, testo o anche entrambi, all’interno dell’elemento <div> associando al selettore ID “weblink2”. In questo modo il contenuto di DIV risulterà posizionato con estrema precisione a 68 pixel dal bordo superiore ed a 45 pixel da quello laterale sinistro con una priorità di visualizzazione uguale a 10.
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 ho dovuto chiamarlo weblink2 perchè essendo possibile usare lo stesso ID una sola volta per pagina con id weblink è già stato usato sopra, e poi che il mio ciao ciao si trova a 68 pixel dal bordo superiore e a 45 pixel dal bordo laterale sinistro, per cui scorrete in alto 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 Web-Link, un posizionamento impossibile con il solo HTML ma reso estremamente semplice dall’uso dei CSS.
Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.