*Linux Guide

Fare Web - CSS Ordinati

Una delle difficoltà derivanti dall'uso dei CSS è data dal fatto che una volta completato, il contenuto appare composto dagli stessi simboli e l'architettura della dichiarazione è così simile per ogni elemento, che nel tentativo di leggere il file, si incorre spesso in errori o scambi di elemento.
Poi non è da trascurare il fatto che nella stesura di un CSS non si riescono ad immaginare le modifiche di layout che fanno seguito ad una modifica nel corpo del codice CSS. E' infatti obbligatorio applicare la modifica, registrare il CSS, aprire il browser e caricare la pagina per saggiare ciò che è avvenuto.
Per queste ragioni è conveniente mantenere in ordine il CSS preferito per le nostre pagine e far in modo che sia facilmente consultabile e modificabile.

Innanzitutto un CSS deve avere un titolo che gli dia una personalità e che permetta di distinguerlo dagli altri presenti in un sito, come quello per la stampa, per la versione ad alta visibilità eccetera. Quindi lnciamo CSSEd e digitiamo le righe riportate nel box sottostante


/* Questo CSS si chiama pincopallino */

/* Fine del CSS pincopallino */

Lo spazio riservato tra le due dichiarazioni preliminari, appartiene ai contenuti veri e propri del CSS.
Una buona norma è quella di seguire la scala gerarchica degli elementi in una pagina web partendo dal progenitore radicale (il body) per finire con l'ultimo elemento dichiarato nella pagina. Se, ad esempio, una pagina è composta da una testata, da una barra di navigazione, da una colonna sinistra, da una colonna centrale e da un pie di pagina, sarebbe bene che il CSS avesse le dichiarazioni codificate proprio in quest'ordine e con un titolo che le identifichino. Partendo dall'alto della pagina, si raggiunge la parte bassa della stessa.


/* Questo CSS si chiama pincopallino */
/* Le caratteristiche del body */

/* Le caratteristiche della testata */

/* Le caratteristiche del menù */

/* Le caratteristiche della colonna sinistra */

/* Le caratteristiche della colonna principale */

/* Le caratteristiche del pie di pagina */

/* Fine del CSS pincopallino */

Partiamo con la dichiarazione del body illustrando poi una sintassi che apparterrà anche agli altri elementi.
Il body è il progenitore di ogni altro elemento e le caratteristiche che possano essere ereditate dagli altri elementi, possono essere dichiarate in questa sede come il tipo di font, il background, le dimensioni del font ed altro. Sarebbe bene partire dichiarando le caratteristiche strutturali e geometriche, poi quelle legate all'aspetto dei contenuti con questa sequenza:
margin > padding > border > background > font-size > font-family > color
Non stiamo in questa sede a stabilire cosa dichiarare e quale di queste dichiarazioni sia la più conveniente, ma l'aspetto del CSS del body dovrebbe essere questo


/* Questo CSS si chiama pincopallino */
/* Le caratteristiche del body */
body{
       margin : x;
       padding : x;
       border : x;
       background : x;
       font-size : x;
       font-family : x;
       color : x;
}

/* Le caratteristiche della testata */

/* Le caratteristiche del menù */

/* Le caratteristiche della colonna sinistra */

/* Le caratteristiche della colonna principale */

/* Le caratteristiche del pie di pagina */

/* Fine del CSS pincopallino */

Se si legge questa semplice architettura sappiamo già a cosa si riferiscono quelle scritte.
E' venuto il momento di passare agli altri elementi aggiungendo o sottraendo degli attributi e dei valori a seconda delle necessità tenendo a mente di impostare, nelle dichairazioni, prima gli attributi e i valori relativi alle misure strutturali dell'elemento (larghezza, altezza, margini, padding, bordi) poi attributi e valori relativi agli aspetti prettamente grafici (background, font, color, letter-spacing ed altro).
Se abbiamo fatto un lavoro sensato, il risultato dovrebbe essere il seguente


/* Questo CSS si chiama pincopallino */
/* Le caratteristiche del body */
body{
       margin : x;
       padding : x;
       border : x;
       background : x;
       font-size : x;
       font-family : x;
       color : x;
}

/* Le caratteristiche della testata */
#testata{
       width : x;
       height : x;
       margin : x;
       padding : x;
       border : x;
       background : x;
       font-size : x;
       font-family : x;
       color : x;
}

/* Le caratteristiche del menù */
#menu{
       width : x;
       height : x;
       margin : x;
       padding : x;
       border : x;
       background : x;
       text-align : x;
       font-size : x;
       font-family : x;
       color : x;
}

/* Le caratteristiche della colonna sinistra */
#colsin{
       width : x;
       height : x;
       float : x;
       margin : x;
       padding : x;
       border : x;
       background : x;
       text-align : x;
       font-size : x;
       font-family : x;
       color : x;
}

/* Le caratteristiche della colonna principale */
#colcen{
       width : x;
       height : x;
       float : x;
       margin : x;
       padding : x;
       border : x;
       background : x;
       text-align : x;
       font-size : x;
       font-family : x;
       color : x;
}

/* Le caratteristiche del pie di pagina */
#piepagina{
       width : x;
       height : x;
       float : x;
       clear : x;
       margin : x;
       padding : x;
       border : x;
       background : x;
       text-align : x;
       font-size : x;
       font-family : x;
       color : x;
}

/* Fine del CSS pincopallino */

Linux Guide | Torna in alto