*Linux Guide

Fare Web - Inserire gli stili

Ci sono fondamentalmente tre metodi per inserire gli stili all'interno di un documento xhtml ed in ordine decrescente di predominanza sono i seguenti :

  1. Inserimento inline
  2. Inclusione
  3. Inserimento da esterno

Cosa significa predominanza?
Che nel caso una pagina web prevedesse tutti tre i metodi elencati, la pagina mostrerebbe dapprima i settaggi stabiliti con il sistema inline, poi quelli previsti dal sistema di inclusione ed infine quelli stabiliti con gli stili inseriti da esterno.
E' un concetto importante da tenere sempre a mente durante la progettazione di una o più pagine web ed in corso di loro modifica, per i motivi che ora analizzeremo brevemente.

Supponiamo di creare un sito composto di 100 pagine per le quali studieremo accuratamente un layout cromatico strutturale ben preciso. Dovremo quindi studiare uno stile che si adatti a tutte 100 le pagine e che ne caratterizzi l'appartenenza allo stesso sito offrendo al navigatore affidabilità e tranquillità. Useremo quindi il sistema di inserimento da esterno in modo tale che modificando il solo foglio di stile, tutte le pagine si adatteranno automaticamente alle modifiche.

Supponiamo ora che un gruppo di dieci pagine debba presentare una struttura diversa con aggiunta di elementi specifici, come delle tabelle, e vogliamo che queste tabelle assumano delle caratteristiche di layout diverse da quelle previste dal Foglio di Stile esterno. Senza influire sul Foglio di stile esterno, potremo creare uno stile incluso che ottenga gli effetti desiderati. Avremo perciò che la struttura generale delle dieci pagine sarà gestita sempre dal Foglio di stile esterno, ma le caratteristiche delle tabelle diverse, saranno gestite dallo stile incluso in quelle sole dieci pagine, senza influire sugli elementi con identificazioni specifiche.

Supponiamo infine che una sola pagina debba avere un elemento comune alle altre, formattato in modo diverso per esigenze legate a quella sola pagina, ad esempio vogliamo che il titolo del paragrafo invece che nero, debba essere rosso. Con il sistema del Foglio esterno dovremmo nominare quel paragrafo in modo diverso, inserire la dichiarazione di stile nel Foglio esterno per ottenere una sola modifica. Troppo complicato!
Si può ottenere la stessa cosa inserendo lo stile direttamente sull'elemento, cioè nella sua linea (inline), senza andare a modificare nulla nel foglio esterno, ne nella parte relativa alla testa del documento.
Vediamo ora tecnicamente come fare a produrre le tre varianti, partendo da quella più semplice, l'inserimento "inline"

Vogliamo che un paragrafo presenti il testo colorato di rosso e che il font abbia uno stile italico. Dovremo perciò inserire, in quel preciso paragrafo, lo stile desiderato con una tecnica come quella descritta nel box sottostante.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it">
<head>
<title>Stili inline</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<p>Donec eget enim sed velit auctor faucibus. Pellentesque ligula mauris, elementum ut, fermentum in, dictum eget, lacus. Mauris tempor accumsan elit. Pellentesque nibh purus, <a href="#">tempus id</a>, accumsan vitae, fermentum in, turpis. </p>
<p style="color: #f00;"><i>Cras scelerisque suscipit lectus. Pellentesque consequat. Etiam et felis. Nunc eros nunc, lobortis eu, rhoncus eu, convallis luctus, ligula. Pellentesque faucibus, wisi nec tempus mollis, lectus tortor porta massa, nec sagittis nulla tortor in est. Etiam nonummy.</i></p>
</body>
</html>

Della parte evidenziata noterete come all'interno del tag di apertura del paragrafo (<p>) ci sia una dichiarazione che manca nel tag del paragrafo precedente. Questa dichiarazione ( <p style="color: #f00;">) comprende un attributo (color) ed un valore (#f00) che determina il colore del testo, che sarà rosso. Il tag successivo (<i>) stabilisce che il testo avrà uno stile italico (corsivo).
Questa tecnica trova la sua massima indicazione quando si voglia modificare una pagina sola ed è invece sconsigliata quando la si applichi a molte pagine per l'ovvio motivo che se la modifica debba essere rimossa, ciò comporta l'apertura e la modifica su ogni singola pagina.

Ora affrontiamo la tecnica degli stili inclusi.
Supponiamo di voler far si che in alcune particolari pagine, una delle tabelle incluse abbia caratteristiche differenti rispetto alle altre presenti nelle altre pagine e che sono gestite da un CSS esterno. Dovremo quindi applicare uno stile incluso che, una volta creato possa essere inserito in quelle precise pagine.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it">
<head>
<title>Stili inline</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body{margin : 0;
padding : 0;
background : #fff;
color : #000;
}

#tabmod{border : 1px solid #000;
}

.capmod{border : 1px dashed #666;
background : #cfc;
color : #c00;
}

.cellmod{border : 1px solid #c00;
background : #ccc;
font : 90% arial,sans-serif;
color : #009;
}
.attenzione{border : 1px dotted #c00; color : #c00; font-style : italic; } -->
</style>

</head>
<body>
<table>
<tr>
<th>Capitolo</th>
<th>Capitolo</th>
</tr>
<tr>
<td>Donec eget enim sed velit auctor faucibus. Pellentesque ligula mauris, elementum ut, fermentum in, dictum eget, lacus.</td>
<td>Donec eget enim sed velit auctor faucibus. Pellentesque ligula mauris, elementum ut, fermentum in, dictum eget, lacus.</td>
</tr>
</table>

<table id="tabmod">
<tr>
<th class="capmod">Capitolo</th>
<th class="capmod">Capitolo</th>
</tr>
<tr>
<td class="cellmod"><p class="attenzione">Donec eget enim sed velit auctor faucibus. Pellentesque ligula mauris, elementum ut, fermentum in, dictum eget, lacus.</p></td>
<td class="cellmod">Donec eget enim sed velit auctor faucibus. Pellentesque ligula mauris, elementum ut, fermentum in, dictum eget, lacus.</td>
</tr>
</table>
</body>
</html>

La parte evidenziata in rosso indica il foglio di stile incluso che, come potete osservare, si trova nell'area di testa del documento xhtml. Potete notare come ogni dichiarazione abbia un selettore specifico (il nome dell'elemento HTML che deve ricevere le caratteristiche di stile, quindi "tabmod", "capmod", "cellmod") che richiama proprio l'elemento omonimo.
Le parti evidenziate in viola indicano i nomi identificativi degli elementi che devono essere modificati e tali nomi poi si richiamano al Foglio di Stile incluso.
Avrete anche notato che l'architettura delle tabelle ed i contenuti sono identici, ma il loro aspetto sarà diverso proprio in virtù dello stile incluso. Questo modo di procedere si applica elettivamente per gestire aspetti particolari di poche pagine e basterà produrre un solo stile con le caratteristiche che ci aggradano, poi, con un semplice copia/incolla, inseriremo lo stile incluso nell'area di testa delle pagine che vogliamo modificare, ricordandoci di identificare gli elementi che saranno soggetti all'influenza di tale stile incluso. Un gioco da bambini!
Attenzione però!!! E' un metodo che si addice a poche pagine in quanto è molto semplice modificare 10 o 20 pagine aprendole una ad una, ma quando se ne devono modificare 100 o 200, l'affare si complica ed il tutto diventa difficoltoso e noioso. In quest'ultimo caso diventa molto, molto più indicato l'uso di Fogli di stile esterni, tecnica che andiamo a discutere nel prossimo paragrafo.

Il CSS esterno è la metodica più raccomandata dagli stessi organi ufficiali che regolano il web. E' la tecnica che si addice ad un intero sito in quanto un file solo, determina l'aspetto di tutte le pagine che lo compongono, siano esse 100 o 1000.
Con questo sistema il sorgente HTML si libera di molto codice, relativo alle caratteristiche di formattazione che, altrimenti, lo appesantirebbero e lo renderebbero di difficile modifica.
Procediamo quindi con l'esempio pratico della pagina con le tabelle esposto sopra, mostrando la sua struttura HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it">
<head>
<title>Stili inline</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" href="miostile.css" type="text/css" title="Il foglio di stile del mio sito" /> </head>
<body>
<table>
<tr>
<th>Capitolo</th>
<th>Capitolo</th>
</tr>
<tr>
<td>Donec eget enim sed velit auctor faucibus. Pellentesque ligula mauris, elementum ut, fermentum in, dictum eget, lacus.</td>
<td>Donec eget enim sed velit auctor faucibus. Pellentesque ligula mauris, elementum ut, fermentum in, dictum eget, lacus.</td>
</tr>
</table>

<table id="tabmod">
<tr>
<th class="capmod">Capitolo</th>
<th class="capmod">Capitolo</th>
</tr>
<tr>
<td class="cellmod"><p class="attenzione">Donec eget enim sed velit auctor faucibus. Pellentesque ligula mauris, elementum ut, fermentum in, dictum eget, lacus.</p></td>
<td class="cellmod">Donec eget enim sed velit auctor faucibus. Pellentesque ligula mauris, elementum ut, fermentum in, dictum eget, lacus.</td>
</tr>
</table>
</body>
</html>

Noterete certo una struttura molto pulita e facile da consultare e, soprattutto avrete notato la stringa di codice evidenziata di rosso che indica il richiamo al Foglio di stile esterno che determinerà le caratteristiche d'aspetto della pagina. Basterà inserire questo link in ogni pagina del sito e da quel momento in poi tutte le pagine seguiranno quello che gli verrà detto dal Foglio di stile. Un solo file comanderà 10, 100, 1000, 10.000 pagine! Se ne deduce l'immensa praticità di questo sistema rispetto a quelli elencati finora.

Vediamo ora quello che dovremo inserire nel foglio di stile, guardando il box sottostante


body{margin : 0;
padding : 0;
background : #fff;
color : #000;
}

#tabmod{border : 1px solid #000;
}

.capmod{border : 1px dashed #666;
background : #cfc;
color : #c00;
}

.cellmod{border : 1px solid #c00;
background : #ccc;
font : 90% arial,sans-serif;
color : #009;
}
.attenzione{border : 1px dotted #c00; color : #c00; font-style : italic; }

Verrà spontaneo notare che si tratta delle stesse cose contenute nel foglio incluso ed è proprio così-
Notate quindi la semplicità.
Se avete creato un Foglio di stile esterno e volete applicare delle modifiche da agganciare solo a poche pagine, potrete procedere come indicato nei punti sottostanti.

  1. Selezionate, dal Foglio di stile esterno, la serie di dichiarazioni che volete modificare
  2. Copiatele
  3. Incollatele nella testata del codice (tra i tags <head> ... </head>) tra i tags <style type="text/css"> ... </style>
  4. Applicate le modifiche
  5. Controllate l'effetto di queste modifiche e registrate la pagina
  6. Selezionate quindi l'intero stile incluso e applicatelo allo stesso modo ad ognuna delle pagine che volete modificare
Se invece avete creato un Foglio di stile incluso solo per alcune pagine, ma che vi piace particolarmente e che vorreste adottare per tutte le pagine del sito, basterà procedere come descritto sotto :
  1. Aprite CSSEd
  2. Selezionate, nella pagina che contiene lo stile incluso, lo stile stesso
  3. Copiate la selezione
  4. Incollatela nel foglio di CSSEd, badando di rimuovere i tag di apertura e di chiusura dello stile stesso (<style type="text/css"> e </style>)
  5. Registrate nella directory del sito, questo foglio con il nomignolo che più vi piace e con estensione .css (ad esempio : stylebello.css)
  6. Aprite le pagine che volete adeguare e inserite, nell'area di testa (tra i tags <head> ... </head> per intenderci) il link che richiami il Foglio appena salvato (<link rel="stylesheet" href="stylebello.css" type="text/css" title="Il foglio di stile del mio sito" />)
  7. Osservate il vostro lavoro!

Linux Guide | Torna in alto