Le classi e gli id nei Css

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Css

Un foglio di stile che consenta al designer di disporre di un'ampia gamma di elementi Html da stilizzare non è completamente fluido e versatile se non ci fosse l'opportunità di poter definire stili diversi per una stessa categoria di elementi Html, ad esempio, il Tag <p> che avrà la sua stilizzazione, non potrà essere utilizzato con un criterio grafico e stilistico diverso in un'altra occorrenza dello stesso in un dato punto della pagina o dl sito.

Mi spiego meglio, se imposto ad un Tag di testo il colore rosso, non potrò utilizzare lo stesso tipo di Tag per un testo che voglio che sia verde, se non scindendo lo stesso Tag in una serie di "sottotag": questo il principio dell'utilizzo delle classi.

Una classe potrebbe dunque definirsi come un sottoinsieme appartenente ad un'unica categoria che può avere caratteristiche diverse da un'altra classe creata come altro sottoinsieme della stessa categoria.

Chiariamo ancora di più le idee con un provvidenziale esempio: supponiamo di voler utilizzare il Tag <p> per definire i testi delle nostre pagine, ma sorge la necessità di utilizzare stili diversi a seconda della porzione di pagina in cui andiamo a scrivere, creiamo dunque due distinte classi come sottoinsiemi di <p>

<style type="text/css">
   p.testo_rosso { color: Red; }
   p.testo_verde { color: Green; }
</style>

<p class="testo_rosso">Questo testo è Rosso</p>
<p class="testo_verde">Questo testo è Verde</p>
La sintassi per la creazione di una classe è banale, la forma è "nome Tag - punto - nome classe", ad esempio p.testo_rosso.

Per richiamarla in un Tag Html si utilizza l'attributo class, ad esempio <p class="testo_rosso">.

In questo modo abbiamo creato una classe specifica per il Tag <p>, se dovessimo dunque provare a scrivere <div class="testo_tosso"> non avremo alcuna risposta, essendo quella classe proprietaria di <p>, per ovviare a questo problema possiamo creare delle classi generiche, semplicemente utilizzando la forma "punto - nome classe", ad esempio .testo_rosso.

Ecco un esempio
<style type="text/css">
.testo_rosso { color: Red; }
</style>

<p class="testo_rosso">Questo testo è Rosso</p>
<div class="testo_rosso">Anche questo testo è Rosso</div>
Ovviamente richiamare questo stile da un Tag che non utilizza l'attributo color, come nell'esempio, è perfettamente inutile.

Ma non finisce qui! possiamo creare delle classi di tipo id per richiamare lo stile mediante l'utilizzo di un foglio di stile Javascript.

La sintassi è pressochè analoga, utilizziamo il carattere "cancelletto" (#) al posto del punto, vediamo un esempio:
<style type="text/css">
   #nomeclasseid { color: Red; }
</style>

<div id="nomeclasseid">Questa è una classe di tipo id</div>
Attenzione: l'utilizzo di quest'altra tecnica è da utilizzarsi con cautela, assegnare lo stesso id ad un Tag vuol dire confondere un eventuale script Javascript che vi si riferisce, essendo l'id in programmazione un identificatore univoco.

I più cliccati della sezione Css

:: Effetto testo barrato con con i Css (49.936)

:: Referenze dei fogli di stile Css (41.900)

:: Menu ad effetto mouseover con i Css (39.299)

:: Effetti sui link con i Css (30.301)

:: Testo verticale coi Css (20.102)

:: Angoli smussati in un box coi Css (18.979)

:: Box con effetto ombra con i CSS3 (16.391)

:: Posizionare un layer centrato rispetto alla risoluzione con i Css (16.291)

:: Stilizzare i form Html con i Css (16.110)

:: CSS Expression, ovvero: integrare Javascript in un foglio di stile (15.893)

IN EVIDENZA
DOWNLOAD