Le classi e gli ID

Le classi

Può risultare interessante attribuire degli stili differenti agi stessi tag. Per questo le specificazioni CSS hanno introdotto il concetto di classe.

La definizione di classi è tanto semplice che quella di stile. Essa cosiste nel precisare il tag selezionato (come per una descrizione di stile), poi aggiungerle un punto (.) e il nome che si desidera dare alla classe. Il none della classe può essere composto da lettere (accentuate o meno), da cifre o da tratti :

Selezionatore_de_balise.Nome-della-classe {
			proprietà di stile: Valore;
			proprietà di stile: Valore;
			...;
											}

Où « Nome-della-classe » rappresenta il nome dato alla classe.

Denominazione di una classe

Per denominare una classe in codice HTML, basta aggiungere un attributo classe al tag:
Sia la classe Rosso applicata al tag b :

B.rosso {carattere: Verdana 12px; colore: #FF0000; }

<B classe="Rosso"> Testo da metere in rosso e in grassetto </B>

Le classi universali

E' possibile non precisare il tag, nel qual caso la classe potrà essere usata in qualsiasi tag nella quale lo stile selezionato ha senso! Si parla allora di classe universale (talvolta classe indipendente). La definizione di una classe simile si fa facendo precedere semplicemente il nome della classe da un punto :

.Nome-della-classe {proprietà di stile: Valore; proprietà di stile: Valore ...}

Sia la classe « importante » seguente :

.importante {carattere-tipe: arial; colore: red; font-weight: bold}

La denominazione di questa classe può essere fatta partendo da qualisiasi elemento HTML per il quale la definizione è valida :

<h1 class="important">Attenzione questo è un avvertimento</h1>
<i class="important">(da tenere in considerazione)</i>

Da notare l'assenza di punti nella denominazione della classe.

Le pseudo-classi

Le pseudo-classi permettono di affinare lo stile applicato ad un certo numero di tag definendo una reazione ad un evento oppure alla posizione relativa del tag all'interno di altri tag.

Contrariamente alle classi, il nome delle pseudo-classi è predefinito, non è dunque possibile creare le proprie pseudo-classi. Esistono differenti tipi di pseudo-classi :

• Le pseudo-classi dinamiche,
• Le pseudo-classi di collegamento,
• Le pseudo-classi di lingua,
• Le pseudo-classi first-child,
• Le pseudo-classi di pagina,
• Gli pseudo-elementi.

Le pseudo-classi dinamiche

Le pseudo-classi dinamiche permettono di modificare lo stile di un tag in funzione di un evento (movimento del mouse, clic, oppure pressione di un tasto della tastiera). Ne esistono tre :

• La pseudo-classe : hover permette di attribuire uno stile altag selezionata al momento del passaggio del cursore del mouse :

  A:hover {font-decoration: underline;}

• La pseudo-classe : focus permette di definire uno stile al tag selezionata ad un focus dato (ad esempio al clic su un elemento di formulario)) :

  TEXTAREA:focus {color: #FF0000;}

• La pseudo-classe :active permette di definire uno stile al tag selezionata quanto l'utente clicca su un elemento (tra il momento in cui l'utente clicca sul bottone del mouse e quello in cui lo rilascia) :

  A:active {color: #FF0000;}

Le pseudo-classi dinamiche non sono riconosciute nello stesso modo da tutti i navigatori.

Le pseudo-classi di collegamento

Le pseudo-classi di collegamento sono delle pseudo-classi specifiche al tag <A> :

• La pseudo-classe :link permette di definire lo stile dei collegamenti ipertestuali che non sono ancora stati consultati dal client
• La pseudo-classe :visited permette di defiire lo stile dei collegamenti ipertestuali che il client ha già visitato

E' possibile che alcuni navigatori considerino un collegamento come non ancora visitato se non è stato consultato per un lungo periodo di tempo.

La pseudo-classe discendente

Una pseudo-classe discendente permette di applicare uno stiel al primo tag all'interno di un elemento. La sintassi di questa pseudo-classe è la seguente :

Element_Parent > Balise:first-child {style;}

P > A:first-child {color: #00FF00;}

<P align="justify">
  <A href="http://it.kioskea.net">Kioskea</A>
  </P>

<P align="justify">
  <BR/<
  <A href="http://it.kioskea.net">Kioskea</A>
  </P>

Le pseudo-classi di testo

Le pseudo-classi di testo permettono d'applicare uno stile ad una parte di testo definita dal tag al quale si riferiscono. Così le pseudo-classi di testo si usano solitamente congiuntamente con il tag di paragrafo (<P>).

Esistono due pseudo-classi di testo :

• :first-line : permette di applicare uno stile alla prima linea di un paragrafo.

  P:first-line { text-transform: uppercase }

• :first-letter : permette di applicare uno stile alla prima lettera di un paragrafo per produrre un effetto tipografico. L'esempio seguente raddoppia la dimensione e mette in grassetto la prima lettera di un paragrafo :

  P:first-letter { font-size: 200%; font-weight: bold; }

Le pseudo-classi di lingua

E' possibile definire uno stile in funzione della lingua del documento (specificata nel testo HTTP o nel tag scelto) o della lingua di un elemento HTML o XML (specificato dall'attributo opzionale LANG) si questa è precisato.

Una pseudo-classe di lingua usa la nozione seguente :

• :lang(Langue). La seguente pseudo-classe di lingua permette di definire le virgolette secondo la regola francese

  HTML:lang(fr) { quotes: '« ' ' »' }

Le pseudo-classi di pagina

Il selezionatore @page permette di modificare le definizioni di impaginazione di una pagina HTML (dimensione, margini, ecc.) per la stampa, come i margini (margin-left, margin-top, margin-right, margin-bottom), la dimensione (size). Bisogna allora immaginare la pagina web come un insieme di pagine che costituiscono un libro.

Le pseudo-classi di pagina permettono inoltre di selezionare le pagine di sinistra, di destra oppure la prima pagina di un documento.

Esistono differeni pseudo-classi di pagina :

• @page:left : permette di definire le proprietà delle pagine di sinistra.

  @page:left { size: landscape; margin-left: 2cm; }

• @page:right : permette di definire le proprietà delle pagine di destra.

  @page:right { size:landscape; margin-left: 2.5cm; }

• @page:first : permette di definire le proprietà della prima pagina di un documento.

  @page:first { size: portrait;
  								margin-left: 2.5cm;
  								margin-right: 2cm;
  								margin-bottom: 1cm;
  								margin-top: 4cm;}

I selezionatori di ID

Il selezionatore di ID (identificativo) permette di fare riferimento ad un unico elemento di una pagina identificato dal suo identificativo. Gli ID servono soprattutto a localizzare gli elementi HTML grazie a JavaScript.

La sintassi di un selezionatore di ID è la seguente :

#nom_ID { style }

Uno stile simile viene detto :

<TAG ID="nom_ID" > ... </tag>

Non può esistere che un solo ID per pagina! Da notare anche l'assenza di # nella richiesta al selezionatore di ID.

Ultime modificazione ilvenerdì 6 febbraio 2009 alle 16:51:57.Questo documento intitolato «  » da Kioskea (it.kioskea.net) è reso disponibile sotto la licenza Creative Commons. È possibile copiare, modificare le copie di questa pagina, alle condizioni previste dalla licenza, come questa nota appare chiaramente.