Il foglio di stile ci permette di fare riferimento ad una struttura di layout 'universale', che può essere adattata a tutti i siti web. Tale struttura è composta da 5 box:
-la testata (header);
-la navigazione (navigation);
-il contenuto (content): questo box sarà generalmente più grande degli altri;
-il piede (footer);
-un quinto box che contenga spazialmente tutti gli altri (container).
Esempio:
Per fare questi box devo inserire nel foglio di stile cinque diversi id (#nomeid), ognuno corrispondente ad un box diverso, specificandone le relative proprietà. Per collegare CSS e HTML uso il tag <div>.
Ad esempio, nel foglio di stile inserisco una cosa di questo tipo:
html, body {margin: 0; padding: 0 }
#container {width: 960px; margin: 0 auto}
#header {background-color: red; }
#navigation { background-color: blue; color:white; }
#content { background-color: green;}
#footer {background-color: black; }
Successivamente, collego gli id del CSS all'HTML, inserendo cinque tag <div>, facendo in modo che il primo contenga gli altri quattro:
<div id="container">
<div id="header">TESTATA</div>
<div id="navigation">NAVIGAZIONE</div>
<div id="content">CONTENUTO</div>
<div id="footer">PIEDE</div>
</div>
Tutti i box vengono allineati automaticamente a sinistra della pagina. Tuttavia, la disposizione standard della maggior parte dei siti prevede che i box siano ancorati al centro.
Per ottenere l'ancoraggio al centro inserisco nel foglio di stile "html, body {margin: 0; padding: 0 }", dove le proprietà margin e padding servono a centrare il layout; inoltre nell'id #container inserisco la coppia proprietà:valore "margin: 0 auto". L'id container, che contiene gli altri quattro, allinea tutti i box.
Dentro i vari <div> (blocchi) posso inserire contenuti. Ad esempio nel div navigazione posso inserire la navigazione, nel div contenuto un testo e un'immagine.
Nessun commento:
Posta un commento