<style type="text/css">
<!--
#renatoweb {
font-family: Verdana,Arial,sans-serif;
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, iaggiungerei che è
sicuramente 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 dal nostro estro del momento. |
Tornando al nostro esempio, abbiamo inserito gli stessi attributi usati per la
classe firma, per cui otterremo lo stesso identico risultato facendo
uso delle seguenti sintassi:
<div id="renatoweb">testo
che rispetta gli attributi dell'identificatore id
</div>
<div class="renatoweb">testo
che rispetta gli attributi della classe
</div>
Questo l'identico risultato:
testo
che rispetta gli attributi dell'identificatore id
testo che rispetta gli attributi della classe
Abbiamo però detto che l'uso di
ID è di solito lasciato al posizionamento degli oggetti
grafici o blocchi di testo e pertanto immaginiamo ora di voler
posizionare un testo a 40 pixel dal bordo superiore e a 263 pixel dal bordo
laterale sinistro con una priorità di visualizzazione uguale a 1
associandolo ad un selettore
ID
di nome renatoweb1.
<style type="text/css">
<!--
#renatoweb1 {
position: absolute;
top: 100 px;
left: 263 px;
zindex: 1;
}
-->
</style> |
Adesso non resta che inserire il testo, all'interno dell'elemento
<DIV> associare a questo contenitore il selettore ID "renatoweb1" così da vedere il contenuto di
DIV posizionato a 100 pixel dal bordo superiore e a 263 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 è questa:
<div id="renatowb1">renatoweb</div>
Se avete capito come
funziona avrete anche capito che la scritta renatoweb
si trova a 100 pixel dal bordo superiore e a 263 pixel dal bordo laterale sinistro, per cui andate ad inizio pagina, fate bene attenzione a quella zona e potrete notare la piccola scritta.
Da notare anche come questa tecnica permetta un precisissimo posizionamento impossibile con
HTML ma reso estremamente semplice e preciso dall'uso dei css.
