Css, che mania! Come costruisco un layout con i css?
Partendo dalla definizione di CSS (Cascade Style Sheet) e cioè dei fogli di stile a cascata possiamo intuire che il loro utilizzo si basa su di una regola principale: le gerarchie. La parola “cascata” sta infatti a richiamare l’idea che se definiamo l’attributo di un tag esso si ripercuoterà su tutti i tag in esso contenuti o da esso dipendenti.
Esempio: se definiamo nel css che il nostro tag BODY deve avere un font di colore nero, in questo caso praticamente lo andiamo ad attribuire a tutta la pagina, dato che il tag BODY comprende tutto quanto viene mostrato all’utente.
Detto ciò spieghiamo anche che il css non è altro che un file collegato alla nostra pagina html, che contiene quindi tutte le definizioni dei tag presenti in essa con tutti gli attributi che ci servono per definirne innanzitutto la posizione all’interno del layout e poi gli stili grafici degli stessi (tipo di font, colori o immagini di sfondo, allineamenti del testo, etc).
Ora, saltando appunto come includere un css in un html (potete consultare il seguente articolo) passiamo ad un piccolo lavoro concettuale, che deve precedere lo sviluppo della pagina html e del suo css.
Immaginate di dover scomporre il vostro layout in tanti box, che conterranno le informazioni che ci interessano. Ad esempio un sito base solitamente è composto da un box superiore che contiene la testata grafica e il menu, un box centrale che contiene testi e quant’altro e un footer (piè di pagina) che chiude la pagina con le informazioni sintesi sul sito (chi detiene il copyright, chi l’ha fatto, partita iva se si tratta di azienda, etc). Il tutto deve avere un ulteriore contenitore che “tenga insieme” gli altri, poi ne studieremo l’utilità.
Esempio di codice:
<div id=”contenitore”>
<div id=”testata”>Qui inseriremo la testata</div>
<div id=”contenuti”>Qui i contenuti</div>
<div id=”footer”>Qui i dati del footer</div>
</div>
Nel css li esplicheremo nel seguente modo:
#contenitore {…}
#testata {…}
#contenuti {…}
#footer{…}
Dove, all’interno delle parentesi graffe, avremo gli attributi necessari a definire stile e posizione dei summenzionati box.
A tal proposito vi invito a consultare il seguente articolo di Troiani a supporto di quanto detto con degli esempi.
Approfondiremo in seguito questo argomento, non temete. E’ solo il primo passo.
Notate come questi box siano evidenziati tramite “id”: sono elementi che possono esistere una sola volta all’interno della pagina ed identificano box ben definiti e precisi. Quest’uso è differente da quello delle cosiddette classi (<div class=”contenitore”>…) che invece identificano un box che può ripetersi anche più volte nella stessa pagina, ed è definito con la “classe” proprio perchè avrà una classe di stili che si possono ripetere e usare più volte.
A presto!
L'Autore
Laura Gargiulo, webdesigner freelance. Web architect senior, esperta xhtml, css, usabilità, design, cms, webmarketing e Seo, Wordpress specialist. Membro del progetto di prossima pubblicazione Piperita Lab e dell'IWA Italy Visita il mio sito personale Lauryn.it e contattami pure per un preventivo gratuito.
Add to Google
8 Commenti
ottimo tutorial, vorrei chiedere una cosa che non mi è chiara .
se voglio associare ad un testo, x esempio, con id, costruisco lo stile nel css e fin qui tutto ok.
se però volessi associare lo stesso stile ad un testo che viene dopo ad esempio, non mi è possibile farlo ?
e poi xkè usare id al posto di class ? che vantaggi comporta ?
grazie della risposta , voglio imparare tutto sui css
Ciao Luca,
cerco di chiarirti le idee. Se tu volessi associare ad un box id uno stile che deve essere uguale in un altro box id allora puoi ripetere lo stile nel css per i due box id. Mi spiego però: all’interno di una pagina ci sarà sempre e solo una id=”testata” e un id=”footer”, se devono avere lo stesso stile basta definirlo nel css.
Se invece ti ritrovi a dover usare lo stesso stile per due box che non sono identificati come “testata” o “footer” etc ma magari sono contenuti nel box “contenuti” in più riprese, allora devi usare le class.
Esempio: i box elenchi qui di seguito a destra sono fatti con le classi, poichè ce ne possono essere diversi nella stessa pagina, non necessariamente con un id assegnato (che so, “categoria”,”blogroll”,”links”, etc) ma molto più semplicemente avranno una classe associata che si chiama ad esempio “boxdestra” che li definisce tutti.
Spero di aver chiarito un po’ le idee…fammi sapere.
si grazie +o- mi sembra di aver capito
Non riguarda l’argomento, ma credo che oggi si possa fare un’eccezione.
Dopo l’uccisione del giornalista giapponese, in Birmania è stato spento internet: non c’è più connettività. I più smanettoni, soprattutto gli universitari, riuscivano a pubblicare fino a poco tempo fa foto che documentassero gli avvenimenti.
Esprimi la tua solidarietà al popolo Birmano, tingi di rosso il tuo blog. Se non puoi farlo, nel mio blog ho messo a disposizione uno script che inserisce una coccarda in alto a destra.
@DAG(in rosso per la Birmania): hai fatto bene, ho appena aggiunto la coccarda e ora la aggiungo anche sul mio blog personale.
@Luca, vedrai che applicandolo ti entrerà più facilmente in testa, con i prossimi esercizi spero risulterà ancora più chiaro
lo spero tanto anche io, grazie lauretta
[...] qui. Rifacendoci al precedente post sui layout, dove abbiamo impostato l’html, procediamo con il definire il css per gestire la pagina e il [...]
Non è un errore definire il BODY come tag?… Ad essere precisi body, p ecc. sono “elementi”. Lodevole il vostro intento didattico ma bisogna essere un pochino piu’ rigorosi.