|
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:
valvasev, preceduto dal simbolo # pound (cancelletto)
all'interno di uno style, per cui:
<style type="text/css">
<!--
#valvasev {
/* 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, 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="valvasev"
facendo uso della seguente sintassi :
<div id="valvasev"> questo testo ecc.ecc</div>
che non differisce molto da quella usata per le classi :
<div class="valvasev"> 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">
<!--
#valvasev2 {
position : absolute;
top : 50 px;
left : 20 px;
zindex : 1;
}
-->
</style>
|
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 "valvasev2" 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="valvasev2"> ciao </div>
Se avete capito come funziona avrete anche capito
che il "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.
|
