5 trucchi Css fondamentali

Vediamo come risolvere alcuni problemi abbastanza frequenti per chi è alle prime armi con i fogli di stile Css.

1) Centrare un testo o un immagine verticalmente in un div

Questo è uno dei problemi più frequenti per chi incomincia a studiare i css. La soluzione è molto semplice, vediamo un esempio:

Esempio

<div style="height:200px; width:200px; line-height:200px; border:1px dotted #09f; text-align:center;">testo</div>La tecnica sta nel dare un line-height uguale all'altezza del div.

2) Centrare un div nel body

Questo è ancora più semplice del precedente, ma nonostante, c'è chi chiede aiuto sui forum su come fare:

<div style="margin:0 auto">testo</div>

Su Internet explorer basterebbe anche un text-align ma gli standard Css, che vengono rispettati su Firefox, Opera e Safari, impongono di dare il margin:auto.

3) Div affiancati

Per fare in modo che i nostri div siano ben allineati e affiancati, ci viene incontro l'attributo float che distribuisce, a seconda delle nostre neccessità, gli elementi a destra o sinistra.

esempio 1

esempio 2

esempio 3

<div style="float:left">testo</div>

4) Div non affiancati

Inizialmente chi si avvicina ai css tralascia questo problema, ma quando incominci a realizzare layout appena un pò più complicati, non puoi fare a meno di venir a contatto con questo problema. La soluzione è l'attributo clear, che seguito da both fa in modo che un div non si affianchi ad un altro, e che vada a capo da solo.
Un esempio:

<div style="clear:both">testo</div>

5) Cambiare lo stile ai soli elementi di un div

Dopo aver impostato uno stile a tutti gli elementi di una pagina, capita di dover cambiarli in un determinato punto, come per esempio i valori dei link a in un div speciale.
Se per identificare gli attributi di un'intera pagina dei tag a si procede così:
a {color:blue; text-decoration:none} a:hover {color:red}

Per cambiarli in un sola div procederemo così:
#div a {color:blue; text-decoration:none} #div a:hover {color:red}

Nei prossimi post spiegheremo tecniche Css più particolari. Se volete chiarimenti o suggerire alcune tematiche, vedremo di approffondire nei prossimi post.

Articoli correlati per categorie