Mediante gli stili e i fogli stile è possibile controllare con grande precisione l'aspetto di una pagina web, non solo per ciò che riguarda i colori, font etc. ma anche per la disposizione (positioning) dei diversi elementi. Tale disposizione prende generalmente il nome di layout della pagina. Il layout in pratica specifica come devono disporsi sulla pagina i diversi blocchi.
Abbiamo visto che gli elementi di blocco sono numerosi, ma studiando il posizionamento conviene fare riferimento al blocco generico <div>, anche se molte delle cose che diremo nel seguito valgono ugualmente per ogni altro elemento di blocco (paragrafi, tabelle etc).
Il box model di una pagina può dunque essere pensato come un'insieme di elementi <div>, strutturati gerarchicamente (alcuni blocchi ne possono contenere altri) e disposti in modo da formare la pagina stessa. Si consideri per esempio il semplice layout mostrato nella figura seguente:
Ogni blocco (Header, Content, Sidebar, Footer) corrisponde a un diverso elemento <div>.
Volendo applicare uno stile diverso a ciascuno dei blocchi che compone la pagina è possibile, come già visto, seguire tre strade diverse:
- si specifica lo stile di ogni blocco mediante gli stili
inline, usando l'attributo style (per esempio
<div style="border-style:solid">);
- si usano gli stili incorporati, scrivendo le regole di
stile nell'head della pagina;
- si usano i fogli stile CSS, usando un file di stile separato e linkato alla pagina.
La prima soluzione, quella che si basa sugli stili inline, non viene molto usata per definire il layout della pagina in quanto è difficile da modificare (bisogna editare uno per uno i singoli attributi style) e non è semplice da comprendere e da utilizzare per il progetto di una pagina. Di solito dunque si ricorre agli stili incorporati o a un fogli stile esterno.
Usando stili non inline sorge ovviamente il problema di come identificare i diversi blocchi che compongono la pagina. Nell'esempio della figura precedente abbiamo quattro blocchi che corrispondono a quattro diversi elementi div, a ciascuno dei quali bisogna applicare uno stile diverso.
Parlando di stili incorporati abbiamo visto come si possano usare le classi per assegnare uno stesso stile a più elementi di una pagina, per esempio in questo modo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pagina con foglio stile incorporato</title>
<style>
.piccolo { font-size:12px; font-family:arial; color:red }
</style>
</head>
<body>
<div class="piccolo"> Primo blocco </div>
<div class="piccolo"> Secondo blocco </div>
</body>
</html>
Le classi però non identificano in modo univoco un singolo blocco nella pagina, ma piuttosto forniscono delle regole comuni da applicare contemporaneamente a più blocchi (nell'esempio precedente la classe .piccolo viene applicata sia a h1 che a p). Se però vogliamo posizionare separatamente ciascun blocco di una pagina, ci serve un modo per dargli un nome univoco in modo da potergli applicare una regola univoca.
A questo scopo i fogli stile prevedono un selettore di id che si usa in modo simile alle classi, ma che, a differenza di queste, si applica a un solo elemento della pagina. Consideriamo di nuovo la pagina di esempio, suddivisa in Header, Content, Sidebar e Footer vista prima. Ecco come potremmo assegnare a ogni blocco un identificatore id diverso:
<body>
<div id="contenitore">
<div id="header">
...
</div>
<div id="content">
...
</div>
<div id="sidebar">
...
</div>
<div id="footer">
...
</div>
<div>
</body>
Osserviamo che abbiamo un blocco, di nome contenitore, che racchiude gli altri quattro blocchi. A ciascun elemento di blocco viene assegnato un nome (più precisamente un identificatore) con la sintassi:
dove il nome_id può essere scelto a piacere, ma deve corrispondere con il nome usato nel foglio stile (o nello stile incorporato) per definire la regola associata a quel blocco.
Cercando di essere più precisi, considerando per esempio il blocco di nome footer, la sua regola di stile potrebbe essere la seguente (non ci preoccupiamo per il momento di capire i dettagli):
{
clear: both;
background: #ccc;
text-align: right;
padding: 20px;
height: 1%;
}
Si noti la sintassi molto semplice per definire una serie di stili associati con un id:
Tale sintassi è molto simile a quella usata per dichiarare una classe universale:
Come si può notare in pratica l'unica differenza è la presenza del simbolo del cancelletto # invece del punto usato per le classi.
Vale la pena di tornare ancora sulla differenza fra id e classi. Si consideri il seguente esempio:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pagina con foglio stile incorporato</title>
<style type="text/css">
.piccolo { font-size:12px; font-family:arial; color:red }
#uno {position: relative; top: 12px; left: 20px; width: 450px; height: 20px; border: solid 1px; margin: 5px;}
#due {position: relative; top: 100px; left: 200px; width: 100px; height: 40px; border: solid 1px; margin: 5px;}
</style>
</head>
<body>
<div class="piccolo" id="uno"> Primo blocco </div>
<div class="piccolo" id="due"> Secondo blocco </div>
</body>
</html>
Senza entrare per ora nei dettagli delle regole di posizionamento, si osservi che:
- classi e id vengono spesso usati insieme;
- ogni classe generalmente si applica a più di un elemento
e serve per formattare allo stesso modo più elementi;
- ogni id si applica invece ad un solo elemento e serve per specificare le caratteristiche uniche di quello stesso elemento (ad esempio la sua posizione).
L'argomento è in effetti abbastanza complesso e lo è ancora di più per il fatto che nulla vieta di usare classi separate per identificare elementi diversi, come se fossero id (mentre è errore usare due volte lo stesso id per due elementi diversi). In generale però un buon programmatore userà le classi per le regole comuni e gli id per le regole specifiche di un singolo elemento.
precedente
Sito realizzato in base al template offerto da
http://www.graphixmania.it
