I Fogli di Stile (CSS) di Web-Link: Tutto per la costruzione delle tue pagine web

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 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:

A prima vista si direbbe identico ad una classe, ed infatti è molto simile, io aggiungerei che è forse più limitato di una classe, in quanto un selettore ID può essere adoperato una sola volta 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 sicuramente al meglio 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:

questo testo è contenuto all’interno degli elementi DIV con ID=”weblink”
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 le vostre necessità.

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è:

Adesso non resta che inserire la nostra immagine, ma va bene  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 40 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 ciao </div> ciao ciao

Se avete capito come funziona avrete anche capito che il mio ciao ciao si trova a 40 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 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.

Continua: Gli Oggetti