Capitolo 7: CSS – Fogli di stile 2

Regole

Entriamo nel vivo dell'argomento Fogli di Stile.
Nel codice del foglio di stile troviamo esclusivamente regole, accompagnate eventualmente da commenti per renderle più comprensibili a chi legge (i primi siamo noi stessi).
Com'è fatta una regola?
Questa è una regola CSS, è scritta nel modo che segue:
div#col_sx {float: left; width: 23%; padding: 0 2% 0 2%; background: #ff9933; }
oppure così:
div#col_sx {
float: left; width: 23%;
padding: 0 2% 0 2%;
background: #ff9933;
}


Vediamo i dettagli:
div#col_sx è il selettore; il contenuto dentro le parentesi graffe si chiama blocco delle dichiarazioni separate tra loro dal punto e virgola; una dichiarazione è composta dalla prima parola detta proprietà davanti ai due punti e dal suo valore dopo i due punti.
La regola qui sopra significa:

Commenti

Il commento se su più righe va scritto
/* questo il nostro commento */
se occupa una sola riga può essere scritto così
// questo il nostro commento
Prima della regola precedente per esempio possiamo scrivere così: /* definisco la regola per la colonna dei menù della mia pagina */ div#col_sx {
float: left; width: 23%;
padding: 0 2% 0 2%;
background: #ff9933;
}
Il commento serve soltanto chi sviluppa o gestisce la pagina, non è interpretato da alcun browser per cui non è visualizzato sulla schermata della pagina web.

Proprietà e Valori

Le proprietà usate nell'esempio sono:
float: serve a posizionare gli elementi, nel nostro esempio è l'elemento colonna sinistra. Può avere valori left e right; width: definisce la larghezza dell'elemento, l'abbiamo espressa in percentuale ma può essere espressa in altre unità come px (pixel); : spazio del contenuto sia esso testo o altro dai bordi dell'elemento top right buttom left, questi valori io l'ho espressi in percentuale, ma si possono esprimere anche in altre unità di misura come px ; background: indica il colore di sfondo dell'elemento, può essere espresso in codice rgb #ff9933 oppure in chiaro come blue, orange, red, ecc...
Altre proprietà viste nel mio esempio sono:
display: come dice la parola stessa indica come un elemento deve essere visualizzato, nel mio esempio si riferisce alla riga orizzontale hr, il valore è 'none' , ma può avere altri valori; text-align: allineamento del testo o qualsiasi contenuto all'interno dell'elemento; margin: spazio dell' elemento dai bordi dell'elemento precedente, come per padding i valori si referiscono a top right buttom left;
Gli approfondimenti come al solito nella guida CSS all'indirizzo seguente: Guida CSS di base

Esempio

Ora che abbiamo leggermente approfondito alcuni concetti sui Fogli di Stile riprendiamo,
il precedente esercizio ed apportiamo qualche modifica alle proprietà (padding, color, ecc.) di alcune regole e posizioniamo a sinistra la colonna dei contenuti principale ed a destra quella dei menù.
Fate l'esercizio e per ogni problema non esitate a chiedere chiarimenti!