CSS

Centrare un'immagine con i css

Con i fogli di stile CSS è semplice centrare un'immagine in orizzontale rispetto allo spazio.

Per centrare un'immagine occorre attribuirgli per esempio la classe "fotografia".

<img class="fotografia" src="mia-immagine.jpg">

e definire nel foglio di stile CSS la regola:

img.fotografia{

  display: block;

  margin:0 auto;

}

L'immagine risulterà così centrata nella pagina.

 

allineare un'immagine a sinistra con i css

Vogliamo allineare un'immagine a sinistra rispetto al testo. Normalmente basta inserire la proprietà align="left" nel tag img. Volgiamo ottenere lo stesso effetto utilizzando i fogli di stile.

Supponiamo che l'immagine faccia parte di un tipo di contenuto che abbiamo creato e che sia quindi identificamile dalle classi .node .content

la regola da applicare sarà:

.node .content img {

float: left;

display: inline;

clear: both;

}

 

Comportamento dei link utilizando i fogli di stile

E' possibile dare un comportamento ai link utilizando i fogli di stile. Esistono 4 stati a qui è possibile associare una regola: link nonvisitato, link visitato, con mouse sopra. link selezionato.

La sintassi è

selettore:pseudo-classe {propietà: valore}

l'ordine nel foglio di stile deve essere il seguente

  • a:link {color: #FF0000} /* link nonvisitato */
  • a:visited {color: #00FF00} /* link visitato */
  • a:hover {color: #FF00FF} /* con mouse sopra */
  • a:active {color: #0000FF} /* link selezionato */

Design centrato

Con i fogli di stile (CSS) è possibile creare un layout con larghezza fissa posizionato al centro dello schermo senza ricorrere alle tabelle.

Un' esempio tratto da css Zen Garden è visibile in figura:

Soluzione

Creiamo uno stile che chiamiamo container. Supponiamo di impostare la larghezza massima del nostro design a 760. Nel foglio di stile dovremo inserire

Iscriviti a CSS