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

Pubblicità

Sharing is caring!

Pubblicità

CSSVisita il sito di Web-Link

 
Menù Argomenti
Home Page Web-Link
Introduzione
Sintassi
In Linea
Nella Pagina
Nel Foglio Esterno
Le Classi
I Selettori ID
La Grafica
I Links
Attributi di Testo
Attrib. Carattere
Attrib. Colore Sfondo
Attrib. di Posizione
Parametri
Conclusioni
Forum di supporto

Valid CSS!

Valid HTML 4.01 Transitional

  Rev. 3.0 – Agosto 2005    Ver. 1.0 – Novembre 1999

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:

<style type=”text/css”> <!– #weblink { /* elenco parametri, nel nostro esempio: */ 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, 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è:

<style type=”text/css”> <!– #weblink2 { position: absolute; top: 40 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 “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

    Andrea Bianchi 
   

per stampare questa pagina


Potete fare domande e discutere l’argomento sul Forum gratuito di supporto.

© Andrea Bianchi 1997 ~ 2006

Valid CSS!

Valid HTML 4.01 Transitional

Pubblicità
shares
%d blogger hanno fatto clic su Mi Piace per questo: