Impaginare a livelli con i CSS
Risultati da 1 a 2 di 2
  1. #1
    Utente Elite
    L'avatar di Ryuzaki
    Registrazione
    15/08/11
    Località
    Inferi
    Età
    16
    Messaggi
    2528
    Ringraziato: 45 in 41 posts
    Reputazione
    3

    Impaginare a livelli con i CSS

    Abbiamo già visto due stili di impaginazione: le tabelle e i frame. Come accennato più volte all’interno del corso esiste una terza via: l’impaginazione tramite i fogli di stile (ovvero "CSS", cioè "Cascading Style Sheets", che significa "fogli di stile a cascata").

    La sintassi dei CSS esula dall’argomento del corso presente, è importante tuttavia afferrare il concetto che un elemento può essere disposto all’interno della pagina, semplicemente specificando le sue coordinate, o indicando il modo in cui deve essere spostato rispetto agli elementi che lo circondano.

    Nel caso dell’impaginazione tramite i fogli di stile abbiamo per lo più a che fare con i tag <span> e <div>, che possono essere accuratamente posizionati e visualizzati specificando ad esempio:

    - larghezza
    - altezza
    - distanza dall’alto
    - distanza da sinistra
    - colore o immagine di sfondo
    - colore, tipo e grandezza dei bordi
    - distanza tra il contenuto e il bordo (padding) e tra il bordo e l’esterno (margin)

    Per “livello” (o “layer”) in HTML si intende appunto un <div> posizionato tramite i CSS all’interno della pagina.

    La sintassi dei CSS è molto diversa da quella dell’HTML solito.

    Ad esempio per posizionare la testata di HTML.it a 50 pixel dall’alto della pagina e 200 pixel da sinistra, con lo sfondo a righe, bordo nero, e una dimensione di 600 x 80 pixel di è necessario utilizzare questa sintassi.

    Nella <head>:
    Codice:
    <style type="text/css">
    #logo {
       position:absolute;
       left:200;
       top:50;
       width:600px;
       height:80px;
       background-image: url(sfondo.gif);
       border: 1px solid [Solo gli utenti registrati possono vedere i link. Clicca qui per registrarti..]
    }
    </style>
    nel <body>:
    Codice:
    <div id="logo">
      <img src="logo.gif" alt="HTML.it" title="HTML.it" width="224" height="69">
      <img src="logo1.gif" alt="HTML.it" title="HTML.it" width="59" height="70">
    </div>
    Il vantaggio di questa impostazione è quella di avere una pagina molto pulita: infatti il file HTML è composto soltanto dai <div> (o dagli span) con i contenuti, mentre lo stile di visualizzazione dei contenuti è affidato ai fogli di stile (per lo più espressi in un file separato).

    Fonte: html.it

  2. #2
    Utente Elite
    L'avatar di M4xKill3r
    Registrazione
    22/04/11
    Località
    Cagliari!
    Età
    16
    Messaggi
    1957
    Ringraziato: 58 in 52 posts
    Reputazione
    3
    Utile per i meno esperti, nice guida
    Non ti funziona un hack per warrock? Usa il mio Injector e vedi che gia funzionera!
    Clicca Qui per Uttilizzare il mio Injector!

    21/01/09 Iscrizzione Primo ItalianHack!
    08/08/2011 Official Helper!

Permessi di Scrittura

  • Tu non puoi inviare nuove discussioni
  • Tu non puoi inviare risposte
  • Tu non puoi inviare allegati
  • Tu non puoi modificare i tuoi messaggi
  •