In questo articolo articolo vedremo diversi esempi di uso dei CSS per controllare gli elementi di pagina, risolvendo buona parte delle questioni pratiche che si affrontano all'inizio dello studio dei CSS. A tal proposito ricordo a chi si avvicina da poco ai CSS che seguire una buona guida è essenziale (tra le tante, consiglio quella di HTML.it, quella di W3Schools e le guide base e avanzata di Brainjar.com) e che è importante procedere per gradi. Per il lettore esperto, spero che questo articolo possa costituire una sorta di ripasso. Iniziamo subito.
Controllare il testo con i CSS
Per controllare il testo con i CSS, definire un font sul body è una delle prime cose da fare. Vediamo come:
body{ font: 12px "Trebuchet MS",Verdana,Arial,sans-serif}
Da notare che i font vanno specificati dal più "raro" al più diffuso, fino ad arrivare alla famiglia generica (sans-serif in questo caso). Con il codice appena visto il testo della pagina (titoli esclusi) sarà a dimensione fissa, quindi non ridimensionabile su Internet Explorer (gli altri browser consentono di ridimensionare anche il testo in pixel).
La soluzione alternativa al dimensionamento in pixel è l'uso delle misure percentuali: le più diffuse sono 76% (circa 12 pixel con dimensione del testo media) e 100.01% (16 pixel con testo medio). Dimensionamento fisso o relativo, è importante specificare anche le dimensioni dei titoli. Vediamo subito il primo esempio e il relativo codice:
body{font: 76% Verdana,Arial,sans-serif;background-color: #FFF;color: #333}
h1,h2,h3{color: #39B9E6}
h1{font-size: 200%}
h2{font-size: 160%}
h3{font-size: 140%}
p{line-height: 1.5}
È stato usato il I selettori CSS per specificare il colore dei titoli, e in più è stato impostato il line-height per migliorare la leggibilità dei paragrafi.
Rispetto alla versione senza CSS abbiamo migliorato di molto le cose, ma possiamo spingerci oltre.
Controllare margini e padding
Come ho scritto nell'articolo Capire il box model alcuni elementi, tra cui i titoli e i paragrafi, hanno margini di default non nulli per consentire la presentazione anche senza fogli di stile. Riguardiamo un attimo l'ultimo esempio: si può notare che lo spazio tra un titolo e il paragrafo precedente è lo stesso che tra titolo e paragrafo successivo. Un concetto essenziale del design è la prossimità: elementi correlati dovrebbero risultare vicini, così da costituire un'unità. Nel caso dell'esempio, vorremmo che il titolo risulti più vicino ai paragrafi relativi. Ecco il secondo esempio, in cui abbiamo migliorato le spaziature, e il CSS:
body{font: 76% Verdana,Arial,sans-serif;
background-color: #FFF;color: #333}
h1,h2,h3{margin: 1em 0 0;color: #39B9E6}
h1{margin: 0;font-size: 200%}
h2{font-size: 160%}
h3{font-size: 140%}
p{margin: 0;padding: 0 0 0.7em;line-height: 1.5}
In sostanza si sono eliminati i margini dai paragrafi e dell'h1, mentre su h2 e h3 si è lasciato solo un margine superiore. Infine, ai p è stato assegnato un padding inferiore.
Abbiamo così creato un set di regole tipografiche che potrete riadattare alle vostre esigenze. Ora passiamo a un aspetto essenziale dei CSS: i link.
Stili sui link
Le regole CSS sui link devono segire un ordine preciso:
a:link{ }
a:visited{ }
a:hover{ }
a:active{ }
Per ricordarvelo, potrebbero essere utili le due parole inglesi LoVe HAte, in cui le lettere che ho scritto in maiuscolo indicano l'ordine in cui definire le pseudo-classi. Spesso ci si trova comunque a voler usare solo lo stato normale e lo stato hover. Una forma breve è stata usata in questo esempio, di cui vediamo subito le regole sui link:
a{text-decoration: none; color: #EC3D00;padding-bottom: 1px;
border-bottom: 1px solid #333}
a:hover{border-bottom: 1px dotted #000}
Nel caso volessimo differenziare i link visitati dovremo inserire una regola aggiuntiva:
a{text-decoration: none; color: #EC3D00;padding-bottom: 1px;
border-bottom: 1px solid #333}
a:visited{color: #999}
a:hover{border-bottom: 1px dotted #000}
Questo è l'esempio relativo in cui il primo link che punta alla home page di Pro, se visitato, dovrebbe risultare in grigio.
Eliminare gli spazi dal body
Vediamo come sia possibile eliminare lo spazio bianco che il browser lascia di default tra la finestra e il contenuto. Basta una semplice regola, che elimina margini e padding degli elementi html e body:
HTML,body{margin:0;padding:0}
Ecco l'esempio.
Centrare orizzontalmente il contenuto
Alla vecchia maniera per avere un layout a larghezza fisso e centrato si incominciava così nell'HTML:
<table align=center width=760>
<!-- tutto il contenuto qui -->
</table>
I CSS ci consentono di controllare tutto senza dover scrivere codice presentazionale nell'HTML, e di evitare di usare tabelle per il layout. Vediamo l'HTML dell'esempio:
<div id="container">
<!-- tutto il contenuto qui -->
</div>
Ora le regole CSS essenziali:
body{text-align: center} /* centra in IE5.x */
div#container{ width: 760px;
margin: 0 auto; /* centra negli altri browser */
text-align: left; /* ripristina l'allineamento */ }
La centratura per i browser moderni si ottiene solo con la dichiarazione sui margini del container: il valore auto sui due margini laterali sta a significare che hanno la stessa distanza dalla finestra del browser. Internet Explorer 5.x non interpreta la dichiarazione e richiede erroneamente la dichiarazione di text-align sul body, che viene ripristinata su left nella seconda regola.
Centratura verticale
Se siete abituati alle tabelle e all'uso dell'attributo valign, troverete che i CSS nel centrare verticalmente elementi generici sono un po' carenti. A questo proposito, ricordo che la proprietà CSS vertical-align assume un duplice ruolo:
- Centrare verticalmente il contenuto di una cella di tabella, proprio come valign
- Allineare immagini ed elementi inline rispetto alla riga di testo che occupano
Se applicata in altri casi, non ha effetto. La centratura verticale con i CSS si può ottenere facilmente in uno di questi due casi:
- centrare un'unica linea di testo in un contenitore di altezza stabilita;
- centrare un elemento di dimensione stabilita in un contenitore di dimensione stabilita.
Vediamoli. Per centrare una linea di testo all'interno di un contenitore di dimensione nota si può usare la proprietà line-height. Ecco l'esempio e il CSS:
div#box{height: 120px; line-height: 120px;background-color: #BFC6DE;
color: #40509B;font-family: "Trebuchet MS", Arial, sans-serif}
In grassetto ho riportato le due dichiarazioni essenziali: height e line-height devono avere lo stesso valore.Ecco un secondo esempio in cui un titolo viene centrato all'interno dell'header. Il CSS è il seguente:
body,HTML{margin:0;padding:0}
div#header{height: 120px;margin: 0;background-color: #BFC6DE}
div#header h1{margin: 0;padding-left: 25px;color: #40509B;
font: bold 25px/120px "Trebuchet MS",Arial,serif}
Da notare che il line-height del titolo, riportato in grassetto, è stato incoporato nello shorthand che definisce il testo. Dopo la dimensione del testo è bastato inserire una "/" seguita dall'altezza di linea.
Vediamo ora il secondo caso, in cui ad un paragrafo con testo dimensionato in pixel sono state assegnate delle dimensioni empiriche e la centratura verticale (e orizzontale) si è ottenuta grazie al posizionamento assoluto. Ecco l'HTML:
<div id="container">
<p>Testo centrato verticalmente</p>
</div>
E il CSS:
div#container{position: relative;height: 400px;width: 160px;
background-color: #BFC6DE}
div#container p{position: absolute;top: 185px;left: 30px;
width: 100px;height: 30px; background-color: #FFF;
font: 12px Arial,sans-serif;text-align:center}
Una cosa essenziale è che per consentire di posizionare il paragrafo rispetto al suo contenitore è necessario dichiarare il div position: relative. Del paragrafo vengono specificate le dimensioni e le coordinate top e left. In grassetto le dichiarazioni chiave.
Centrare verticalmente e orizzontalmente nel body
Centratura orizzontale e verticale sono anche possibili nel caso in cui siano note le dimensioni del contenuto, ma non del contenitore. E' il caso del prossimo esempio, in cui un elemento viene centrato nella finestra del browser. La tecnica, molto ben spiegata in questo articolo, è geniale, e usa una combinazione di posizionamento assoluto e margini negativi. In sostanza il paragrafo viene inizialmente posizionato con l'angolo in alto a sinistra al centro della finestra, per poi essere traslato della metà delle sue dimensioni verso l'alto e verso sinistra. Ecco il CSS:
p{ position: absolute;top: 50%;left: 50%;
width: 140px;height: 50px;
margin-left: -70px;margin-top: -25px;
background-color: #FFF;color: #999;
text-align: center}
Due elementi opposti sulla stessa riga
Nell'ultimo esempio vedremo come ottenere due elementi opposti sulla stessa riga. Ecco l'HTML:
<div class="split">
<h3 class="left">Qui il titolo</h3>
<h3 class="right">Data</h3>
</div>
Ora il CSS:
div.split{height:1.2em;background-color: #CCC}
div.split h3{margin:0;font-size: 120%}
div.split h3.left{float: left}
div.split h3.right{float: right}
Al div class="split" che contiene i due titoli viene assegnata un'altezza in em tale da contenere i due titoli ed evitare di avere elementi aggiuntivi per Risoluzione dei problemi dei CSS - I. I due titoli verranno quindi resi float opposti. Da notare che il valore 1.2em corrisponde proprio alla dimensione del font dei titoli 120%, solo che gli em, a differenza delle percentuali, costituiscono una vera e propria unità di misura.
Conclusioni
Si conclude qui l'introduzione pratica ai CSS, in cui abbiamo visto diversi esempi basilari di uso dei CSS, che sono disponibili per il download. Alla prossima.
