CSS: layout flusso standard

Con il flusso stnadard ogni elemento di blocco si situa sopra il successivo. Pochè questo è il metodo predefinito con cui il browser tratta gli elementi HTML, non è necessaria una proprietà CSS per indicare che gli elementi devono seguire il flusso standard.

E' necessario però indicare nel CSS la lunghezza dalla pagina, dei paragrafi, che font intendiamo usare e l'allineamento che volgliamo usare per i titoli. Occorre altresì specificare l'immagine o il colore dello sfondo della nostra pagina web.

Occorre anche definire le classi per i div che intendiamo usare e le relative caratteristiche. Quindi definire i menù di navigazione delle pagine, i pulsanti e ogni elemento che intendiamo usare nella pagina web. Con il file CSS possiamo definire lo stile di qualunque elemento inseriamo nella nostra pagina web.

Facciamo ora l'esempio del codice HTML di una semplice pagina web:

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />

<style type="text/css">

body {
    width: 950px;
    font-family: Arial, Verdana, sans-serif;
    color: #665544;
    margin: auto;}
h1  {
    background-color: #efefef;
    margin: 20px 0 20px;
    padding: 15px;}
h2  {
    text-align: center;
    padding: 15px;}
h3  {text-align: center;
    padding: 15px;}
p   {
    width: 950px;
    margin: 0px;
    }
hr  { 
    border: 0;
    width: 100%;
    color: #000000;
    background-color: #000000;
    height: 1px;
    }
#menu ul {
    padding: 0;
    margin: 0;
    z-index: 1000;
    }
#menu li {
    position: relative;
    float: left;
    width: 190px;
    text-align: center;
    list-style: none;
    }
#menu li a {
    background-color: #454545;
    color: #FFF;
    padding: 15px 20px;
    text-decoration: none;
    display: block;
    }
#menu li a:hover {
    background-color: #0186ba;
    text-shadow: 0px 0px 1px #FFF;
    }
#menu ul ul {
    position: absolute;
    top: 48px;
    visibility: hidden;
    }
#menu ul li:hover ul {
    visibility: visible;
    }
#menu ul ul:hover {
    box-shadow: 0px 20px 30px #7C7C7C;
    }
#menu ul ul li a {
    background-color: #3A3A3A;
    }
#menu ul ul li a:hover {
    background-color: #0186ba;
    }
</style>
</head>

<body>
<h1 align='center'>Punto Informatico Free  - Tutorial</h1>

<div id="menu">
        <!-- Lista generale -->
        <ul>
            <!-- 1° Elemento   -->
            <li><a href="#">Home</a></li>
            <!-- 2° Elemento -->
            <li><a href="#">Texbuntu</a></li>
            <!-- 3° Elemento: (Sottomenu) -->
            <li><a href="#">LyX</a>
                <ul>
                    <li><a href="#">Tutorial</a></li>
                    <li><a href="#">Guida</a></li>
                    <li><a href="#">Homepage LyX</a></li>
                </ul>
            </li>       
            <li><a href="#">Markdown</a></li>
            <li><a href="#">Html</a></li>
            </li>
        </ul>
</div>
<br>
<br>
<br>
<br>

<p align='justify'>
LyX è un word processor multi-piattaforma open source che potete usare con linux, Windows o col Mac.
E' uno dei programmi più usati dagli studenti all'università per scrivere le tesi. Questo perché oltre
a permettere di fare lavori di impaginazione all'altezza di lavori professionali consente di risparmiare
molto tempo. Immaginate poter scrivere un documento come un libro o una lunga tesi divisa in capitoli,
sezioni e sottosezioni. Poi si dice al programma di creare l'indice e lui lo crea.
Da solo crea l'indice indicando i numeri di pagina e se in seguito noi andiamo a modificare il nostro
documento lui aggiorna l'indice automaticamente. Potete immaginare che bel risparmio di tempo non dover
creare l'indice manualmente e non doverlo aggiornare manualmente per ogni modifica che noi facciamo
al documento.
….
</p>


<hr/>

</body>
</html>

Il risultato lo potete vedere qui.

HTML Tutorial

HTML Tutorial

Punto Informatico Free - HTML Tutorial

CSS: layout flusso standard