Il selettore elemento, visto nelle precedenti lezioni, consente di selezionare solo un intero gruppo di elementi (per esempio tutti i paragrafi o tutti gli header h1). Vi sono molti casi in cui però si vuole poter effettuare una selezione più precisa degli elementi.

Una soluzione semplice a questo problema è rappresentata dalle cosiddette classi universali. Vediamo subito un esempio:

In questo modo vengono definite due classi di nome grande e piccolo (i nomi sono scelti liberamente dal programmatore e, nel foglio stile, devono essere preceduti dal punto).

All'interno della pagina, per formattare degli elementi in base alle classi precedenti, basta scrivere:

La visualizzazione prodotta è di questo tipo:

Paragrafo grande

Paragrafo piccolo

grande e piccolo, nell'esempio precedente, sono due classi.

Una classe di stile è dunque un modo per assegnare un nome a una regola di stile e poterla applicare selettivamente ad un gruppo di elementi e non ad altri.

Si osservi che class è un attributo universale (applicabile a qualsiasi elemento), per mezzo del quale è possibile specificare la classe di appartenenza di un certo elemento.

E' possibile usare più classi per lo stesso elemento. A tale scopo è sufficiente inserire all'interno dell'attributo class i nomi delle classi separandoli da uno spazio vuoto:

Si noti che non è necessario ripetere l'attributo class.

E' anche possibile definire una classe specifica, che può essere applicata a un solo elemento. Si consideri l'esempio seguente:

Le classi specifiche vengono utilizzate soprattutto quando si vuole usare una classe con lo stesso nome ma con proprietà diverse a seconda dell'elemento a cui la si applica (es. p.piccolo e h1.piccolo).

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it

Segui @ElePrograMania