Archivi tag: classi

CSS3 Base – 5.3 – Pseudo-classi

In questa lezione vediamo come usare le pseudo-classi come selettori nei CSS.

Finora abbiamo visto i seguenti selettori:

  • nomi di tag – identificano un particolare gruppo di elementi HTML presenti nella pagina (es: p, body, h1) ;
  • classi – rappresentano un’etichetta con cui contrassegnare elementi HTML (anche di tipo diverso) che devono avere lo stesso stile;
  • ID – speciali etichette per identificare un unico elemento che avrà uno stile particolare nella pagina.

Esiste la possibilità di usare un altro tipo di selettore nei CSS: le pseudo-classi.

Pseudo-classi

Una pseudo-classe non indica un particolare elemento HTML, indica lo stato in cui si trova.

La pseudo-classe si indica con il nome del tag HTML, seguito da due punti (:) e dal nome dello stato in cui si trova.

Si usano molto per gestire gli stati in cui può trovarsi un link (collegamento):

  • a:link – collegamento non ancora visitato;
  • a:visited – collegamento già visitato;
  • a:hover – collegamento al passaggio del mouse;
  • a:active – collegamento attivo.
Pseudo-classi per i link
Pseudo-classi per i link

Per il loro corretto funzionamento, le pseudo-classi vanno inserite in questo ordine.

Video

CSS3 Base – 5.1 – Classi

In questa lezione vi parlo di cosa sono le classi e di come si usano nei CSS.

Abbiamo detto che se creiamo una regola CSS usando un selettore HTML (es: p), tale stile si applica a tutti gli elementi di quel tipo:

Stile per paragrafi
Stile per paragrafi

Lo stile indicato nell’esempio applica un colore blu al testo di tutti i paragrafi della pagina.

Nel caso in cui noi non volessimo assegnare il colore blu a tutti i paragrafi ma solo ad alcuni, dovremmo agire in maniera diversa.

Classi

Potrebbe risultare utile definire una classe, ovvero un’etichetta, per contrassegnare gli elementi HTML che devono avere caratteristiche simili.

In questo caso applicheremo la classe a tutti gli elementi che dovranno avere il testo in blu.

La classe si applica con l’attributo class dentro al tag HTML dell’elemento:

<p class="testoblu">Paragrafo 1</p>

Il valore dell’attributo class sarà il nome della classe, nel nostro caso è testoblu, per ricordarci che gli elementi con tale etichetta avranno il testo colorato di blu.

Oltre ai paragrafi, posso applicare la stessa etichetta ad altri elementi ti tipo testuale, ad esempio intestazioni, liste, ecc.

Nell’esempio vado ad applicare la classe testoblu a due paragrafi e ad una intestazione:

Applicazione della classe
Applicazione della classe

Ora non ci resta che dire al CSS come deve gestire tutti gli elementi di classe testoblu.

Per creare la classe si inserisce nel CSS un selettore formato da un punto seguito dal nome della classe (parola unica senza spazi), inserendo nelle graffe le dichiarazioni di stile:

Creazione della classe
Creazione della classe

Questo è risultato finale, in cui appaiono blu solo gli elementi di classe testoblu:

Esempio
Esempio

Video