Le classi di stile (CSS)
Può risultare interessante attribuire degli stili differenti agi stessi tag. Per questo le specificazioni CSS hanno introdotto il concetto di classe.
Le classi e gli ID
Le classi
La definizione di classi è tanto semplice che quella di stile. Essa consiste 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 nome 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;
...;
}
dove "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; }
Il nome di questa classe in codice sarà il seguente:
<B class="Rosso"> Testo da mettere in rosso e in grassetto</B>
Le classi universali
È possibile non precisare il tag e, in tal 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, ecc.}
Sia la classe «importante» seguente:
.importante {carattere-tipe: arial; colore: red; font-weight: bold}
La denominazione di questa classe può essere fatta partendo da qualsiasi 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 definire lo stile dei collegamenti ipertestuali che il client ha già visitato:
|
È 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 stile al primo tag all'interno di un elemento. La sintassi di questa pseudo-classe è la seguente:
Element_Parent > Balise:first-child {style;}
. Qui la dichiarazione che si applica al primo tag <A> all'interno di un sistema di tag <P> </P>:
P > A:first-child {color: #00FF00;}
In questo modo il tag <A> seguente avrà questo stile:
<P align="justify">
<A href="http://it.ccm.net">CCM</A>ƒ</P>
il tag <A> seguente non sarà però considerata dato che non è la prima dopo la BALISE <P>:
<P align="justify">
<BR/<
<A href="http://it.ccm.net">CCM</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
È 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 :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 differenti 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>
Nota Bene: non può esistere che un solo ID per pagina. Da notare anche l'assenza di # nella richiesta al selezionatore di ID.
Foto: © Pixabay.
Il documento intitolato « Le classi di stile (CSS) » dal sito CCM (it.ccm.net) è reso disponibile sotto i termini della licenza Creative Commons. È possibile copiare, modificare delle copie di questa pagina, nelle condizioni previste dalla licenza, finché questa nota appaia chiaramente.