aprile 2003
HOME  |  INDICE  |  CORSI  |  DIZIONARIO  |  ABBONAMENTI  |  SITO  |  HELP
 
   
  CORSI OPENMASTER
  MUSICA DIGITALE  
  WEBMASTER  
 
Lezione 1  
Lezione 2  
Lezione 3  
Lezione 4  
Lezione 5  
Lezione 6  
Editor HTML  
Esercizi  
Risorse  
 
  WINDOWS EXPERT  
 
 

CSS e HTML 4.01

 

6. Selettori di classe

Non basta definire attributi per i singoli selettori HTML nativi, infatti può capitare di avere diversi tipi di testo all'interno di un sito, tutti identificati dal tag <p>, ma tra loro stilisticamente diversi. Per far fronte a questa varietà, troviamo i selettori di classe che sono raggruppati mediante l'attributo class. Possiamo definire classi differenti, valide per un singolo tag, come ad esempio p.testo e p.dida che non funzioneranno se inserite accidentalmente in tag diversi, oppure creare classi aperte che siano applicabili a qualsiasi tag, come ad esempio .testograssetto.

All'interno del foglio di stile, una classe viene riconosciuta invariabilmente dal punto che la precede. Per applicarla all'interno del documento finale utilizziamo l'attributo class che è comune a tutti i tag HTML. Prendiamo l'esempio d'inserire una didascalia al piede di un'immagine: creiamo un nuovo paragrafo e inseriamo al suo interno il richiamo per la classe: <p class="dida"> notate che nella sintassi d'inserimento della classe all'interno del tag il punto viene omesso. La classe così applicata sarà valida sino al termine del paragrafo e comunque fino a che incontreremo un nuovo paragrafo che specifichi una classe diversa**. Potremmo produrre lo stesso effetto con <ul class="dida"> applicando lo stile definito dalla classe dida a un elenco anziché a un paragrafo qualsiasi.

Tecnicamente il selettore di classe viene indicato come selettore di attributo poiché fa leva su un attributo comune a tutti i marcatori HTML. Ne esiste anche un secondo, d'impiego più specifico, che sfrutta l'attributo id, anch'esso comune a tutti i tag. In questo caso la definizione dello stile all'interno del CSS seguirà una sintassi differente. Anziché usare il punto come nel caso della demarcazione di una classe nel foglio di stile, qui utilizziamo il simbolo di cancelletto (#) seguito dall'identificativo alfanumerico che abbiamo scelto: ad esempio #a12. La struttura della dichiarazione non cambia. All'interno della pagina inseriremo quindi l'attributo id entro lo specifico tag che vogliamo contrassegnare facendolo seguire dal valore identificativo, ad esempio <p id="a12"> in questo modo avremo ottenuto un doppio effetto: identificare quel particolare tag, e solo quello, con un identificativo alfanumerico utilizzabile dai programmi (script) che opereranno sulla pagina e abbinato a una serie di attributi stilistici.

Pseudoclassi per i link ipertestuali
Nonostante il nome un po' altisonante, questa è una funzione dei CSS relativamente facile da utilizzare e molto comoda. Consente di attribuire al tag ancora (A) una serie di attributi diversi a seconda dello stato in cui si trova. Il tag ancora, come vedremo più in dettaglio in seguito, consente di realizzare collegamenti ipertestuali, un elemento centrale nell'architettura del Web per il quale sono state previste alcune prerogative molto speciali. Ogni browser riconosce infatti tre stati di funzionamento diversi per ciascun link: default quanto il link è inattivo, attivo, quando il cursore vi è posizionato sopra, visitato quando il navigatore è già passato dalla pagina a cui il link punta.

È possibile modificare il colore di questi tre stati agendo rispettivamente sui parametri link, alink e vlink del tag <body>. In tal caso la modifica si applica alla singola pagina e va ripetuta su ciascuna pagina del sito. Con i CSS diventa più semplice gestire tali attributi a livello di sito utilizzando le due pseudoclassi :hover (che sostituisce active) e :visited e attribuendo a ciascuna dichiarazioni separate, si comportano a tutti gli effetti come se fossero sotto-classi tra loro indipendenti.

In tal modo potremo avere classi diverse per diversi tipi di link e quindi effetti particolari per ciascuna di essere che non si limitano al cambiamento del colore, ma possono chiamare i causa tutti i valori tipografici accessibili mediante fogli di stile: sottolineatura, cambiamento di dimensioni, eccetera. Uno dei impieghi più frequenti consiste nel modificare il colore del link attivo (quando il cursore vi passa sopra) e di aggiungervi una sottolineatura nel caso non fosse già presente.

Si comincia a impostare i parametri che saranno validi per tutti i link usando il selettore base abbinato a una pseudo classe. Ad esempio A { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #0033CC; text-decoration: none } ci dice che tutti i link del sito useranno la font Verdana, saranno blu e non avranno la sottolineatura. A:hover { color: #0033CC; text-decoration: underline } ci dice poi che tutti i link del sito diventeranno sottolineati quando ci si passa sopra con il cursore senza cambiare forma o colore. Infine A:visited { color: #999999; text-decoration: none } ci dice che i link visitati perderanno la sottolineatura ma diventeranno grigi.

Ora supponiamo di avere, come nel caso del nostro CD, una serie di link che sono bianchi su sfondo blu (quelli della banda orizzontale che ospita anche il logo) e che diventerebbero illeggibili se trasformati in grigio una volta visitati. Trattandosi di link che appartengono alla navigazione globale e non di collegamenti che puntano a singoli documenti, non vogliano nemmeno che cambino aspetto dopo che li abbia visitati. A questo scopo costruiremo una speciale classe: navtestata a cui abbineremo una serie di attributi particolari che avranno la priorità su quelli definiti globalmente per il tag A. Vediamolo nella pratica: A.navtestata { font-size: 10px; color: #FFFFFF } ci dice che i link della testata saranno più piccoli rispetto ai link di default previsti per il sito e saranno bianchi anziché blu, ma che manterranno tutti gli altri attributi: Verdana, grassetto. Inoltre A.navtestata:visited { color: #FFFFFF } ci dice che anche quando visitati questi particolari link resteranno bianchi. Sarà sufficiente quindi inserire il parametro class="navtestata" nei tag A di ciascuno dei link di testata nella pagina per ottenere questo particolare effetto.

Pseudoelementi per i tag convenzionali
Ultima variante sul tema sono i pseudoelementi da usare per inserire effetti speciali nel testo. Nei CSS di livello 1 ne troviamo due :first-letter e :first-line da utilizzare con un di marcatori del testo. Ad esempio h:first-letter {font-size: 130%; font-color: red} determina che tutti i titoli di primo livello del sito avranno la prima lettera (capolettera) ingrandita del 30% e di colore rosso. Lo pseudoelemento :first-line permette di creare variazioni stilistiche che valgano solo per la prima riga di un particolare paragrafo o altro elemento.

Per un esplorazione di come sia realizzato un foglio di stile rimandiamo a quello utilizzato per la costruzione di questo sito: stili.css.

  < Precedente   Prossimo >

 

Corso - Webmaster
 
  Prima lezione:
  Competenze e strumenti
  Seconda lezione:
  Siti statici e linguaggio HTML
  Terza lezione:
  Modelli di pagina e tabelle
  Quarta lezione:
  HTML 4.01 e CSS
1. Stile e struttura
  1. Markup fisici e logici
  2. Il deprecato tag font
  3. Gestire gli spazi nel testo
2. Gli standard dell'editoria sul Web
3. CSS e HTML 4.01
  1. Cosa si può fare coi fogli di stile
  2. Ereditarietà e innesco a cascata
  3. Proprietà di trasferimento dei parametri
  4. Regole di ereditarietà
  5. Quattro tipi di CSS
  6. Selettori di classe
4. I colori del Web
  1. Websafe palette
5. Gestire le immagini
6. Esercizi
  Quinta lezione:
  Design e multimedialità
  Sesta lezione:
  Siti interattivi

 Copyright© PC Open - 2002 - 2003

Credits