Dunque, le istruzioni riguardanti la grafica possono alloggiare sostanzialmente in tre posizioni differenti, all'interno della struttura di markup:
- in un file esterno; avremo, quindi, la seguente stringa, posizionata nella <head> del documento, per dire al browser dove andare a pescare il foglio di stile:
codice:
<link
rel="stylesheet"
type="text/css"
href="posizione/file.css" />
- all'interno del documento stesso, però slegate dal <body>; ecco che si usa il marcatore <style>, posizionandolo nella <head>:
codice:
<head>
<style type="text/css"><!--
/* Qui le varie istruzioni CSS, come quelle d'esempio */
body
{
margin:0;
font-size:100%;
}
--></style>
</head>
- sempre all'interno del documento stesso, però direttamente collegate all'elemento che si vuole editare; ora si userà l'attributo style (diverso dall'elemento <style>); per ottenere lo stesso risultato di cui sopra:
codice:
<body style="margin:0; font-size:100%">
Tra tutte, proprio quest'ultima opzione è stata deprecata, ciò significa che non va più adottata. Lo scopo della decisione è preciso: si vuole separare il più possibile la struttura delle informazioni dalla sua presentazione visuale.
Detto questo, passiamo all'attributo class: esso è, a tutti gli effetti, uno strumento del markup, non dei fogli di stile, anche se è ad essi che maggiormente si lega. Qual è lo scopo di un linguaggio di marcatura? Attribuire significato alle informazioni [ www.mibmagazine.it/article.php?id=51 ]. Significato, non presentazione.
Prendiamo l'esempio di un catalogo prodotti di un sito di ortofrutta. Questo sito permette di ordinare direttamente on-line la merce, facendosela poi recapitare a casa. Immaginiamo la pagina in cui sono elencati i vari prodotti che il negozio ha attualmente a disposizione; avremo una cosa simile:
codice:
<h2>I prodotti di oggi</h2>
<ul>[*]Pomodori[*]Carote[*]Zucchine[*]Banane[/list]
Ora, immaginiamo che queste scorte siano limitate, quindi che ci sia la possibilità che un utente che entra la sera possa trovare il numero di - diciamo, per esempio - carote esaurito.
Come possiamo, noi che progettiamo la struttura di markup, inserire l'informazione 'prodotto esaurito'? Attraverso le classi, ad esempio:
codice:
<h2>I prodotti di oggi</h2>
<ul>[*]Pomodori
<li class="esaurito">Carote[*]Zucchine[*]Banane[/list]
Nel nostro foglio di stile potremo poi definire una visualizzazione opportuna per evidenziare la condizione del prodotto. Che so, si potrebbe colorare di rosso, riquadrare e inserire un'icona esplicativa:
codice:
.esaurito
{
color:red;
border:1px solid red;
background:url('icona-esaurito.gif') no-repeat 0 50%;
}
Adesso, qualsiasi elemento della lista che avrà l'attributo class="esaurito" comparirà come abbiamo specificato con i CSS.
Spero di essere stato chiaro. 
Permessi di invio
Rispondi quotando