Menù Principale

il Webmaster

Politica a Latisana

Links e Banners

Pubblicità Amici

WebTools - Scripts

Chiudi Dossier Antivirus

Chiudi Grafica & Design

Chiudi Guida PHP

Chiudi Guida ai Css

Chiudi Guide al Javascript

Chiudi HTML - XHTML - XML

Chiudi Software Programmi Utili

Chiudi Tools Webmaster

Chiudi Utilità Varie

Chiudi Utilità e Script in Flash

Chiudi Video Guide Manuali

Altri Miei Siti

Pubblicità Amici !
LegaNord Latisana anclignano pertegada calcio yorkshire susy


Don.Severino Valvason
il vostro Webmaster
Webmaster - Infos
Mini Tchat
Entra in Chat
Photo Gallery

Guida ai Css - Gli "ID" con i Css

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


facendo uso della seguente sintassi :
<div id="valvasev"> all'interno 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.


 


Data creazione : 19/11/2021 @ 22:17
Ultima modifica : 19/11/2021 @ 22:46
Categoria : Guida ai Css
Pagina letta 940 volte


Stampa pagina Stampa pagina

 
Opinioni su questo articolo

Nessuno ha lasciato un commento.
Diventa il primo a farlo!

 
Comunicazioni del Webmaster !
 
Slideshow notice
  • 2x1000.jpg
  • foghera-pertegada-33.jpg

    MTB Pertegrava

  • tesseramento-online.jpg

    Tesseramento 2015 Lega Nord online

  • santo-antonio.jpg

    Ferragostana - Festa di Santo Antonio

 
Contatteci
Connessione...
 Lista utenti registrati Utenti : 116

Username:

Password:

[ Registrazione ]


Utente online:  Utente online:
Anonimi online:  Anonimi online: 5

Visite totali Visite totali: 1988422  

Webmaster - Infos

Ip: 44.200.94.150

NewsLetters
Per ricevere informazioni sulle novità di questo sito, puoi iscriverti alla nostra Newsletter.
Captcha
Ricopia il codice :
Traduction Site
Eventi Calendario
Sondaggio
cosa pensi del Sito ?
 
Eccellente !
Ottimo
nella Media
Boh.....
C'è di Meglio
Risultati
Visites

   visitatori

   visitatori online

^ Torna in alto ^